切换一个按钮 - 切换另一个按钮

Question

你们以前帮过我。 多亏了你，两个开关现在都在工作。

现在我还有一个问题：

是否有可能在单击切换开关（无论是哪个）时同时激活/停用另一个？ 以便状态始终相同？

假设可行：如果我为一个切换设置“input type="checkbox" checked"会发生什么？

const btns = document.querySelectorAll(".btn-toggle-darkmode");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
console.log(currentTheme)
  document.body.classList.toggle("dark-theme");
} else if (currentTheme == "light") {
  document.body.classList.toggle("light-theme");
}

btns.forEach(function(btn){
btn.addEventListener("click", function() {
  if (prefersDarkScheme.matches) {
    document.body.classList.toggle("light-theme");
    var theme = document.body.classList.contains("light-theme") ?
      "light" :
      "dark";
  } else {
    document.body.classList.toggle("dark-theme");
    var theme = document.body.classList.contains("dark-theme") ?
      "light" :
      "dark";
  }
  localStorage.setItem("theme", theme);
});
})

谢谢你！

Answer 1

您不必要地使代码过于复杂。 但在你的辩护中，暗模式的管理本身就是一个难题。 我对这个问题做了几次测试和研究，我目前的结论是代码window.matchMedia ('(prefers-color-scheme: dark)'). Matches window.matchMedia ('(prefers-color-scheme: dark)'). Matches在今天并不是真的有用。

我在 FireFox 或 Chrome 上激活了黑暗模式，这两个浏览器都没有被检测到，css 和 javascript 都没有检测到。除了调试模式，firefox 允许您更改此标志，但这仅在您使用页面时有效.

关于 Bugzilla 的讨论一直在进行，在 FireFox 和 Chrome 的版本上有不同的更改实现，我觉得使用主题（通过扩展）和管理这个简单标志之间存在某种混淆正如 css 中想象的那样 - js。

这部分我还是留下了JS代码，我在CSS删除了它，因为它什么都不做。 一切都取决于在<body>标签上添加（或不添加）class。

我还清理了你的 CSS，并重做了你的复选框按钮，这些按钮也是无用的复杂

基本代码（没有 window.matchMedia 或 localStorage ）：

 (function() // IIFE Closure { const darkClass = 'dark-theme', darkModeBtns = document.querySelectorAll('label.btn-dark-mode > input[type="checkbox"]'), syncBnts = flag => darkModeBtns.forEach(bt=>bt.checked = flag); let darkMode = false // default; document.body.classList.toggle(darkClass, darkMode ) // init page // toggle dark mode via checkboxes darkModeBtns.forEach( bt=> { bt.checked = darkMode // init page bt.oninput =_=> { document.body.classList.toggle(darkClass, bt.checked ) syncBnts(bt.checked ) } }) })()

 :root { --background: #f7f7f8; --main: #ffffff; --border: #e0e4e7; --text: #244357; --link: #0f6c9e; --button-hover: #e8ebf0; } body { background-color: var(--background); padding-top: 15px; padding-bottom: 15px; color: var(--text); font-family: sans-serif; line-height: 1.75; } body.dark-theme { --background: #18191a; --main: #242526; --border: #30343a; --text: #909090; --link: #ffffffd7; --button-hover: #26292e; } label.btn-dark-mode > input { display: none; } label.btn-dark-mode { display: inline-block; position: relative; width: 40px; height: 20px; margin: 0 auto; border-radius: 40px; border: 1px solid var(--border); overflow: hiden; cursor: pointer; } label.btn-dark-mode::before, label.btn-dark-mode::after { position: absolute; display: block; border-radius: 50%; content: ' '; overflow: hiden; } label.btn-dark-mode::before { top: 3px; left: 2px; width: 14px; height: 14px; background-color: var(--link); transition: 0.5s ease transform, 0.2s ease background-color; } body.dark-theme label.btn-dark-mode::before { transform: translateX(22px); } label.btn-dark-mode::after { top: -8px; left: 0px; width: 15px; height: 15px; background-color: var(--background); transition: transform ease 0.5s; transform: scale(0); } body.dark-theme label.btn-dark-mode::after { transform: scale(1) translate(18px,8px); }

 <label class="btn-dark-mode"><input type="checkbox"></label> <label class="btn-dark-mode"><input type="checkbox"></label> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. </p> <label class="btn-dark-mode"><input type="checkbox"></label>

完整的 JS 代码（带有 window.matchMedia 和 localStorage ）：

(function() // IIFE Closure
  {
  const
    darkClass    = 'dark-theme' 
  , darkModeBtns = document.querySelectorAll('label.btn-dark-mode > input[type="checkbox"]')
  , syncBnts     = flag => darkModeBtns.forEach(bt=>bt.checked = flag)
    ;
  let darkMode = !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
    ;
  darkMode = JSON.parse( localStorage.getItem(darkClass) || darkMode.toString() )

  document.body.classList.toggle(darkClass, darkMode ) // init page

  // toggle dark mode via checkboxes
  darkModeBtns.forEach(bt=>
    {
    bt.checked = darkMode // init page
    bt.oninput =_=>
      {
      document.body.classList.toggle(darkClass, bt.checked )
      syncBnts(bt.checked )
      localStorage.setItem(darkClass, bt.checked.toString() )
      }
    })

  // toggle dark mode via browser preference
  window
  .matchMedia('(prefers-color-scheme: dark)')
  .addListener(e =>
    {
    syncBnts( e.matches )
    document.body.classList.toggle(darkClass, e.matches )
    localStorage.setItem(darkClass, e.matches.toString() )
    });
  })()

切换一个按钮 - 切换另一个按钮

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-08-21 23:30:09

切换一个按钮 - 切换另一个按钮

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-08-21 23:30:09

解决方案1
2 已采纳 2021-08-21 23:30:09