igor
/
portfoligor
1
1
Fork 0
Code Issues 9 Pull Requests Packages Projects 1 Releases 4 Wiki Activity

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 <igor@milhit.ch>
dev
iGor milhit 2024-12-14 08:53:34 +01:00
parent 264fc3480e
commit fb053482cd
Signed by: igor
GPG Key ID: 692D97C3D0228A99
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/scss/_variables.scss
View File

@ -28,15 +28,21 @@ tfoot td {
[data-theme=light], [data-theme=light],
:root:not([data-theme=dark]) { :root:not([data-theme=dark]) {
--logo-color: var(--pico-color); --logo-color: var(--pico-h1-color);
} }
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :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] { [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;
} }