如何解决优先 CSS 表
我正在用 ruby on rails 编写明暗模式,想知道如何 a) 在两个样式表之间切换,但更重要的是 b) 如何将一个设置为默认值。我知道使用 !important 会使用其中一部分而不是另一部分,但我对整体感到困惑。
<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>
解决方法
我认为一个好的方法是为页面设置两个样式表。一种用于深色模式,一种用于浅色模式。
然后,有一些带有事件侦听器的按钮,用于更改页面上父元素的类。
初始样式将是您在模板中指定的任何类。
这就是我在个人网站上使用 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
...
这是实际网页,您可以查看结果
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。