fix(notes): apply shikiji dark palette in dark theme
All checks were successful
CI / verify (push) Successful in 1m4s

Shikiji emits the dark colors as --shiki-dark* inline vars but the
activation CSS was missing, so code blocks kept the vitesse-light
white background and the base-content line numbers were white-on-white.
This commit is contained in:
Julien Calixte
2026-07-08 00:40:40 +02:00
parent 049ce01ab5
commit 70fbe5156f

View File

@@ -204,6 +204,28 @@ pre {
user-select: none; user-select: none;
} }
/* Shikiji renders dual-theme tokens but only inlines the light colors;
the dark palette lives in --shiki-dark* vars that we must apply ourselves.
Without this, dark theme keeps the white code background and the
base-content line numbers become white-on-white. */
[data-theme="dracula"] :is(.shiki, .shiki span) {
color: var(--shiki-dark) !important;
background-color: var(--shiki-dark-bg) !important;
font-style: var(--shiki-dark-font-style) !important;
font-weight: var(--shiki-dark-font-weight) !important;
text-decoration: var(--shiki-dark-text-decoration) !important;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) :is(.shiki, .shiki span) {
color: var(--shiki-dark) !important;
background-color: var(--shiki-dark-bg) !important;
font-style: var(--shiki-dark-font-style) !important;
font-weight: var(--shiki-dark-font-weight) !important;
text-decoration: var(--shiki-dark-text-decoration) !important;
}
}
pre.mermaid { pre.mermaid {
display: flex; display: flex;
justify-content: center; justify-content: center;