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

如何解决选中复选框时如何更改配色方案？

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

我写了这个：

<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;
}

它可以根据 prefers-color-scheme 成功选择默认模式，但我无法使用复选框进行切换。

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

感谢您的帮助

解决方法

您需要重新组织 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>

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

如何解决选中复选框时如何更改配色方案？

解决方法

相关推荐