Move invertion and color scheme to :root only

`:root` should be used as the only source of truth.
This commit is contained in:
ilyaigpetrov 2024-08-17 19:20:17 +05:00
parent 8c0cb1f0a9
commit 3d9d973ced

View File

@ -33,11 +33,20 @@
/* Reset ends */ /* Reset ends */
:root { :root {
background-color: black; /*
The initial theme is light but it's quickly inverted to dark.
Dark theme should be the first theme user sees by default.
TODO: Ponder more. E.g. valid color (green) must remain the
same even after invertion. Also a flash/blink of colors
during invertion must be avoided.
*/
background-color: white; /* Not transparent. */
color: black; color: black;
color-scheme: dark; border: 0 none white;
border: 0 none black; outline: 0 none white;
outline: 0 none black; color-scheme: light;
/* COLOR INVERTION */
filter: invert(0); /* TODO: temporary disabled. */
} }
:root, html, body { :root, html, body {
/*background: url('./gsbg.png') no-repeat;*/ /*background: url('./gsbg.png') no-repeat;*/
@ -48,10 +57,6 @@
--ribbon-color: #0075ff; /* #4169e1;*/ --ribbon-color: #0075ff; /* #4169e1;*/
font-family: Ubuntu, Arial, sans-serif; font-family: Ubuntu, Arial, sans-serif;
font-size: 75%; font-size: 75%;
color-scheme: light; /* Will be inverted to dark. */
/* COLOR INVERTION */
filter: invert(1);
padding: 10px; padding: 10px;
} }
@ -102,7 +107,7 @@
.use-preferred-color-scheme { .use-preferred-color-scheme {
/*background-color: violet; /*background-color: violet;
color: darkred;*/ color: darkred;*/
color-scheme: light; /*color-scheme: light;*/
}/* }/*
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.use-preferred-color-scheme { .use-preferred-color-scheme {