Scss 主题取决于具有预定义变量的主体类 [英] Scss theming depends on body class with predefined variables

问题描述

我想要一个复选框，当您单击它时，将类添加到正文标签，例如深色主题"或浅色主题".问题是在我为所有元素设置样式后出现了主题要求，现在改变每个元素的样式是自杀.请帮忙

I want to have checkbox which, when you clicked it add class to body tag for example like 'dark-theme' or 'light theme'. The problem is that theming requirment is appeared after i styled all elements, and it would be suicide to change each element styles now. Please help

$color-white: #ffffff;
$color-black: #000000;

// Dark

$color-green: #328332;
$color-red: #a23232;

$color-background-dark: #212734;
$color-backgound-light: #31394c;

$color-text: rgba(255, 255, 255, 0.3);
$color-text-darker: #B8BCC6;
$color-text-active: #ffffff;

$color-button-primary: #0078ff;
$color-button-primary-text: #ffffff;

$color-button-secondary: rgba(255, 255, 255, 0.3);
$color-button-secondary-text: rgba(255, 255, 255, 0.3);
$color-button-secondary-active: #B8BCC6;
$color-button-secondary-text-active: #B8BCC6;

$color-line: #3d465e;
$color-line-darker: rgba(255, 255, 255, 0.3);

$color-table-dark-row: #2C3345;


// Light

$color-green: #006400;
$color-red: #8b0000;

$color-background-dark: #f5f5f5;
$color-backgound-light: #ffffff;

$color-text: #b3b3b3;
$color-text-darker: #808080;
$color-text-active: #000000;

$color-button-primary: #0078ff;
$color-button-primary-text: #ffffff;

$color-button-secondary: #b3b3b3;
$color-button-secondary-text: #b3b3b3;
$color-button-secondary-active: #808080;
$color-button-secondary-text-active: #808080;

$color-line: #f5f5f5;
$color-line-darker: #b3b3b3;

$color-table-dark-row: #FAFAFA;

推荐答案

您可以为每个具有不同颜色(和其他可编辑内容)的主题编译两次 css 文件.

You can compile css files twice for each theme with different colors (and other editable things).

包含所有light"变量的文件light-theme.scss:

File with all "light" variables light-theme.scss:

$color: black;
$background: white;

包含所有暗"变量的文件 dark.scss:

File with all "dark" variables dark.scss:

$color: white;
$background: black;

包含所有样式的文件 _style.scss:

File that contains all you styles _style.scss:

@import '_button.scss'; // If you are importing something
@import '_header.scss';

element{
  color: $color;
  background: $background;
}

以及生成所有主题的文件themes.scss:

And file where all themes are generated themes.scss:

.light {
  @import 'light-theme';
  @import '_styles';
}

.dark {
  @import 'dark-theme';
  @import '_styles';
}

CSS 输出:

.dark element {
  color: white;
  background: black;
}

.light element {
  color: black;
  background: gray;
}

这篇关于Scss 主题取决于具有预定义变量的主体类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！