From fb053482cdbf8d9b65aba762f833a5a68758c73f Mon Sep 17 00:00:00 2001 From: iGor milhit Date: Sat, 14 Dec 2024 08:53:34 +0100 Subject: [PATCH] scss: fix the mark color contrast for dark theme - Uses the main font color of the light theme for the mark color of the dark theme, to improve the contrast. - Uses the h1 color for the logo. Co-Authored-by: iGor milhit --- assets/scss/_variables.scss | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index c175699..f7fcc54 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -27,16 +27,22 @@ tfoot td { // Adapt the SVG logo color to the colorscheme [data-theme=light], - :root:not([data-theme=dark]) { - --logo-color: var(--pico-color); +:root:not([data-theme=dark]) { + --logo-color: var(--pico-h1-color); } @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme]) { - --logo-color: var(--pico-color); + --logo-color: var(--pico-h1-color); + // Use the pico color of the light theme to improve contrast + // TODO: Explore if a variable could be used here + --pico-mark-color: #373c44; } } [data-theme=dark] { - --logo-color: var(--pico-color); + --logo-color: var(--pico-h1-color); + // Use the pico color of the light theme to improve contrast + // TODO: Explore if a variable could be used here + --pico-mark-color: #373c44; }