优先 CSS 表

Question

我正在用 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>

Answer 1

我认为一个好的方法是为页面设置两个样式表。一种用于深色模式，一种用于浅色模式。

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

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

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

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

这是我的页面在 light 模式下的 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