Dark Mode support added
mixedCase.nl is now updated with a fresh new header, and more importantly, dark mode support!
This was surprisingly easy to do with the help of CSS variables:
:root {
--accent: orange;
--page-background: white;
--nav-background: #333;
--code-background: #f5f7f9;
--text-color: #566b78;
--code-color: #566b78;
--header-color: #333;
--secondary-text-color: #CCC;
--blockquote-color: #666;
}
@media screen and (prefers-color-scheme: dark) {
:root {
--accent: #fd7014;
--page-background: #222831;
--nav-background: #393e46;
--code-background: #393e46;
--text-color: #eeeeee;
--code-color: #eeeeee;
--header-color: white;
--secondary-text-color: #CCC;
--blockquote-color: #CCC;
}
}
body {
color: var(--text-color);
background-color: var(--page-background);
}