how to disabled prefers-color-scheme in js & dark theme

how to disabled prefers-color-scheme in js dark theme document.documentElement.setAttribute data-user-color-scheme

how to disabled prefers-color-scheme in js

dark theme

​​https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme​​

​​https://web.dev/prefers-color-scheme/#supporting-dark-mode​​

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('???? Dark mode is supported');
}

​​https://gosink.in/javascript-css-toggle-dark-light-theme-based-on-your-users-preferred-scheme/​​

data-user-color-scheme

const applySetting = passedSetting => {
  let currentSetting = passedSetting || localStorage.getItem(STORAGE_KEY);

  if (currentSetting) {
    document.documentElement.setAttribute('data-user-color-scheme', currentSetting);
    setButtonLabelAndStatus(currentSetting);
  } else {
    setButtonLabelAndStatus(getCSSCustomProp(COLOR_MODE_KEY));
  }
};

​​https://codepen.io/xgqfrms/pen/qBbdbbJ?editors=1010​​

See the Pen <a href="https://codepen.io/xgqfrms/pen/qBbdbbJ">user controlled dark mode &amp; them toggole</a> by xgqfrms (<a href="https://codepen.io/xgqfrms">@xgqfrms</a>) on <a href="https://codepen.io">CodePen</a>.

document.documentElement.setAttribute

​​https://stackoverflow.com/questions/56300132/how-to-over-ride-css-prefers-color-scheme-setting​​

// root/default variables
:root {
--font-color: #000;
--link-color:#1C75B9;
--link-white-color:#fff;
--bg-color: rgb(243,243,243);
}
//dark theme
[data-theme="dark"] {
--font-color: #c1bfbd;
--link-color:#0a86da;
--link-white-color:#c1bfbd;
--bg-color: #333;
}

//the redundancy is for backwards compatibility with browsers that do not support CSS variables.
body
{
color:#000;
color:var(--font-color);
background:rgb(243,243,243);
background:var(--bg-color);
}

document.documentElement.setAttribute('data-theme', 'light');

html customize element & dark theme

​​https://codepen.io/xgqfrms/pen/eYJBBVB​​

See the Pen <a href="https://codepen.io/xgqfrms/pen/eYJBBVB">html customize element &amp; dark theme</a> by xgqfrms (<a href="https://codepen.io/xgqfrms">@xgqfrms</a>) on <a href="https://codepen.io">CodePen</a>.

​​https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn​​

js toggle theme

---

©xgqfrms 2012-2020

---

xgqfrms