DEV Community: Callum

Create a Super Simple Light/Dark Mode Switch

Callum — Wed, 07 Jul 2021 07:45:18 +0000

It seems like more and more websites are developing dark modes and many people prefer dark modes as it can cause less eye strain, especially in low light. This should be considered when developing any website today.

Luckily a dark mode switch is very easy to implement with a few lines of JavaScript and some CSS custom properties.

First of all, we need to think about the technical implementation. It's possible to use the prefers-color-scheme media query in CSS and not use any JavaScript, however I believe that dark mode should always be a choice of the user as many websites implement dark mode horribly.

Setting up dark mode

So the first step is to write a JavaScript snippet to place into the top of the <head></head> of the document. This should be inlined into the top of the head so that it is executed as early as possible on page load.

<script type="text/javascript">
  document.documentElement.classList.toggle(
    'dark',
    localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
  );
</script>

The above toggle class conditional adds a dark class to the HTML tag if localStorage.theme is set to dark or prefers-color-scheme is dark.

Toggling dark mode

Next, we need to implement the toggle functionality. This needs to do a few things; update the local storage (so that when the user reloads the page the preference is restored) and also toggle the dark class on the <html> tag.

The functionality can be implemented in many ways, but here's a simple example. If you are using a JavaScript library then the code will be completely different, this is just a vanilla JavaScript implementation.

document.addEventListener('DOMContentLoaded', () =>
  document.querySelectorAll('[toggle-dark-mode]').forEach((item) =>
    item.addEventListener('click', () => {
      localStorage.setItem('theme', localStorage.theme == 'dark' ? 'light' : 'dark');
      document.documentElement.classList.toggle('dark');
    })
  )
);

The above code simply adds a click event listener to all elements with the toggle-dark-mode HTML attribute. Clicking the element should then update local storage and toggle the dark mode class.

Example button:

<button toggle-dark-mode>Toggle dark mode</button>

Styling for dark mode

If you are using Tailwind, dark mode should now be functional. You can simply add the dark: prefix to any class names for modifications in dark mode.

CSS custom properties are widely supported cross browser and simplify the effort required for colour mode theming.

Here's some example CSS to get started:

:root {
  --color-bg: #fff;
}

html.dark {
  --color-bg: #000;
}

body {
  background-color: var(--color-bg);
}

It's assumed that the default colour theme will be light mode, so it's safe to place all default colour properties inside :root {}.

Dark colour theme changes can be placed inside of the html.dark {} selector, which will override the root properties.

Et voila! You now have a basic dark mode implementation.

Whats next?

But wait, theres more!

Many media queries are planned for release with the Media Queries Level 5 spec. So keep a watch out for other colour modes, especially prefers-contrast which will allow us to easily implement more accessible colour modes.

Creating Favicons for Light and Dark Mode UIs

Callum — Wed, 07 Jul 2021 06:29:24 +0000

Dark mode UIs are becoming increasingly popular. Often the legibility of a favicon is not great in light or dark mode, so a dynamic solution is needed to display correctly in both modes.

Luckily, SVG favicons provide the functionality we need. If you are not using SVG favicons on your site yet, then go and change them now. You can drop those 20+ PNG icons in favour of a single SVG.

So here's the thing, we can use CSS in SVGs, meaning you can also use the prefers-color-scheme media query to adjust the SVG.

Here's an example icon with some CSS to set the default path fill colour to black. The media query then changes the fill colour to white if the user has dark mode enabled.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 429.056 429.056">
  <style>
    path { fill: #000; }

    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M413.696 182.272h-21.504v-68.096c-.512-8.192-7.168-14.848-15.36-15.36H229.888V4.608h-30.72v94.208H52.224c-8.192.512-14.848 7.168-15.36 15.36v68.096H15.36c-8.704 0-15.36 6.656-15.36 15.36v101.376c0 8.704 6.656 15.36 15.36 15.36h21.504v94.72c.512 8.192 7.168 14.848 15.36 15.36h324.608c8.192-.512 14.848-7.168 15.36-15.36v-94.72h21.504c8.704 0 15.36-6.656 15.36-15.36V197.632c0-8.704-6.656-15.36-15.36-15.36zm-313.344 36.352c0-24.576 19.968-44.544 44.544-44.544s44.544 19.968 44.544 44.544-19.968 44.544-44.544 44.544-44.544-19.968-44.544-44.544zm181.76 133.632H146.944v-30.72h135.168v30.72zm46.592-133.632c0 24.576-19.968 44.544-44.544 44.544-25.088 0-45.056-19.968-45.568-44.544 0-25.088 19.968-45.056 44.544-45.568 24.576-.512 45.056 19.968 45.568 44.544v1.024z" />
</svg>

You just need to link your new icon.svg file in the document head:

<link rel="icon" href="/assets/icon.svg" />

Here's the outcome. You might need to reload the page when switching between light/dark mode UI.

Emoji Favicons Are a Thing Now 🤯🚀

Callum — Tue, 06 Jul 2021 11:49:43 +0000

Emojis are everywhere nowadays. I created perpetual.pizza many years ago now and tend to update it every so often. I never liked the old pizza favicon and decided to try replacing it with an emoji.

SVG favicons are now widely supported and I have been experimenting with the possibilities recently (light/dark mode favicons are awesome). I ended up finding an elegant solution for creating an emoji favicon.

It turns out that you can use emojis inside of SVG text and
use relative units to position and size the emoji correctly. This method also displays the emoji in the format the user is familiar with on their operating system.

Here's the markup for my icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <text y="0.9em" font-size="90">🍕</text>
</svg>

I added it into the document head like a regular SVG icon:

<link rel="icon" href="/assets/icon.svg" />

Here's the outcome: