#Dark mode switch html how to#
#Dark mode switch html update#
#Dark mode switch html code#

Append a CSS class in the HTML body tag when the color scheme has changed.In our case, we will toggle between these 2 stylesheets for syntax highlighting - prism-dark.css and prism-light.css. Split into light and dark CSS files, and load them conditionally.We will style our website by using these two approaches:. We will handle the toggle click event in a moment. Note that you can replace the image with your own dark and light mode images. We will change the image src to 'light' and alt to 'toggle light mode' if the user clicks and toggles to light mode, and vice versa. We gave the toggle an id #color-scheme-toggle. Place it in base layout too because we want it to show in every page. No action is needed for the light color scheme, because it's the default mode.

#Dark mode switch html update#

When the color scheme is dark, we need to update our website appearance. We can use that to detect prefers-color-scheme, which is the user's system setting. It is widely supported by modern browsers. Window.matchMedia (or just matchMedia) is the web API for finding out whether a media query applies to the document or not.

MatchMedia ( '(prefers-color-scheme: dark)' ).

#Dark mode switch html code#

This logic is needed in every web page so we will place the code in the base layout. We will use that if it exists, else we use system settings or fall back to light mode if not found. We will also detect if any color scheme is stored in session storage. When the page first loads, we will use JavaScript to detect the user's current system settings. Rendering panel Detecting user's preferred color scheme

Select Rendering: Emulate CSS prefers-color-scheme: dark.

Click on three dots (top right corner) > Select 'Run command'.

There are two ways to do this - the short version (if you remember the command) and a slightly longer version. We can emulate the color scheme with CDT. There's an easier way to do it: Chrome DevTools (CDT) is here to the rescue. However, changing our system settings multiple times is not fun.

#Dark mode switch html how to#

Here is the guide on how to change the color scheme in your system settings: We will be spending a lot of time on testing this.

In case no color scheme is detected, always fall back to light mode.īefore we jump into coding, let's talk about how we can test color scheme changes.Dim the images' color when it's in dark mode.Ensure smooth transition when changing the color scheme.Once the user has changed the color scheme, we will use that setting for the entire session (until the user closes the tab).Option to change the color scheme - in our case, show a toggle on the top right corner.if the user's system settings is dark mode, our site should show dark mode as default).

Display the page with the user's preferred color scheme.

I will refer them as color scheme from here onwards. Our website needs to support dark and light mode. Here is the GitHub repo jec-11ty-starter if you prefer to read the code straightaway. Click on the top right toggle on this page to see it in action.

This post will focus on how I implemented dark mode support in this website. However, it's not just for fun, it's a feature, and some may even say it's a necessity. Working with and supporting dark mode is fun. Supporting Dark Mode in Your Website jec.fyi Supporting Dark Mode in Your Website