Theming with Styled-Components

Introduction:

You know that satisfying feeling when you switch an app to dark mode and it just works? Theming does that—it makes things feel personal and polished. And the good news? Adding themes to your React app is way easier than you think, thanks to styled-components. In this post, I’ll show you how to use the ThemeProvider to set up light and dark themes so your app looks great no matter what your users prefer.

Why Theming Matters:

Theming is more than just making things look nice. For some people, dark mode helps with eye strain, while others love the clean, bright feel of light mode. It’s all about giving your users options and showing you care about their experience. Plus, let’s be real—apps with themes just feel more modern and professional.

Setting Up Styled-Components for Theming:

Install styled-components:

npm install styled-components



Create a Theme Object:

Define light and dark themes in a theme.js file:

export const lightTheme = {

    background: '#ffffff',

    color: '#000000',

};



export const darkTheme = {

    background: '#000000',

    color: '#ffffff',

};

Set Up the ThemeProvider:

Wrap your application in the ThemeProvider and pass the theme as a prop:

import { ThemeProvider } from 'styled-components';

import { lightTheme, darkTheme } from './theme';



function App() {

    const [isDarkMode, setIsDarkMode] = useState(false);



    return (

        <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>

            <button onClick={() => setIsDarkMode(!isDarkMode)}>

                Toggle Theme

            </button>

            <YourAppComponents />

        </ThemeProvider>

    );

}

Access Theme Properties:

Use the props.theme object in your styled-components:

import styled from 'styled-components';



const Container = styled.div`

    background-color: ${(props) => props.theme.background};

    color: ${(props) => props.theme.color};

`;

Conclusion:

And that’s it—your app now has themes! With styled-components and ThemeProvider, you can quickly set up dynamic theming without breaking a sweat. It’s a small change that makes a big difference to your users. So go ahead, try it out, and give your app that extra bit of love. Who doesn’t like a good dark mode, anyway?

Resources:

https://mui.com/material-ui/customization/theming/