Реагировать на динамические темы

Question

У меня есть приложение React 16, и я хочу, чтобы пользователь мог изменить тему для всего приложения (включая все маршруты), нажав кнопку.

Так, например, у меня может быть две темы в SCSS:

.theme-1 {
    background-color: $bg-color-1;
    color: $color-1;
}
.theme-2 {
    background-color: $bg-color-2;
    color: $color-2;
}

Тогда у меня будет кнопка:

<Button onClick={ this.changeTheme() }

Можно ли это сделать? В частности, я хочу выяснить эти две части:

1. Как установить тему для всех компонентов, которые должны использовать различные background-color и color.
2. Логика функции changeTheme(). Как именно это могло бы вызвать повторную визуализацию на всех задействованных компонентах.

Спасибо!

Answer 1

Лучший способ сделать это - использовать переменные css .

Вам необходимо указать свою тему, используя переменные css, и при некоторых действиях пользователя добавить дополнительные css на ваш сайт.

1. Создание одной темы, как вы упомянули выше

   --color: blue;
   --bg-color: red;
   .theme {
       background-color: var(--bg-color);
       color: (--color);
   }
   

2. Добавить дополнительные стили прямо внутри вашего компонента

   {this.state.useTheme && <style type="text/css">
       :root {
           --color: blue;
           --bg-color: red;
       }   
   </style>}
   

3. Смена флага при клике пользователя

   <div onClick={this.setState({useTheme: true})}> Apply theme </div>
   

или другой вариант

2. Создайте дополнительный theme.css файл, в котором вы указываете различные переменные

   --bg-color: yellow;
   --color: green;
   

3. прикрепить его к какому-либо действию пользователя. Исходный код от здесь

   <div onClick={() => {
       var head  = document.getElementsByTagName('head')[0];
       var link  = document.createElement('link');
       link.id   = cssId;
       link.rel  = 'stylesheet';
       link.type = 'text/css';
       link.href = 'http://your-website.com/path-to-css-file/theme.css';
       link.media = 'all';
       head.appendChild(link);
   }}> 
       Change theme
   </div>
   

Делая так, вы избежите большого количества дублирования кода. Потому что вам не нужно создавать несколько тем. И вам нужно всего лишь добавить небольшой дополнительный CSS при изменении, чтобы вы могли создавать множество тем или даже позволить пользователю настраивать их.