滑动继续阅读⇓
为用户提供一种可以根据自己的喜好自定义界面的方法，这是用户体验的巨大胜利。在这里，我们将为用户提供一个简单的开关，以在暗模式和亮模式之间切换，并且我们还将尝试记住他们对将来访问的偏爱。
让我们开始吧！
如果你没有自己的网站要添加此功能，请使用此演示网站进行后续操作。
查看Pen
暗/亮模式开关-第1部分 作者：Ananya Neogi (@ananyaneogi)
发布在：CodePen
添加CSS
我们将添加CSS自定义属性，也称为CSS变量，我们可以在整个文档中引用和修改它们。如果你想阅读有关自定义属性的更多信息，可以在MDN上阅读。
这是tldr；版本-
定义属性（有时称为CSS变量或级联变量）是CSS作者定义的实体，其中包含要在整个文档中重用的特定值。它们使用自定义属性符号设置(例如, –main-color: black;)，并使用var() function函数进行访问 (例如, color: var(–main-color);)
首先，我们将light或默认模式的css变量添加到：:root伪类中。它与文档树中的根元素（通常为<html>标签）匹配。我们将使用：:root，因为我们想使用全局变量。
:root {
--primary-color: #302AE6;
--secondary-color: #536390;
--font-color: #424242;
--bg-color: #fff;
--heading-color: #292922;
}其次，我们将添加黑暗模式的css变量。
[data-theme="dark"] {
--primary-color: #9A97F3;
--secondary-color: #818cab;
--font-color: #e1e1ff;
--bg-color: #161625;
--heading-color: #818cab;
}什么是[data-theme=”dark”]？这意味着我们正在引用一个名为data-theme的data属性，其值为“暗”。我们会在一段时间内找到它的使用。
然后，我们可以像下面这样在样式表中引用这些变量：
body {
background-color: var(--bg-color);
color: var(--font-color);
/*other styles*/
.....
}
h1 {
color: var(--secondary-color);
/*other styles*/
.....
}
a {
color: var(--primary-color);
/*other styles*/
.....
}添加HTML“切换开关标签”
本质上这只是一个复选框，但是我们将向样式中添加一些其他标记，例如拨动开关。我引用了该Codepen中的样式。
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
<em>启用关灯模式!</em>
</div>/*简单的css，使其样式像切换开关*/
.theme-switch-wrapper {
display: flex;
align-items: center;
em {
margin-left: 10px;
font-size: 1rem;
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display:none;
}
.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}
.slider:before {
background-color: #fff;
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
}
input:checked + .slider {
background-color: #66bb6a;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}添加JavaScript
最后一部分是添加一些JavaScript来将它们捆绑在一起。
我们有3项任务-
- 添加事件处理程序以相应地处理切换开关的“勾选/取消”事件
- 存储用户的偏好以供将来访问
- 检查网站加载时是否保存了用户首选项（如果有）
添加事件处理程序
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
}
else {
document.documentElement.setAttribute('data-theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);记住，上面我们在CSS中引用的data-theme属性是将其添加到根元素的地方。
存储用户的偏好以供将来访问
我们将使用浏览器的localStorage存储用户首选项。
让我们修改switchTheme函数-
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark'); //add this
}
else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light'); //add this
}
}检查网站加载时是否保存了用户首选项（如果有）
我们将检查是否保存了主题首选项，如果是，那么我们将相应地-
- -设置我们的data-theme属性
- -“勾选/取消”拨动开关复选框
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}就这样！请查看下面的完整演示。
查看Pen
使用 CSS 变量创建暗/光模式开关 作者：Ananya Neogi (@ananyaneogi)
发布在：CodePen
专业提示：如何确定配色方案？
建议是与原色或品牌色保持相同的光谱，并从中生成调色板。在黑暗模式下，将调色板中最暗的阴影用作背景色，将较亮的阴影用作字体颜色。我使用此颜色生成器生成调色板。
即使你最终没有使用生成的确切颜色，它仍然是一个不错的起点。甚至我最终都对最终使用的颜色进行了微调。
如果你觉得这比较折腾，下面将是一个现成的样式，可以一键贴入到代码到你的主题模板页眉和页脚文件也可实现！
只是需要调整到你当前使用的主题模板的色值！
首先将以下代码嵌入到header.php文件的head之前
<style type="text/css" id="wp-custom-css">
.screen-reader-text{display:none}.georgia_font{font-family:Microsoft YaHei,microsoft jhenghei,Helvetica Neue,Georgia,Times,Times New Roman,serif;font-size:17px}.wpp-custom.wpp-option-list-11 label{color:#15121f}.wpp-option-result{color:inherit}.poll-single:not(.inside-embed){text-align:center;border-top:2px solid #808080;margin:40px 0;padding:40px 0 0}body[data-theme],[data-theme].has-parallax-footer:not(.separate-layout) #main{color:#15121f;background-color:#fff}[data-theme] #footer-widgets{background-color:#e4e4e4}[data-theme] .covid19-card.full-data .covid19-row.first-ncrts>.covid19-col{background-color:#f0f0f0}[data-theme] .has-very-light-gray-color{color:#15121f;background-color:#f7f7f7!important}[data-theme] .sidebar-box .widget-title{color:#15121f}[data-theme] h2{color:#232323}.nosel{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.switch{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:55px;height:55px;border-radius:50%;touch-action:manipulation;position:fixed;left:40px;bottom:40px;z-index:9999}.switch__input{margin:0;padding:0;opacity:0;height:0;width:0;pointer-events:none}.switch__input,.switch__label{position:absolute;left:0;top:0}.switch__label{width:100%;height:100%;color:transparent;background-color:#42d0ff;border-radius:inherit;z-index:1;transition:background .2s}[data-theme] .switch__label{background-color:#13aff0}.switch__input:checked+.switch__label+.switch__marker{position:relative;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='30' height='30' viewBox='0 0 30 30' style=' fill:%23fff;'%3E%3Cpath d='M22,21c-6.627,0-12-5.373-12-12c0-1.95,0.475-3.785,1.3-5.412C6.485,5.148,3,9.665,3,15c0,6.627,5.373,12,12,12 c4.678,0,8.72-2.682,10.7-6.588C24.534,20.79,23.292,21,22,21z'%3E%3C/path%3E%3C/svg%3E") center center no-repeat;background-size:35px;width:35px;height:35px;z-index:2;pointer-events:none;left:0}.switch__marker{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='30' height='30' viewBox='0 0 30 30' style=' fill:%23ffee4b;'%3E%3Cpath d='M 14.984375 0.98632812 A 1.0001 1.0001 0 0 0 14 2 L 14 5 A 1.0001 1.0001 0 1 0 16 5 L 16 2 A 1.0001 1.0001 0 0 0 14.984375 0.98632812 z M 5.796875 4.7988281 A 1.0001 1.0001 0 0 0 5.1015625 6.515625 L 7.2226562 8.6367188 A 1.0001 1.0001 0 1 0 8.6367188 7.2226562 L 6.515625 5.1015625 A 1.0001 1.0001 0 0 0 5.796875 4.7988281 z M 24.171875 4.7988281 A 1.0001 1.0001 0 0 0 23.484375 5.1015625 L 21.363281 7.2226562 A 1.0001 1.0001 0 1 0 22.777344 8.6367188 L 24.898438 6.515625 A 1.0001 1.0001 0 0 0 24.171875 4.7988281 z M 15 8 A 7 7 0 0 0 8 15 A 7 7 0 0 0 15 22 A 7 7 0 0 0 22 15 A 7 7 0 0 0 15 8 z M 2 14 A 1.0001 1.0001 0 1 0 2 16 L 5 16 A 1.0001 1.0001 0 1 0 5 14 L 2 14 z M 25 14 A 1.0001 1.0001 0 1 0 25 16 L 28 16 A 1.0001 1.0001 0 1 0 28 14 L 25 14 z M 7.9101562 21.060547 A 1.0001 1.0001 0 0 0 7.2226562 21.363281 L 5.1015625 23.484375 A 1.0001 1.0001 0 1 0 6.515625 24.898438 L 8.6367188 22.777344 A 1.0001 1.0001 0 0 0 7.9101562 21.060547 z M 22.060547 21.060547 A 1.0001 1.0001 0 0 0 21.363281 22.777344 L 23.484375 24.898438 A 1.0001 1.0001 0 1 0 24.898438 23.484375 L 22.777344 21.363281 A 1.0001 1.0001 0 0 0 22.060547 21.060547 z M 14.984375 23.986328 A 1.0001 1.0001 0 0 0 14 25 L 14 28 A 1.0001 1.0001 0 1 0 16 28 L 16 25 A 1.0001 1.0001 0 0 0 14.984375 23.986328 z'%3E%3C/path%3E%3C/svg%3E") center center no-repeat;background-size:35px;width:35px;height:35px;z-index:2;pointer-events:none;left:0}@media screen and (max-width:760px){.switch{top:auto;left:auto;right:10px;bottom:10px}.scroll-top-right{display:none!important}p.has-text-color.has-text-align-center.has-small-font-size.has-cyan-bluish-gray-color{*display:none}}[data-theme] .dark_theme{background:#e4e4e4;color:#21252b}[data-theme] .map_nCoV .header_nCoV{color:#21252b}[data-theme] .covid19-roll .covid19-roll2,[data-theme] .covid19-roll .covid19-country.aiByXc{background:#f7f7f7;color:inherit}[data-theme] .covid19-roll .covid19-country.aiByXc{box-shadow:0 1px 7px rgba(0,0,0,0.17)}[data-theme] .map_nCoV,[data-theme] .covid19-card,[data-theme] .covid19-roll,[data-theme] .table100.ver1,[data-theme] .dataTables_wrapper table th.cell100:first-child{background:#e4e4e4;color:#21252b}[data-theme] .table100.ver1 td.cell100{background-color:#f7f7f7}[data-theme] .map_nCoV svg path{stroke:#e4e4e4!important}[data-theme] .covid19-roll .covid19-country:hover{background:#e4e4e4}[data-theme] .covid19-ticker span{background:#f7f7f7;color:inherit}[data-theme] .covid19-ticker:before{left:0;background:-moz-linear-gradient(left,rgba(228,228,228,1) 0,rgba(228,228,228,1) 40%,rgba(228,228,228,0) 100%);background:-webkit-gradient(left top,right top,color-stop(0%,rgba(228,228,228,1)),color-stop(40%,rgba(228,228,228,1)),color-stop(100%,rgba(228,228,228,0)));background:-webkit-linear-gradient(left,rgba(228,228,228,1) 0,rgba(228,228,228,1) 40%,rgba(228,228,228,0) 100%);background:-o-linear-gradient(left,rgba(228,228,228,1) 0,rgba(228,228,228,1) 40%,rgba(228,228,228,0) 100%);background:-ms-linear-gradient(left,rgba(228,228,228,1) 0,rgba(228,228,228,1) 40%,rgba(228,228,228,0) 100%);background:linear-gradient(to right,rgba(228,228,228,1) 0,rgba(228,228,228,1) 40%,rgba(228,228,228,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4e4e4',endColorstr='#e4e4e4',GradientType=1)}[data-theme] .covid19-ticker:after{right:0;background:-moz-linear-gradient(left,rgba(228,228,228,0) 0,rgba(228,228,228,1) 100%);background:-webkit-gradient(left top,right top,color-stop(0%,rgba(228,228,228,0)),color-stop(100%,rgba(228,228,228,1)));background:-webkit-linear-gradient(left,rgba(228,228,228,0) 0,rgba(228,228,228,1) 100%);background:-o-linear-gradient(left,rgba(228,228,228,0) 0,rgba(228,228,228,1) 100%);background:-ms-linear-gradient(left,rgba(228,228,228,0) 0,rgba(228,228,228,1) 100%);background:linear-gradient(to right,rgba(228,228,228,0) 0,rgba(228,228,228,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4e4e4',endColorstr='#e4e4e4',GradientType=1)}.collapsible{background-color:#777;color:white;cursor:pointer;padding:10px 15px;width:100%;border:none;text-align:left;outline:none;font-size:14px;line-height:1.2;font-family:inherit;font-weight:inherit}.active2,.collapsible:hover{background-color:#555}.collapsible:after{content:'\002B';color:white;font-weight:bold;float:right;margin-left:5px}.active2:after{content:"\2212"}.shortcode_content{padding:0 18px;max-height:0;overflow:hidden;transition:max-height 0.2s ease-out;background-color:#f1f1f1;margin:0 0 1rem;border-radius:0 0 5px 5px;font-size:13px}.shortcode_content p{margin:1rem 0;color:#444} </style>
<style type="text/css">
.page-header{background-color:#15121f}/* General CSS */table th,table td,hr,.content-area,body.content-left-sidebar #content-wrap .content-area,.content-left-sidebar .content-area,#top-bar-wrap,#site-header,#site-header.top-header #search-toggle,.dropdown-menu ul li,.centered-minimal-page-header,.blog-entry.post,.blog-entry.grid-entry .blog-entry-inner,.blog-entry.thumbnail-entry .blog-entry-bottom,.single-post .entry-title,.single .entry-share-wrap .entry-share,.single .entry-share,.single .entry-share ul li a,.single nav.post-navigation,.single nav.post-navigation .nav-links .nav-previous,#author-bio,#author-bio .author-bio-avatar,#author-bio .author-bio-social li a,#related-posts,#comments,.comment-body,#respond #cancel-comment-reply-link,#blog-entries .type-page,.page-numbers a,.page-numbers span:not(.elementor-screen-only),.page-links span,body #wp-calendar caption,body #wp-calendar th,body #wp-calendar tbody,body .contact-info-widget.default i,body .contact-info-widget.big-icons i,body .posts-thumbnails-widget li,body .tagcloud a{border-color:rgba(10,10,10,0)}body,.has-parallax-footer:not(.separate-layout) #main{background-color:#050311}body{background-position:center center}body{background-attachment:fixed}body{background-repeat:no-repeat}body{background-size:cover}a{color:#13aff0}a:hover{color:#5fc4ef}.container{width:1260px}.page-header,.has-transparent-header .page-header{padding:115px 0 34px 0}.page-header .page-header-title,.page-header.background-image-page-header .page-header-title{color:#ffffff}/* Header CSS */#site-logo #site-logo-inner,.oceanwp-social-menu .social-menu-inner,#site-header.full_screen-header .menu-bar-inner,.after-header-content .after-header-content-inner{height:75px}#site-navigation-wrap .dropdown-menu >li >a,.oceanwp-mobile-menu-icon a,.after-header-content-inner >a{line-height:75px}#site-header.has-header-media .overlay-header-media{background-color:rgba(0,0,0,0.5)}#site-logo #site-logo-inner a img,#site-header.center-header #site-navigation-wrap .middle-site-logo a img{max-width:50px}#site-header #site-logo #site-logo-inner a img,#site-header.center-header #site-navigation-wrap .middle-site-logo a img{max-height:50px}#site-navigation-wrap .dropdown-menu >li >a,.oceanwp-mobile-menu-icon a,#searchform-header-replace-close{color:#ffffff}.mobile-menu .hamburger-inner,.mobile-menu .hamburger-inner::before,.mobile-menu .hamburger-inner::after{background-color:#ffffff}a.sidr-class-toggle-sidr-close{background-color:#000000}#sidr,#mobile-dropdown{background-color:#000000}body .sidr a,body .sidr-class-dropdown-toggle,#mobile-dropdown ul li a,#mobile-dropdown ul li a .dropdown-toggle,#mobile-fullscreen ul li a,#mobile-fullscreen .oceanwp-social-menu.simple-social ul li a{color:#ffffff}#mobile-fullscreen a.close .close-icon-inner,#mobile-fullscreen a.close .close-icon-inner::after{background-color:#ffffff}.sidr-class-dropdown-menu ul,#mobile-dropdown ul li ul,#mobile-fullscreen ul ul.sub-menu{background-color:rgba(237,237,237,0.02)}body .sidr-class-mobile-searchform input,body .sidr-class-mobile-searchform input:focus,#mobile-dropdown #mobile-menu-search form input,#mobile-fullscreen #mobile-search input,#mobile-fullscreen #mobile-search label{color:#3d3d3d}/* Sidebar CSS */.widget-title{margin-bottom:21px}/* Footer Widgets CSS */#footer-widgets .footer-box a,#footer-widgets a{color:#13aff0}#footer-widgets .footer-box a:hover,#footer-widgets a:hover{color:#ffffff}/* Sticky Header CSS */.is-sticky #site-header.shrink-header #site-logo #site-logo-inner,.is-sticky #site-header.shrink-header .oceanwp-social-menu .social-menu-inner,.is-sticky #site-header.shrink-header.full_screen-header .menu-bar-inner,.after-header-content .after-header-content-inner{height:60px}.is-sticky #site-header.shrink-header #site-navigation-wrap .dropdown-menu >li >a,.is-sticky #site-header.shrink-header .oceanwp-mobile-menu-icon a,.after-header-content .after-header-content-inner >a,.after-header-content .after-header-content-inner >div >a{line-height:60px}.is-sticky #site-header,.ocean-sticky-top-bar-holder.is-sticky #top-bar-wrap,.is-sticky .header-top{opacity:1}.is-sticky #site-header,.is-sticky #searchform-header-replace{background-color:#15121f!important}/* Typography CSS */body{font-family:Montserrat;font-weight:500;font-size:15px;color:#f5f4fc}h2{font-size:26px;color:#42d0ff}h3{color:#9c9c9c}#site-navigation-wrap .dropdown-menu >li >a,#site-header.full_screen-header .fs-dropdown-menu >li >a,#site-header.top-header #site-navigation-wrap .dropdown-menu >li >a,#site-header.center-header #site-navigation-wrap .dropdown-menu >li >a,#site-header.medium-header #site-navigation-wrap .dropdown-menu >li >a,.oceanwp-mobile-menu-icon a{font-size:16px;letter-spacing:.3px}.page-header .page-header-title,.page-header.background-image-page-header .page-header-title{line-height:1.6}.page-header .page-subheading{font-weight:300;font-size:16px;line-height:1.7}.sidebar-box .widget-title{font-weight:600;font-size:15px;color:#ffffff}
</style>然后将以下代码嵌入到footer.php文件的body之前即可
<div class="switch nosel" title="白昼切换">
<input class="switch__input" type="checkbox" id="themeSwitch" checked="checked">
<label aria-hidden="true" class="switch__label" for="themeSwitch">theme-switch</label>
<div aria-hidden="true" class="switch__marker"></div>
</div>
<script src="//chenlifeng.com/wp-byfiles/js/darkmain.js"></script>当然有些网站的标题颜色无法覆盖，你可自行修改颜色值。
请将以上代码中的darkmain.js文件下载后并保存到自己的空间，以免删除无法加载！
本文是否有帮助？
是否
