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选择器是一种更好的方法-但是这种方法对我有用，所以我很高兴。尚不确定此解决方案在复杂的应用程序中是否可靠。

使用sass切换自定义引导主题

2 个答案: