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

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

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

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

js toggle theme

---

©xgqfrms 2012-2020

www.cnblogs.com 發布文章使用：只允許注冊用戶才可以訪問！

---