53 lines
1.0 KiB
CSS
Executable File
53 lines
1.0 KiB
CSS
Executable File
:root {
|
|
--dark: #333;
|
|
--mid: #555;
|
|
--light: #ddd;
|
|
--white: #fff;
|
|
}
|
|
|
|
/* Set default to light mode */
|
|
body {
|
|
background-color: var(--white);
|
|
color: var(--dark);
|
|
}
|
|
|
|
/* TODO: In light stealth mode, set font colors to light. This should
|
|
* all text, including the buttons. */
|
|
.stealth {
|
|
color: var(--light);
|
|
}
|
|
|
|
/* TODO: Dark mode:
|
|
* Switch the background color to dark and switch the article
|
|
* border to white. Any text on a gray background should become
|
|
* dark while text on the new dark background becomes light.
|
|
*/
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background-color: var(--dark);
|
|
color: var(--light);
|
|
}
|
|
article {
|
|
border-color: var(--white);
|
|
}
|
|
main h2,
|
|
main h3 {
|
|
color: var(--dark);
|
|
}
|
|
|
|
body.stealth {
|
|
color: var(--mid);
|
|
}
|
|
|
|
body.stealth > main h2,
|
|
body.stealth > main h3,
|
|
body.stealth > nav button {
|
|
color: var(--light);
|
|
}
|
|
}
|
|
|
|
/* TODO: Stealth dark mode:
|
|
* Set the font colors to mid, except for those that are on a gray
|
|
* background. Make that text have a light font color.
|
|
*/
|