优先级CSS表

Question

我正在用ruby on rails编写明暗模式，想知道如何a(在两个样式表之间切换，但更重要的是b(如何将一个设置为默认样式表。我知道使用！重要的将使用一个的部分而不是另一个，但我对整体感到困惑。

<script type="text/javascript">
function swapStyleSheet(pagesheet, headsheet){
document.getElementById('pagestyle').setAttribute('href',pagesheet);
document.getElementById('headstyle').setAttribute('href',headsheet);
}
</script>
<button type="button" ><!--onClick="swapStyleSheet('css/show/application_dark.css','css/show/application.css')">-->
<link rel="stylesheet" href="application_dark.css">
Dark Theme
</button>
<button type="button" ><!--onClick="swapStyleSheet('css/show/application.css','css/show/application_dark.css')">-->
<link rel="stylesheet" href="application.css">
Light Theme
</button>

Answer 1

我认为一个好的方法是为页面提供两个样式表。一个用于暗模式，一个用于亮模式。

然后，使用一些带有事件侦听器的按钮来更改页面上父元素的类。

初始样式将是您在模板中指定的任何类。

这就是我如何在我的个人网站上使用ROR实现这一完全相同的功能。

加载页面时，两个css文件都存在，但javascript只是切换出父元素上的选择器。

这是我的页面在灯光模式下的scss文件

#taylor-light {
background: $taylor-gray;
.bigger, .smaller {
fill: $taylor-red;
stroke: $taylor-red;
}
.taylor-dark-mode-index {
background-color: $taylor-blue;
&:hover {
cursor: pointer;
.moon {
fill: $taylor-red;
}
}
.sun {
display: none;
}

.moon {
fill: $taylor-gray;
}
}
.red-text {
color: $taylor-red;
}
.blue-text {
color: $taylor-blue;
}
.form-label {
display: none;
}
...

这是我的页面在黑暗模式下的scss文件

#taylor {
background: $taylor-black;
.bigger, .smaller {
fill: $taylor-red;
stroke: $taylor-red;
}
&::-webkit-scrollbar{
background-color: $taylor-black;
}
.taylor-dark-mode-index {
background-color: $taylor-gray;
&:hover {
cursor: pointer;
.sun {
fill: $taylor-red;
}
}
.sun {
fill: $taylor-blue;
}

.moon {
display: none;
}
}
...

我的javascript类如下所示。css已经存在，所以我所要做的就是在单击暗模式按钮时更改父元素的id

document.addEventListener('click', function (event) {
// If the clicked element doesn't have the right selector, bail
if(!event.target.matches('.taylor-dark-mode-index')) return
console.log('clacky clack')
if(event.target.dataset.toggle == 'dark'){
event.target.dataset.toggle = 'light'
document.querySelector('#taylor').id = 'taylor-light'
} else if(event.target.dataset.toggle == 'light') {
event.target.dataset.toggle = 'dark'
document.querySelector('#taylor-light').id = 'taylor'
}

}, false);

然后，我的html有一个顶级元素，用于交换样式

#taylor.template
.taylor-dark-mode-index[data-toggle="dark"]
== load_svg(name: 'moon', klass: 'moon dark-mode-toggle')
== load_svg(name: 'sun', klass: 'sun dark-mode-toggle')
main
header
h1.noselect
strong
| Taylor Coon 
br
span.red-text
| Front-end 
| Software Engineer
h2.noselect
span.red-text
| Ruby
| , Typescript
...

这是实际的网页，因此您可以看到结果

http://www.tacoon.me/taylor-coon