Блог

Главная - Вопросы по программированию - Реагирует цветным фоном на событие

Реагирует цветным фоном на событие

#javascript #reactjs #redux #themes #react-props

#javascript #reactjs #сокращение #темы #реагирует-реквизит

Вопрос:

Я использую пакет npm use-dark-mode, как следует из названия, это позволяет менять тему на светлую или темную, проблема в том, что я хочу изменить цвет фона некоторых блоков при смене темы на темный и наоборот, вернуть старый цвет, когда япереключитесь в светлый режим, например, мой фон блока оранжевый, я переключаюсь в темный режим, он становится красным, а когда я переключаюсь в светлый режим, он возвращает старый оранжевый

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;
}

Как вы можете видеть, у меня есть App.css, когда тема меняется, она меняет фон <body> , у меня все еще есть Content.jsx при переключении темы я хочу изменить фон блока с помощью content_container className , который подключен к style.css, Кроме того, вы, возможно, заметили, что япытался использовать глобальные стили, но у меня не получилось. Наконец, я хотел бы показать скриншот на сайте для четкого понимания всего.

введите описание изображения здесь

Ответ №1:

Вы могли бы присвоить корневому элементу класс при изменении темы и использовать переменные css в root, но быть специфичным для класса:

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>
    );
};

Стили:

 :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;
}

Комментарии:

1. Извините, я не очень хорошо понял, где мне нужно применить функцию switchTheme?

2. нажмите на кнопку… Я отредактирую код, чтобы уточнить

3. Я пытался применить ваш вариант, но у меня не получилось, я дам вам ссылку на проект на codesandbox, вы можете видеть? codesandbox.io/s/delicate-leftpad-rjhpb

4. Я понимаю… вам придется использовать переменные. Итак, для каждого цвета / стиля, который вы хотите изменить, изменив тему, вам нужно будет создать переменную и в стилях компонента сказать: someStyleProperty: var(--theNameOfTheVariableSetInRoot)

5. Итак, для моего примера вам нужно будет поместить это в стили тела: background-color: var(--color-bg)

Ответ №2:

Я нашел более удобное решение! хотя это моя вина, я был немного невнимателен и не изучал документацию этого пакета, который я использую в своем проекте, вот простое решение

Content.jsx

 import './Content.css'
import useDarkMode from 'use-dark-mode';

export default function Content () {

    const { value } = useDarkMode(false);

    return <div>
        <div className={value ? 'Dark_Mode' : 'Light_Mode'}>
            <h3>Hello from React.JS</h3>
        </div>
    </div>
}

Content.css

 .Dark_Mode {
    margin: auto;
    max-width: 100%;
    width: 400px;
    height: 275px;
    background-color: orange;
  }
  
  .Light_Mode {
    margin: auto;
    max-width: 100%;
    width: 400px;
    height: 275px;
    background-color: rgb(24, 106, 199);
  }