From 70fbe5156fd9373c48e6bffc731853ed2cab0d23 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Wed, 8 Jul 2026 00:40:40 +0200 Subject: [PATCH] fix(notes): apply shikiji dark palette in dark theme 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. --- src/styles/app.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/styles/app.css b/src/styles/app.css index f2fe184..3f55ee0 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -204,6 +204,28 @@ pre { 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 { display: flex; justify-content: center;