Есть ли способ изменить тему с помощью scss

Question

Я хочу сменить тему, когда динамически использует кнопку «Сменить тему».

Когда пользователи нажимают на флажок (флажок установлен)

эта прокомментированная тема должна быть применена

/** 
  $theme1-background:white;
  $theme1-font-color:black;
  $theme1-btn-primary:rgba(243,241,0,0.1);
  $theme1-btn-secondary:#2ab1e4;
**/

в противном случае следует применять значение по умолчанию

Я не знаю, как это сделать, но довольно часто видел эту функцию

Вот полный код: https://codepen.io/eabangalore/pen/XPqoBK

$theme1-background:rgba(0,0,0,0.8);
$theme1-font-color:white;
$theme1-btn-primary:green;
$theme1-btn-secondary:orange;

//below setting has to be applied based on theme 2

/** 
  $theme1-background:white;
  $theme1-font-color:black;
  $theme1-btn-primary:rgba(243,241,0,0.1);
  $theme1-btn-secondary:#2ab1e4;
**/

.main{
  margin-top:34px;
  background:$theme1-background;
  border:1px solid orangered;
  width:90%;
  color:$theme1-font-color;
  .btn-primary{
    background:$theme1-btn-primary;
    color:$theme1-font-color;
  }
 .btn-secondary{
    background:$theme1-btn-secondary;
    color:$theme1-font-color;
  }
}

<label>change theme:<input type="checkbox"></label>

<div class="main">
  <button class="btn-primary">button primary</button>
  <button class="btn-secondary">button secondary</button>
  
  <p>text color   ------>>>  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure delectus officiis ea in deserunt blanditiis at, ratione recusandae asperiores pariatur perspiciatis voluptate accusantium aperiam, harum accusamus quis veritatis quisquam aliquid.</p>
</div>

Answer 1

Вы можете легко перекомпилировать всю страницу динамически, выполнив две вещи:

Сначала создайте дубликат таблицы стилей и добавьте селектор класса тела, например body.other-theme, в начало каждого селектора, который вы хотите изменить. Таким образом, ваши две таблицы стилей могут выглядеть так:

/* main-theme.css */
#content {
  background: white;
}

/* other-theme.css */
body.other-theme #content {
  background: black;
}

Затем, когда пользователь установит флажок, просто добавьте класс other-theme в тело документа. Это вызовет отображение всех стилей других тем.

В каждой таблице стилей вы можете установить цвета темы и другие переменные, которые будут характерны для этой темы.