refactor: dedupe torchlight dark mode styles

This commit is contained in:
Ahmed Darrazi 2026-01-01 21:27:03 +01:00
parent 840e4686f9
commit 2c1ee814ee
3 changed files with 25 additions and 52 deletions

View File

@ -174,19 +174,9 @@
View View
</summary> </summary>
@if (is_string($fromHighlight) && $fromHighlight !== '') @if (is_string($fromHighlight) && $fromHighlight !== '')
<style> @once
html.dark code.torchlight { @include('filament.partials.torchlight-dark-overrides')
background-color: var(--phiki-dark-background-color) !important; @endonce
}
html.dark .phiki,
html.dark .phiki span {
color: var(--phiki-dark-color) !important;
font-style: var(--phiki-dark-font-style) !important;
font-weight: var(--phiki-dark-font-weight) !important;
text-decoration: var(--phiki-dark-text-decoration) !important;
}
</style>
<div class="mt-2 overflow-x-auto">{!! $fromHighlight !!}</div> <div class="mt-2 overflow-x-auto">{!! $fromHighlight !!}</div>
@else @else
@ -205,19 +195,9 @@
View View
</summary> </summary>
@if (is_string($toHighlight) && $toHighlight !== '') @if (is_string($toHighlight) && $toHighlight !== '')
<style> @once
html.dark code.torchlight { @include('filament.partials.torchlight-dark-overrides')
background-color: var(--phiki-dark-background-color) !important; @endonce
}
html.dark .phiki,
html.dark .phiki span {
color: var(--phiki-dark-color) !important;
font-style: var(--phiki-dark-font-style) !important;
font-weight: var(--phiki-dark-font-weight) !important;
text-decoration: var(--phiki-dark-text-decoration) !important;
}
</style>
<div class="mt-2 overflow-x-auto">{!! $toHighlight !!}</div> <div class="mt-2 overflow-x-auto">{!! $toHighlight !!}</div>
@else @else
@ -249,19 +229,9 @@
@endphp @endphp
@if (is_string($highlighted) && $highlighted !== '') @if (is_string($highlighted) && $highlighted !== '')
<style> @once
html.dark code.torchlight { @include('filament.partials.torchlight-dark-overrides')
background-color: var(--phiki-dark-background-color) !important; @endonce
}
html.dark .phiki,
html.dark .phiki span {
color: var(--phiki-dark-color) !important;
font-style: var(--phiki-dark-font-style) !important;
font-weight: var(--phiki-dark-font-weight) !important;
text-decoration: var(--phiki-dark-text-decoration) !important;
}
</style>
<div class="mt-2 overflow-x-auto">{!! $highlighted !!}</div> <div class="mt-2 overflow-x-auto">{!! $highlighted !!}</div>
@else @else

View File

@ -209,19 +209,9 @@
<div x-show="open" x-cloak> <div x-show="open" x-cloak>
@if (is_string($highlightedHtml) && $highlightedHtml !== '') @if (is_string($highlightedHtml) && $highlightedHtml !== '')
<style> @once
html.dark code.torchlight { @include('filament.partials.torchlight-dark-overrides')
background-color: var(--phiki-dark-background-color) !important; @endonce
}
html.dark .phiki,
html.dark .phiki span {
color: var(--phiki-dark-color) !important;
font-style: var(--phiki-dark-font-style) !important;
font-weight: var(--phiki-dark-font-weight) !important;
text-decoration: var(--phiki-dark-text-decoration) !important;
}
</style>
<div class="overflow-x-auto">{!! $highlightedHtml !!}</div> <div class="overflow-x-auto">{!! $highlightedHtml !!}</div>
@else @else

View File

@ -0,0 +1,13 @@
<style>
html.dark code.torchlight {
background-color: var(--phiki-dark-background-color) !important;
}
html.dark .phiki,
html.dark .phiki span {
color: var(--phiki-dark-color) !important;
font-style: var(--phiki-dark-font-style) !important;
font-weight: var(--phiki-dark-font-weight) !important;
text-decoration: var(--phiki-dark-text-decoration) !important;
}
</style>