---
title: "Dark mode"
description: "Here are some articles I stumbled upon while researching different ways of implementing a dark mode."
canonical_url: "https://codex.republic.se/languages/css/dark-mode"
section: "Pages"
---

# Dark mode

Here are some articles I stumbled upon while researching different ways of implementing a *dark mode*.

---

- [A Complete Guide to Dark Mode on the Web](https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/)
- [8 Tips for Dark Theme Design](https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6)
- [Material Design](https://material.io/design/color/dark-theme.html#usage)
- [Dark Mode UI: the definitive guide](https://uxdesign.cc/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129)
- [How to Build a Secret Dark Mode Toggle for Your Blog](https://radek.io/posts/secret-darkmode-toggle/)

---

More fun than functional:

- [tonsky.me](https://tonsky.me/)

---

Tip! Listen for system preference change:

```js
window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change',({ matches }) => {
  if (matches) {
    console.log("change to dark mode!")
  } else {
    console.log("change to light mode!")
  }
})

```