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

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

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

window.matchMedia

window.matchMedia('(prefers-color-scheme)');
// MediaQueryList {media: '(prefers-color-scheme)', matches: true, onchange: null}
window.matchMedia('(prefers-color-scheme)').matches;
// true ✅
window.matchMedia('(prefers-color-scheme)').media;
// '(prefers-color-scheme)'

window.matchMedia('prefers-color-scheme');
// MediaQueryList {media: 'prefers-color-scheme', matches: false, onchange: null}
window.matchMedia('prefers-color-scheme').matches;
// false ❌
window.matchMedia('prefers-color-scheme').media;
// 'prefers-color-scheme'

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

demo

prefers-color-scheme

@media(prefers-color-scheme: dark) {}

:root {
    --color-core-primary: #3740ff;
    --color-core-primary-glare: #9da2ff;
    --color-core-primary-bright: #f8faff;
    --color-core-primary-dim: #2c333f;
}

:root {
    --color-mode: var(--color-light);
    --color-core-text: var(--color-shades-dark);
    --color-core-bg: var(--color-shades-light-bright);
    --color-dark-bg: var(--color-shades-gray-glare);
    --color-dark-text: var(--color-shades-dark);
    --color-mid-text: var(--color-shades-gray);
    --color-mid-bg: var(--color-shades-light);
}

[data-user-theme=dark] {
    --color-mode: var(--color-dark);
    --color-core-text: var(--color-shades-light);
    --color-core-bg: var(--color-shades-dim);
    --color-dark-bg: var(--color-shades-charcoal);
    --color-dark-text: var(--color-shades-dark);
    --color-mid-text: var(--color-shades-gray-glare);
    --color-mid-bg: var(--color-shades-charcoal);
}

@media(prefers-color-scheme: dark) {
    :root {
        --color-dark-text: var(--color-shades-dark);
        --color-mid-text: var(--color-shades-gray-glare);
        --color-mid-bg: var(--color-shades-charcoal);
    }
}

[data-user-theme=light] {
    --color-mode: var(--color-light);
    --color-core-text: var(--color-shades-dark);
    --color-core-bg: var(--color-shades-light-bright);
    --color-dark-bg: var(--color-shades-gray-glare);
    --color-dark-text: var(--color-shades-dark);
    --color-mid-text: var(--color-shades-gray);
    --color-mid-bg: var(--color-shades-light);
}

https://web.dev/http-cache/

refs

https://www.cnblogs.com/xgqfrms/tag/prefers-color-scheme/

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---