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

Have feedback? Let me know on Twitter.