Search code examples
javascriptreactjsreduxthemesreact-props

React color background on event

I use the npm package use-dark-mode as the name implies, it makes it possible to change the theme to light or dark, The problem is that I want to change the background-color of some blocks when changing the theme to dark, and vice versa, return the old color when I switch to light mode, for example, my block background is orange, I switch to dark mode, it turns red and when I switch to light mode, it returns old orange

App.js

import React from 'react';
import './App.css'
import Content from "./components/Content/Content";
import Dark_Mode from "./components/Dark Mode/Dark_Mode";

const App = () => {
  return(
      <div>
          <Dark_Mode />
          <Content />
      </div>
  );
};

export default App;

Content.jsx

import React from 'react';
import './style.css'

const Content = () => {
    return (
        <>
            <div className={"content_container"}>
                <h3>Hello from React.JS</h3>
            </div>
        </>
    );
};

export default Content;

Dark_Mode.jsx

import React from 'react';
import useDarkMode from 'use-dark-mode';

const DarkModeToggle = () => {
    const darkMode = useDarkMode(false);

    return (
        <div>
            <button type="button" onClick={darkMode.disable}>
                ☀
            </button>
            <button type="button" onClick={darkMode.enable}>
                ☾
            </button>
        </div>
    );
};

export default DarkModeToggle;

style.css

@import '../../App.css';

.content_container {
    margin: auto;
    width: 500px;
    max-width: 100%;
    background: orange;
}

.content_container h3 {
    text-align: center;
}

App.css

body.light-mode {
  background-color: #fff;
  color: #333;
  transition: background-color 0.3s ease;
}
body.dark-mode {
  background-color: #1a1919;
  color: #999;
}

:root {
  --color-orange: orange;
}

As you can see, I have App.css when the theme changes, it changes the background of the <body>, I still have Content.jsx when switching theme I want to change the background of the block with the className content_container which is connected to style.css, In addition, you may have noticed that I tried to use global styles, but I failed. Finally, I would like to show a screenshot on the site for a clear understanding of everything.

enter image description here

Solution

  • You could give the root element a class on theme change and use css variables in root, but be class specific:

    Dark_mode.jsx:

    function setTheme(themeName) {
    document.documentElement.classList.remove('light-theme', 'dark-theme');
    
    document.documentElement.classList.add(themeName);
}

const DarkModeToggle = () => {
    const activateDarkTheme = () => setTheme('dark-theme');
    const activateLightTheme = () => setTheme('light-theme');

    return (
        <div>
            <button type="button" onClick={activateDarkTheme}>
                ☀
            </button>
            <button type="button" onClick={activateLightTheme}>
                ☾
            </button>
        </div>
    );
};

    Styles:

    :root, // this is used for the default theme, will be overwritten by other styles with classes because of specifity
:root.dark-theme {
    --color-bg: #000;
}

:root.light-theme {
    --color-bg: #fff;
}