如何克服CSS偏爱颜色方案设置 [英] How to over ride css prefers-color-scheme setting
问题描述
我正在实现暗模式，因为macOS，Windows已经实现了这种模式，并且iOS有望引入本机暗模式.
I am implementing a dark mode, as macOS, Windows have already, and iOS is expected to be introducing a native dark modes.
使用以下CSS媒体规则为Safari，Chrome和Firefox提供一个本机选项:
There is a native option for Safari, Chrome, and Firefox, using the following CSS media rule:
@media (prefers-color-scheme: dark) {
body {
color:#fff;
background:#333333
}
这将自动识别设置为暗模式的系统，并应用随附的CSS规则.
This will automatically identify systems that are set to dark modes, and apply the enclosed css rules.
但是；即使用户可能将系统设置为暗模式，也可能是他们偏爱特定网站的浅色或默认主题.还有Microsoft Edge用户(还)不支持@media (prefers-color-scheme的情况.为了获得最佳的用户体验，我想确保这些用户可以在这些情况下的黑暗模式和默认模式之间切换.
However; even though users may have their system set to dark mode, it may be the case that they prefer the light or default theme of a specific website. There is also the case of Microsoft Edge users which does not (yet) support @media (prefers-color-scheme. For the best user experience, I want to ensure that these users can toggle between dark and default modes for those cases.
是否有一种可以使用HTML5或JavaScript执行的方法?我会包含尝试过的代码，但是无论如何我都找不到任何信息！
Is there a method that this can be performed, possibly with HTML5 or JavaScript? I'd include the code I have tried, but I haven't been able to find any information on implementing this whatsoever!
推荐答案
我已经确定了适当的解决方案，如下所示:
I have determined an appropriate solution, it is as follows:
CSS将使用变量和主题:
CSS will use variables and themes:
// 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 variables are then called where necessary, for example:
//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);
}
JavaScript用于标识用户设置的主题，或者是否已覆盖其操作系统主题，以及在两者之间进行切换，这在html
JavaScript is used to identify which theme the user has set, or if they have over-ridden their OS theme, as well as to toggle between the two, this is included in the header prior to the output of the html <body>...</body>:
//determines if the user has a set theme
function detectColorScheme(){
var theme="light"; //default to light
//local storage is used to override OS theme settings
if(localStorage.getItem("theme")){
if(localStorage.getItem("theme") == "dark"){
var theme = "dark";
}
} else if(!window.matchMedia) {
//matchMedia method not supported
return false;
} else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
//OS theme setting detected as dark
var theme = "dark";
}
//dark theme preferred, set document with a `data-theme` attribute
if (theme=="dark") {
document.documentElement.setAttribute("data-theme", "dark");
}
}
detectColorScheme();
此javascript用于在设置之间切换，它不需要包含在页面标题中，但是可以包含在任何地方
This javascript is used to toggle between the settings, it does not need to be included in the header of the page, but can be included wherever
//identify the toggle switch HTML element
const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');
//function that changes the theme, and sets a localStorage variable to track the theme between page loads
function switchTheme(e) {
if (e.target.checked) {
localStorage.setItem('theme', 'dark');
document.documentElement.setAttribute('data-theme', 'dark');
toggleSwitch.checked = true;
} else {
localStorage.setItem('theme', 'light');
document.documentElement.setAttribute('data-theme', 'light');
toggleSwitch.checked = false;
}
}
//listener for changing themes
toggleSwitch.addEventListener('change', switchTheme, false);
//pre-check the dark-theme checkbox if dark-theme is set
if (document.documentElement.getAttribute("data-theme") == "dark"){
toggleSwitch.checked = true;
}
最后，HTML复选框可在主题之间切换:
finally, the HTML checkbox to toggle between themes:
<label id="theme-switch" class="theme-switch" for="checkbox_theme">
<input type="checkbox" id="checkbox_theme">
</label>
通过使用CSS变量和JavaScript，我们可以自动确定用户主题，应用主题并允许用户也改写它. [截至撰写本文时(2019/06/10)，仅Firefox和Safari支持自动主题检测]
Through the use of CSS variables and JavaScript, we can automatically determine the users theme, apply it, and allow the user to over-ride it as well. [As of the current time of writing this (2019/06/10), only Firefox and Safari support the automatic theme detection]
这篇关于如何克服CSS偏爱颜色方案设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
