How to dynamically update SCSS variables using ReactJS?

Namachila October 13, 2025

0 1 2 minutes read

We can dynamically update SCSS variables using ReactJS with the help of a project by achieving theme switching of the card component between light and dark theme.

Prerequisite:

Basic knowledge of npm & create-react-app command.
Basic knowledge of HTML/CSS.
Basic Knowledge of react components & ES6.

Basic Setup: You will start a new project using create-react-app so open your terminal and type:

npx create-react-app react-scss

Now go to your react-scss folder by typing the given command in the terminal:

cd react-scss

Required module: Install the dependencies required in this project by typing the given command in the terminal.

$ npm install node-sass

For developers using yarn:

$ yarn add node-sass

Project Structure: The file structure in the project will look like this.

Folder structure

Approach:

We are going to create a card component using JSX and style it using SCSS.
After structuring and styling the card component, we are going to make use of react useState hook to manage the state of the ‘darkTheme’ as per the user.
There will be a button with onClick event listener which will set the state of ‘darkTheme’ as false if it previously was true and vice versa.
We are going to use useEffect react hook that will fire up every time there is a change in the state of ‘darkTheme’.
useEffect will cause a side effect and change the value of SCSS variables : $background-color and $text-color.

Example:

App.js

Javascript

import React, { useState, useEffect } from "react";
// Import scss file
//import './App.scss';
 
export default function App() {
    const [darkTheme, setDarkTheme] = useState(false);
 
    // React useEffect hook that will fire up
    // when "darkTheme" changes
    useEffect(() => {
        // Accessing scss variable "--background-color"
        // and "--text-color" using plain JavaScript
        // and changing the same according to the state of "darkTheme"
        const root = document.documentElement;
        root?.style.setProperty(
            "--background-color",
            darkTheme ? "#262833" : "#fff"
        );
        root?.style.setProperty("--text-color", darkTheme ? "#fff" : "#262833");
    }, [darkTheme]);
 
    const URL =
        "https://media.zambiatek.com/" +
        "wp-content/uploads/20190918121833/zambiatek-62.png";
 
    return (
        <>
            <div className="card">
                <img className="image" src={URL} alt="zambiatek" />
                <div className="cardBody">
                    <h2>Dynamically changing scss variable using react </h2>
 
                    <p>
                        {" "}
                        According to Wikipedia sass is a preprocessor
                        scripting language that is interpreted or compiled
                        into Cascading Style Sheets (CSS).
                    </p>
 
                    <button onClick={() => setDarkTheme(!darkTheme)}>
                        {darkTheme ? "????" : "????"}
                    </button>
                </div>
            </div>
        </>
    );
}

App.scss

CSS

#root {
    // Scss variables which we gonna assign using
    // useState and JavaScript in reactJS
    $background-color: #fff;
    $text-color: #262833;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-template-rows: auto;
}
 
.card {
    background-color: var(--background-color);
    margin: 20px 10px;
    padding: 10px;
 
    img {
        background-color: var(--background-color);
        width: 100%;
        height: 150px;
        object-fit: scale-down;
    }
 
    .cardBody {
        h2 {
            font-size: 2rem;
            color: var(--text-color);
        }
 
        p {
            font-size: 1rem;
            color: var(--text-color);
        }
 
        button {
            font-weight: bolder;
            border-radius: 50px;
            color: var(--background-color);
            border: none;
            border-style: none;
            padding: 10px 20px;
            background-color: var(--text-color);
        }
    }
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!