带有 sass 的可切换自定义引导主题

Question

我能够找到许多关于如何在 SASS 中制作可切换主题的不同方法我无法弄清楚如何将这种方法应用于引导程序覆盖。假设我想要有浅色和深色主题，并且两个主题都会以不同的方式覆盖引导颜色。

// Light-theme
$theme-colors: (
    "primary": #8A2F4F
);

// Dark-theme
$theme-colors: (
    "primary": #fff
);

在上面的示例中，覆盖了primary 的theme-colors。如何根据用户选择的主题有条件地设置它们？

Answer 1

嗯，

有很多方法可以做到这一点。我建议您根据 _variables.scss 文件生成多个 CSS 文件。您所要做的就是使用不同的变量文件构建新主题。你可以在我的public repo查看这个方法。

其他方法是使用 CSS 自定义变量（称为自定义属性）。你可以做这样的事情。我刚刚复制粘贴并更改了 CSS。只是提供一个想法。

在 sass 文件中，

$theme-colors: (
    "primary": var(--primary-color);
);

在其他变量文件中，

element.dark {
  --primary-color: black;
} 
element.light {
  --primary-color: white;
} 

这是我建议的两种方法。

Answer 2

这是我使用 React、Bootstrap 和 SASS 的方法：

在index.scss 文件中：

div#blue {
  @import './blue.scss';
}

div#red {
  @import './red.scss';
}

// The rest of bootstrap
// Seems to be necessary to import twice to get fonts to work
@import "node_modules/bootstrap/scss/bootstrap";

然后red.scss 我在需要的地方覆盖 Boostrap：

$theme-colors: (
        "primary": red,
);

// The rest of bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

blue.scss 类似。

最后是我的顶级 React 组件：

import './index.css'
import * as React from 'react'
import Button from 'react-bootstrap/Button'

export const Container = () => {

const [color, setColor] = useState('red');

const buttonClick = () => {
    if (color === 'red') setColor('blue')
    if (color === 'blue') setColor('red')
}

return (
        <div id={theme} >
            Switch themes...
            <Button variant="primary" onClick={buttonClick}>Button</Button>
        </div>
    )
}

按下按钮，它会从红色变为蓝色。我猜想 className 而不是 div 选择器是更好的方法 - 但这种方法对我有用，所以我很高兴。尚不确定此解决方案在复杂应用中的稳健性。