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

14
assets/scss/_variables.scss
View File

@ -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;
}