React’s Context API is a game-changer when it comes to implementing dark mode and themes in your applications. It’s like having a secret weapon that lets you effortlessly manage and share state across your entire app. Trust me, once you get the hang of it, you’ll wonder how you ever lived without it.
Let’s dive into the nitty-gritty of implementing dark mode and themes using React’s Context API. First things first, we need to create a context that will hold our theme information. This is where the magic begins:
import React, { createContext, useState, useContext } from 'react';
const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
const [isDarkMode, setIsDarkMode] = useState(false);
const toggleTheme = () => {
setIsDarkMode(prevMode => !prevMode);
};
return (
<ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
export const useTheme = () => useContext(ThemeContext);
This snippet sets up our ThemeContext and a custom hook called useTheme. The ThemeProvider component will wrap our entire app, making the theme information available to all child components. It’s like giving your app a cozy blanket of theming goodness.
Now, let’s put this to use in our main App component:
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import MainContent from './MainContent';
const App = () => {
return (
<ThemeProvider>
<MainContent />
</ThemeProvider>
);
};
export default App;
See how we’ve wrapped our MainContent component with the ThemeProvider? This ensures that all components within MainContent have access to our theme information. It’s like giving them a VIP pass to the theme party.
Now, let’s create our MainContent component and see how we can use our theme:
import React from 'react';
import { useTheme } from './ThemeContext';
const MainContent = () => {
const { isDarkMode, toggleTheme } = useTheme();
return (
<div style={{
backgroundColor: isDarkMode ? '#333' : '#fff',
color: isDarkMode ? '#fff' : '#333',
minHeight: '100vh',
padding: '20px'
}}>
<h1>Welcome to My Awesome App</h1>
<p>This is some content that changes based on the theme.</p>
<button onClick={toggleTheme}>
Switch to {isDarkMode ? 'Light' : 'Dark'} Mode
</button>
</div>
);
};
export default MainContent;
In this component, we’re using our useTheme hook to access the current theme state and the toggle function. We’re applying different styles based on whether isDarkMode is true or false. It’s like having a personal stylist for your app that changes its outfit based on the theme.
But wait, there’s more! What if we want to have multiple themes instead of just dark and light? No problem! Let’s modify our ThemeContext to handle multiple themes:
import React, { createContext, useState, useContext } from 'react';
const ThemeContext = createContext();
const themes = {
light: {
foreground: '#000000',
background: '#eeeeee',
},
dark: {
foreground: '#ffffff',
background: '#222222',
},
blue: {
foreground: '#ffffff',
background: '#0000ff',
},
};
export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme(prevTheme =>
prevTheme === 'light' ? 'dark' :
prevTheme === 'dark' ? 'blue' : 'light'
);
};
return (
<ThemeContext.Provider value={{ theme: themes[theme], toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
export const useTheme = () => useContext(ThemeContext);
Now we have three themes: light, dark, and blue. Our toggleTheme function cycles through these themes. It’s like having a color wheel for your app!
Let’s update our MainContent component to use these new themes:
import React from 'react';
import { useTheme } from './ThemeContext';
const MainContent = () => {
const { theme, toggleTheme } = useTheme();
return (
<div style={{
backgroundColor: theme.background,
color: theme.foreground,
minHeight: '100vh',
padding: '20px'
}}>
<h1>Welcome to My Multi-Themed App</h1>
<p>This content changes based on the current theme.</p>
<button onClick={toggleTheme}>
Switch Theme
</button>
</div>
);
};
export default MainContent;
Now our app can switch between three different themes. It’s like giving your users a paintbrush to customize their experience.
But what if we want to persist the user’s theme preference even after they close the app? We can use localStorage for that. Let’s modify our ThemeProvider:
import React, { createContext, useState, useContext, useEffect } from 'react';
const ThemeContext = createContext();
const themes = {
light: {
foreground: '#000000',
background: '#eeeeee',
},
dark: {
foreground: '#ffffff',
background: '#222222',
},
blue: {
foreground: '#ffffff',
background: '#0000ff',
},
};
export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState(() => {
const savedTheme = localStorage.getItem('theme');
return savedTheme || 'light';
});
useEffect(() => {
localStorage.setItem('theme', theme);
}, [theme]);
const toggleTheme = () => {
setTheme(prevTheme =>
prevTheme === 'light' ? 'dark' :
prevTheme === 'dark' ? 'blue' : 'light'
);
};
return (
<ThemeContext.Provider value={{ theme: themes[theme], toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
export const useTheme = () => useContext(ThemeContext);
Now, when a user selects a theme, it’ll be saved in localStorage and persisted across sessions. It’s like giving your app a memory for user preferences.
But what about accessibility? We should consider users who might have difficulty distinguishing between certain colors. Let’s add some high contrast themes:
const themes = {
light: {
foreground: '#000000',
background: '#ffffff',
},
dark: {
foreground: '#ffffff',
background: '#000000',
},
highContrastLight: {
foreground: '#000000',
background: '#ffff00',
},
highContrastDark: {
foreground: '#ffff00',
background: '#000000',
},
};
And update our toggleTheme function:
const toggleTheme = () => {
setTheme(prevTheme => {
switch(prevTheme) {
case 'light': return 'dark';
case 'dark': return 'highContrastLight';
case 'highContrastLight': return 'highContrastDark';
default: return 'light';
}
});
};
Now we’re not just stylish, we’re inclusive too! It’s like making sure everyone gets invited to the party.
But wait, what if we want to apply our theme to more complex components? Let’s create a themed button component:
import React from 'react';
import { useTheme } from './ThemeContext';
const ThemedButton = ({ children, ...props }) => {
const { theme } = useTheme();
return (
<button
style={{
backgroundColor: theme.background,
color: theme.foreground,
border: `2px solid ${theme.foreground}`,
padding: '10px 20px',
borderRadius: '5px',
cursor: 'pointer',
}}
{...props}
>
{children}
</button>
);
};
export default ThemedButton;
Now we can use this ThemedButton component throughout our app, and it’ll automatically update its style based on the current theme. It’s like having a chameleon button that adapts to its surroundings!
Let’s update our MainContent component to use this new button:
import React from 'react';
import { useTheme } from './ThemeContext';
import ThemedButton from './ThemedButton';
const MainContent = () => {
const { theme, toggleTheme } = useTheme();
return (
<div style={{
backgroundColor: theme.background,
color: theme.foreground,
minHeight: '100vh',
padding: '20px'
}}>
<h1>Welcome to My Awesome Themed App</h1>
<p>This content changes based on the current theme.</p>
<ThemedButton onClick={toggleTheme}>
Switch Theme
</ThemedButton>
</div>
);
};
export default MainContent;
Now our app is looking slick with a custom themed button. It’s like giving your app a tailored suit that changes color on demand.
But what if we want to get really fancy and add some smooth transitions between themes? We can use CSS transitions for that. Let’s update our MainContent component:
import React from 'react';
import { useTheme } from './ThemeContext';
import ThemedButton from './ThemedButton';
const MainContent = () => {
const { theme, toggleTheme } = useTheme();
return (
<div style={{
backgroundColor: theme.background,
color: theme.foreground,
minHeight: '100vh',
padding: '20px',
transition: 'all 0.3s ease',
}}>
<h1>Welcome to My Super Smooth Themed App</h1>
<p>This content changes based on the current theme, with smooth transitions!</p>
<ThemedButton onClick={toggleTheme}>
Switch Theme
</ThemedButton>
</div>
);
};
export default MainContent;
Now when you switch themes, the colors will smoothly transition. It’s like watching your app do a quick costume change on stage!
But what about more complex theming? Maybe we want to change not just colors, but fonts and spacing too. We can expand our theme object to include these:
const themes = {
light: {
colors: {
foreground: '#000000',
background: '#ffffff',
primary: '#0066cc',
secondary: '#ff9900',
},
fonts: {
body: 'Arial, sans-serif',
heading: 'Georgia, serif',
},
spacing: {
small: '8px',
medium: '16px',
large: '24px',
},
},
// ... other themes
};
Now we can use these in our components:
import React from 'react';
import { useTheme } from './ThemeContext';
import ThemedButton from './ThemedButton';
const MainContent = () => {
const { theme, toggleTheme } = useTheme();
return (
<div style={{
backgroundColor: theme.colors.background,
color: theme.colors.foreground,
fontFamily: theme.fonts.body,
minHeight: '100vh',
padding: theme.spacing.large,
transition: 'all 0.3s ease',
}}>
<h1 style={{ fontFamily: theme.fonts.heading, color: theme.colors.primary
