CSS Dark Mode
https://kevq.uk/automatic-dark-mode/
https://kevq.uk/how-to-add-css-dark-mode-to-a-website/
css variables
:root {
--accent: #226997;
--main: #333;
--light: #666;
--lighter: #f3f3f3;
--border: #e6e6e6;
--bg: #ffffff;
}
/* dark mode */
:root {
--accent: #3493d1;
--main: #f3f3f3;
--light: #ececec;
--lighter: #666;
--border: #e6e6e6;
--bg: #333333;
}
css & dark theme
demo
https://create-react-app.dev/docs/getting-started/#creating-an-app
prefers-color-scheme
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
.day {
background: #eee; color: black;
}
.night {
background: #333; color: white;
}
@media (prefers-color-scheme: dark) {
.day.dark-scheme {
background: #333; color: white;
}
.night.dark-scheme {
background: black; color: #ddd;
}
}
@media (prefers-color-scheme: light) {
.day.light-scheme {
background: white; color: #555;
}
.night.light-scheme {
background: #eee; color: black;
}
}
.day, .night {
display: inline-block;
padding: 1em;
7em;
height: 2em;
vertical-align: middle;
}
https://caniuse.com/#search=prefers-color-scheme
https://davidwalsh.name/prefers-color-scheme
https://web.dev/prefers-color-scheme/
https://codepen.io/xgqfrms/pen/RwPyQpB
https://dev.to/rafi993/apply-dark-theme-to-your-site-using-prefers-color-scheme-1k4h
https://github.com/csstools/css-prefers-color-scheme
https://www.cnblogs.com/xgqfrms/p/11044246.html
https://www.cnblogs.com/xgqfrms/protected/p/11165136.html
html customize element & dark theme
https://codepen.io/xgqfrms/pen/eYJBBVB
js toggle theme
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！