Dark mode has become a must-have feature in modern web applications. In Part A, we built a dark mode toggle with two buttons (Light and Dark). Now, we’re extending the functionality with a third button—System Mode—so that users can let the app decide the theme based on their device's settings.

1. Prerequisites

Before we begin, ensure you have the following set up:

React Application: You can bootstrap your project with vite or your preferred setup.
Tailwind CSS: Installed and configured (with dark mode enabled). Follow these steps.
Redux Toolkit: Integrated into your React application.

2. Configuring Tailwind CSS for Dark Mode

Tailwind CSS offers built-in dark mode support. First, open your tailwind.config.js file and set the darkMode option to 'class'. This allows you to control dark mode by adding or removing a dark class on a parent element (typically the <html> or <body>).

// tailwind.config.js

module.exports = {

darkMode: 'class', // Enables toggling dark mode via a CSS class

content: ['./src/**/*.{js,jsx,ts,tsx}'],

theme: {

extend: {},

},

plugins: [],

};

3. Managing Theme State with Redux Toolkit

Using Redux Toolkit, we can easily create a slice to manage the theme mode (system, dark, or light).

Create a Theme Slice

In the features folder, create a new folder (theme) and in it add a file (themeSlice.js). Add the code below in the themeSlice.js file.

We need to change our Redux slice so that the theme state is an object containing two properties:

type: the actual theme to apply (either 'dark' or 'light')
selected: the user’s chosen mode ('dark', 'light', or 'system')

Here’s the updated themeSlice.js:

import { createSlice } from '@reduxjs/toolkit';

// Get the initial theme based on user preference or local storage

const getInitialTheme = () => {

// Check for stored theme

const storedTheme = localStorage.getItem('b_theme');

if (storedTheme) {

return JSON.parse(storedTheme);

}

// Fallback to system preference

const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

return {

type: prefersDarkMode ? 'dark' : 'light',

selected: 'system'

};

};

const initialState = {

theme: getInitialTheme(),

};

export const themeSlice = createSlice({

name: 'theme',

initialState,

reducers: {

changeTheme: (state, action) => {

// action.payload will be 'dark', 'light', or 'system'

state.theme.selected = action.payload;

if (action.payload === 'system') {

// Use system preference for theme type

const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

state.theme.type = prefersDarkMode ? 'dark' : 'light';

} else {

state.theme.type = action.payload;

}

// Persist the updated theme state in local storage

localStorage.setItem('b_theme', JSON.stringify(state.theme));

},

},

});

export const { changeTheme } = themeSlice.actions;

export default themeSlice.reducer;

Explanation:

getInitialTheme: Checks local storage. If nothing is stored, it uses the system’s color scheme.
changeTheme reducer: When a user selects a mode:
If they choose 'system', it checks the media query and sets the type accordingly.
Otherwise, it sets both selected and type to the chosen mode.
Local Storage: The entire theme object is saved so that the preference persists across sessions

Integrate the Theme Slice into Your Store

Ensure your Redux store includes the theme slice:

// src/store.js

import { configureStore } from '@reduxjs/toolkit';

import themeReducer from './features/theme/themeSlice';

const store = configureStore({

reducer: {

theme: themeReducer,

// add other reducers here

},

});

export default store;

Wrap your application with the Redux Provider if you haven’t already:

import { createRoot } from 'react-dom/client'

import './index.css'

import App from './App.jsx'

import { store } from './store'

import { Provider } from 'react-redux'

createRoot(document.getElementById('root')).render(

<App />

</Provider>

)

4. Updating the App Component

Now, let’s update our main component to include three buttons: Dark Mode, Light Mode, and System Mode. We’ll also add styling to highlight the active button.

// src/App.js

import { useEffect } from 'react';

import { useSelector, useDispatch } from 'react-redux';

import { changeTheme } from './features/theme/themeSlice';

const App = () => {

const dispatch = useDispatch();

const { theme } = useSelector((state) => state.theme);

// Update the HTML <html> element based on the current theme type

useEffect(() => {

if (theme.type === 'dark') {

document.documentElement.classList.add('dark');

} else {

document.documentElement.classList.remove('dark');

}

}, [theme.type]);

// Handlers for toggling the theme

const handleThemeChange = (newTheme) => {

dispatch(changeTheme(newTheme));

};

// Function to determine button styling

const getButtonClasses = (buttonType) => {

// Highlight active button with a distinct background color

return theme.selected === buttonType

? 'px-4 py-2 mr-2 rounded bg-blue-600 text-white'

: 'px-4 py-2 mr-2 rounded border dark:border-gray-700';

};

return (

<h1 className="text-2xl font-bold">Implementing Dark Mode in React</h1>

</header>

<p className="mb-4">Current Theme: <strong>{theme.selected}</strong> (Applied: {theme.type})</p>

<div>

<button

onClick={() => handleThemeChange('dark')}

className={getButtonClasses('dark')}

>

Dark Mode

</button>

<button

onClick={() => handleThemeChange('light')}

className={getButtonClasses('light')}

>

Light Mode

</button>

<button

onClick={() => handleThemeChange('system')}

className={getButtonClasses('system')}

>

System Mode

</button>

</div>

</main>

</div>

);

};

export default App;

Explanation:

useEffect: Updates the <html> element’s class list whenever the theme.type changes. Tailwind CSS uses this class to switch styles.
handleThemeChange: Dispatches the action to update the theme in Redux.
getButtonClasses: Returns different CSS classes based on whether the button corresponds to the currently selected mode. The active button gets a blue background and white text, while inactive buttons show a bordered style.
Three Buttons: The UI now includes buttons for dark, light, and system modes.

5. Wrapping Up

With these updates, your application now offers three distinct options for dark mode:

Dark Mode: Forces a dark theme.
Light Mode: Forces a light theme.
System Mode: Follows the system's color scheme.

The Redux slice manages the user’s selection and the effective theme type, ensuring that the UI always reflects the proper style. Active button styling provides a visual cue for the current selection.