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

Question

你们以前帮过我。多亏了你，两个开关现在都可以使用了。

现在我还有一个问题：

是否可以在点击一个开关（无论是哪个）时同时 activate/deactivate 另一个？以便状态始终相同？

假设可行：如果我为一个切换设置“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 今天并不真正可用。

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

full JS code (with window.matchMedia and 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() )
    });
  })()

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

Toggle one button - toggle the other one as well

javascript

toggle