选中复选框后如何更改配色方案？

Question

我正在尝试为我的网站实施深色和浅色模式。它应该基于 prefers-color-scheme 加载，并且用户应该能够在这两个模组之间切换。

我写了这个：

<div id="theme-togle">
    <input id="theme-toggle-dark" type="checkbox" />
    <span id="checkmark-dark"></span>
    <input id="theme-toggle-light" type="checkbox" />
    <span id="checkmark-light"></span>
</div>

@mixin dark-theme {
    --body-color:           #313131;
    --text-color:           #FFFFFF;
    --title-color:          #000000;
    --subtitle-color:       #808080;
    --logo-color:           #FFFFFF;
    --link-color:           #FFFFFF;
    --link-visited-color:   #FFFFFF;
    --quote-color:          #FFFFFF;
    --code-background-color:#787878;
    --text-highlight-color: #D3D3D3;
    --separator-color:      #525252;
}


@mixin light-theme {
    --body-color:           #313131;
    --text-color:           #FFFFFF;
    --title-color:          #000000;
    --subtitle-color:       #808080;
    --logo-color:           #FFFFFF;
    --link-color:           #FFFFFF;
    --link-visited-color:   #FFFFFF;
    --quote-color:          #FFFFFF;
    --code-background-color:#787878;
    --text-highlight-color: #D3D3D3;
    --separator-color:      #525252;
}

:root{
    @include light-theme;
}


#theme-toggle-dark {
    display: none;
}

@media (prefers-color-scheme: dark){
    @include dark-theme;

    #theme-toggle-light {
        display: none;
    }

    #theme-toggle-dark {
        display: block;
    }
}

@media (prefers-color-scheme: light){
    :root{
        @include light-theme;
    }

    .theme-toggle-dark {
        display: none;
    }

    .theme-toggle-light {
        display: block;
    }
}

#theme-toggle-dark:checked + :root{
    @include dark-theme;
}

#theme-toggle-light:checked + :root{
    @include light-theme;
}

它可以成功 select 基于 prefers-color-scheme 的默认模式，但我无法通过复选框切换它。

我怎样才能做到这一点？我正在寻找 javascript 免费解决方案。

感谢您的帮助

Answer 1

您需要重新组织 HTML 才能正常工作。

目前，您将复选框作为 body 元素的子节点，它位于 :root 元素内。这会导致您的选择器失败，因为您使用的是直接兄弟语法。您也将无法使用 :root。

为了使其正常工作，您的复选框需要成为 body 元素内的第一个子元素，然后您需要将选择器应用于其他所有内容。

<body>
    <input id="theme-toggle-dark" type="checkbox" />
    <span id="checkmark-dark"></span>
    <input id="theme-toggle-light" type="checkbox" />
    <span id="checkmark-light"></span>

    ...
</body>

#theme-toggle-dark:checked ~ * {
    @include dark-theme;
}

#theme-toggle-light:checked ~ * {
    @include light-theme;
}

也就是说，这并不是一个理想的解决方案，因为根据页面中的内容量，使用星号选择器重新绘制所有节点可能会比较费力。

最好将所有内容包装在一个容器元素中，并且只对其应用：

<body>
    <input id="theme-toggle-dark" type="checkbox" />
    <span id="checkmark-dark"></span>
    <input id="theme-toggle-light" type="checkbox" />
    <span id="checkmark-light"></span>

    <div id="container">
       ...
    </div>
</body>

#theme-toggle-dark:checked ~ #container {
    @include dark-theme;
}

#theme-toggle-light:checked ~ #container {
    @include light-theme;
}

此外，您可能想使用 radio 输入而不是复选框。选择两个项目是没有意义的。

或者，您可以考虑只使用一个复选框作为切换开关。这样您就不必跟踪默认的用户首选项状态（必须通过 JavaScript 完成）。

这是它可能如何工作的示例：

<body>
    <input id="theme-toggle" type="checkbox" />
    <span id="checkmark-theme"></span>

    <div id="container">
       ...
    </div>
</body>

@media (prefers-color-scheme: dark) {
   #container {
       @include dark-theme;
   }

   #theme-toggle:checked ~ #container {
       @include light-theme;
   }
}

@media (prefers-color-scheme: light) {
   #container {
       @include light-theme;
   }

   #theme-toggle:checked ~ #container {
       @include dark-theme;
   }
}

这是一个工作示例。注意：您需要巧妙地调整大小和定位，以便将所有内容排好。您可能还需要为切换标签复制一些样式。

@media (prefers-color-scheme: dark) {
   #container {
      background: black;
      color: white;
   }
   
   #toggle:checked ~ #container {
      background: white;
      color: black;
   }
}

@media (prefers-color-scheme: light) {
   #container {
      background: white;
      color: black;
   }
   
   #toggle:checked ~ #container {
      background: black;
      color: white;
   }
}

<input id="toggle" type="checkbox" />
<label for="toggle">Toggle Theme</label>
<div id="container">
  <p>Test</p>
</div>

选中复选框后如何更改配色方案？

How can I change color scheme when checkbox is checked?

html

css

color-scheme

sass

scss-mixins