Create A custom Dark/Light Mode Switch with React and CSS Variables

Create A custom Dark/Light Mode Switch with React and CSS Variables

I tried a couple other methods to achieve this effect that involved using React's Context API before settling on simple CSS variables. The trouble I ran into using Context was that it simply triggered a re-render and switched the theme colors immediately without applying a transition animation.

I also believe that the best method is often the simplest method and using CSS variables is a win in that respect. The only issue is that (wah-waaah, get ready) they aren't supported in IE. Because this site is aimed at designers, the vast majority of whom are using a modern browser on their desktop (many of them a Mac where IE isn't an option at all) or using their smartphone to access the site, I reason that full IE support is not required.

Alright, now onto the fun stuff.

The CSS Variables

Step one is to set the CSS variables on the root in the global CSS file so they can be accessed anywhere in the DOM (or in this case the virtual DOM).

Because I'm attempting to "partially" support IE11 for this project, I'm using fallbacks by first setting the element directly to a hex code and then overriding that with the variable. The override will be ignored by any browser that doesn't support CSS variables.

/* layout.css */
:root {
  --color-bg: #f0f0f0;
  --color-text: #994cc3;
  --color-primary: #ef5350;
  --color-secondary: #0c969b;
  --color-header-bg: rgba(255, 255, 255, 0.9);
  --color-neon-fill: #ef5350;
  --color-neon-glow: none;
}

body { background: #f0f0f0; /* fallback */ background: var(--color-bg); color: #994cc3; color: var(--color-text); transition: background 0.8s, color 0.8s; }

h1, h2, h3, h4, h5, h6 { color: #ef5350; /* fallback */ color: var(--color-primary); }

a { color: #0c969b; /* fallback */ color: var(--color-secondary); }

The JavaScript

With the variables set globally in the CSS, new values can be assigned as needed using JavaScript. I started by creating two color theme objects -- lightTheme & darkTheme -- inside my main layout.js component.

// layout.js
import './layout.css';

const lightTheme = { '--color-text': '#994cc3', '--color-bg': '#f0f0f0', '--color-primary': '#EF5350', '--color-secondary': '#0c969b', '--color-header-bg': 'rgba(255, 255, 255, 0.9)', '--color-neon-fill': '#ef5350', '--color-neon-glow': 'rgba(255, 255, 255, 0)', }; const darkTheme = { '--color-text': '#82AAFF', '--color-bg': '#011627', '--color-primary': '#c792ea', '--color-secondary': '#7fdbca', '--color-header-bg': 'rgba(1, 10, 18, 0.9)', '--color-neon-fill': '#FFFEFC', '--color-neon-glow': '#d99fff', };

Up first, inside the component, there are 2 useState hooks. One to set the mode and one to toggle the switch.

Next, a useEffect hook loops over the values in the chosen mode object and assigns the correct colors to the corresponding CSS variables. The 2nd argument tells React to only re-render if currentMode changes.

A second useEffect checks localStorage upon page load for a 'mode' item set to 'dark'. If this item is found it toggles to dark mode. For this hook the 2nd argument is an empty array, which means the effect will be run only once on the initial load of the page (similar to how ComponentDidMount works in class components).

The toggleTheme function updates the checked status to the opposite of what it is currently set to and switches the mode from 'dark' to 'light' or 'light' to 'dark'. It also sets the 'mode' item inside localStorage to the new mode.

// layout.js
import React, { useState, useEffect } from 'react';

// ...

export default function Layout({ children }) { const [currentMode, setCurrentMode] = useState('light'); const [isChecked, setIsChecked] = useState(false);

useEffect(() => { if (localStorage.getItem('mode') === 'dark') { setCurrentMode('dark'); setIsChecked(true); } }, []);

useEffect(() => { const theme = currentMode === 'light' ? lightTheme : darkTheme; Object.keys(theme).forEach(key => { const value = theme[key]; document.documentElement.style.setProperty(key, value); }); }, [currentMode]);

const toggleTheme = () => { const newMode = currentMode === 'light' ? 'dark' : 'light'; setIsChecked(!isChecked); setCurrentMode(newMode); localStorage.setItem('mode', newMode); };

Because the ToggleSwitch component is located inside of the Header component, the toggleTheme and isChecked functions need to be passed into the Header and then into the ToggleSwitch.

//layout.js
import Header from './header';

// ...

return ( <div className="site"> <Header toggleTheme={toggleTheme} isChecked={isChecked} /> <main>{children}</main> </div> ); // header.js import ToggleSwitch from './ToggleSwitch';

// ...

<ToggleSwitch toggleTheme={toggleTheme} isChecked={isChecked} id="mode" ariaLabel="dark mode toggle" />

A toggle is just a checkbox with some CSS magic applied to it.

The jsx for the component consists of a div (Toggle), an input with type="checkbox", and a span (Slider). On the checkbox input, toggleTheme is assigned to onChange and isChecked is assigned to checked.

import React from 'react';
import styled from '@emotion/styled';

export default function ToggleSwitch({ toggleTheme, isChecked, ariaLabel, id, }) { return ( <Toggle> <Input type="checkbox" onChange={toggleTheme} checked={isChecked} id={id} aria-label={ariaLabel} /> <Slider /> </Toggle> ); }

Styling the Toggle Switch

As you can see I'm using CSS-in-JS via the @emotion/styled library. If you are familiar with styled-components, it works almost exactly the same but the package is slightly smaller and apparently more performant (I haven't actually tested it, so what do I know?). Emotion also gives you the option of using css props to style components, which can be useful in certain situations.

To use styled-components, you simple rename your HTML tags to whatever makes sense semantically, and then define which native HTML elements your new tags should use with the CSS for each element inside back-ticks. The API supports nesting similar to SCSS, and the styles are SCOPED TO THE COMPONENT!

Personally, I love how semantic and simple this makes my JSX markup. No more jamming 14 different classnames onto every element ala Bootstrap or writing disgusting classnames like "header__toggle-switch--dark-mode" ala BEM.

const Toggle = styled.div  position: relative;   &amp;:after {     content: '☀️';     font-size: 18px;     position: absolute;     top: 7px;     left: 37px;   }   &amp;:before {     content: '🌙';     font-size: 18px;     position: absolute;     top: 7px;     left: 6px;     z-index: 1;   };
const Input = styled.input  position: absolute;   left: 0;   top: 0;   z-index: 5;   opacity: 0;   cursor: pointer;   &amp;:hover + span:after {     box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);   }   &amp;:checked + span {     background: #4a5b90;     &amp;:after {       transform: translate3d(32px, 0, 0);     }   };
const Slider = styled.span  position: relative;   display: block;   height: 32px;   width: 64px;   border-radius: 32px;   transition: 0.25s ease-in-out;   background: #3a9df8;   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.15);   &amp;:after {     content: '';     position: absolute;     border-radius: 100%;     top: 0;     left: 0;     z-index: 2;     background: #fff;     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);     transition: 0.25s ease-in-out;     width: 32px;     height: 32px;   };

The CSS variable can then be assigned to any element and the colors will change upon clicking the toggle switch.

The variables can be assigned globally...

/* layout.css */
body {
  margin: 0;
  line-height: 1;
  background: #f0f0f0;
  background: var(--color-bg);
  color: #994cc3;
  color: var(--color-text);
  transition: background 0.8s, color 0.8s;
}

and inside components using CSS-in-JS.

// header.js
const MenuButton = styled.button  background: none;   border: none;   padding: 0;   margin: 0;   .hamburger {     fill: #994cc3;     fill: var(--color-text);      transition: fill 0.5s;     height: 40px;   }   @media screen and (min-width: ${bpMed}) {     display: none;   };

Thanks for reading! I hope you found this informative. If you liked this post, share it with all of your programming buddies!


Originally published on dev.to

reactjs css javascript html devops

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown. W will build a Responsive Website with HTML, CSS, and JavaScript

CSS Button Generator (Mini) using HTML, CSS, and JavaScript

Learn how to create a mini CSS Button generator just by using HTML, CSS, and JavaScript. We will only cover some properties related to the button but you can use other properties to allow users to play around with different styles and designs.

Animated Counter using JavaScript with HTML, CSS | JavaScript Counter Animation

In this video, you'll see Animated Counter using JavaScript with HTML CSS

CSS3 Clip-path Transform Effects on Scroll with Video Background | Html CSS Vanilla Javascript

CSS3 Clip-path Transform Effects on Scroll with Video Background | Html CSS Vanilla Javascript

How to add CSS & Javascript to your HTML

How to add CSS & Javascript to your HTML - In this video, we create a starter template and link external CSS and Javascript files into our HTML file. We also look into what a CDN is and general boiler...