究竟什么是暗黑模式？这个概念起初来源于macOS系统，该系统的mojave版本为用户提供两个主题皮肤，即浅色和深色的皮肤。自从有了这个概念之后，很多网站和系统都会用户提供了相应的两套肤色，便于用户根据自己的习惯或爱好进行切换

从科学的角度讲，低对比度的暗色可以降低屏幕对视网膜的刺激，同时还可以让电子设备更加省电。

在过往的印象之中，最早实现类似的效果，一般都是通过JavaScript来更换Web页面或Web应用程序主题皮肤的.css文件，但是对于维护多套样式是较为痛苦的，特别当你要为你的产品提供更多的皮肤的时候更为堪忧。这个时候你可以借助类似Sass这样的处理器来维护你的主题样式，声明好变量，然后维护对应的变量值。

这就是css3的自定义属性，自定义属性的出现，可以让css样式也使用变量，通过js可以动态的修改变量的值

//现在全局定义:root{ --theme-color:red;//使用的时候#app{ background-color:var(--theme-color);//假如我们没有指定--theme-color这个属性，则可以在使用的时候加上替代值#app{ background-color:var(--theme-color,black);//没有指定--theme-color则会由black代替}

通过JS获取和设置自定义的属性

//js中获取--theme-color的值var styles = getComputedStyle(document.documentElement);var value = styles.getPropertyValue( --theme-color console.log(value);//red//js中更改--theme-color的值document.documentElement.style.setProperty( --theme-color , black

明白了这个原理，以我的个人网站为例，我只需要，改变三个颜色属性即可将我的网站改变风格：logo,背景色，和字体色

:root{ --bg-color:#fff; --a-color:#4A4A4A; --logo:url(../images/logo.png);}

然后利用js，实时切换这三个变量即可

function check_model(){ var _items = []; var items = document.getElementsByName( switch_default for(var i=0;i items.length;i ) { if (items[i].checked){_items.push(items[i].value);} if(_items.length==0){ document.documentElement.style.setProperty( --bg-color , #fff document.documentElement.style.setProperty( --a-color , #4A4A4A document.documentElement.style.setProperty( --logo , url(../images/logo.png) localStorage.setItem( mode , light }else{ document.documentElement.style.setProperty( --bg-color , #292a2d document.documentElement.style.setProperty( --a-color , #a9a9b3 document.documentElement.style.setProperty( --logo , url(../images/logo_dark.png) localStorage.setItem( mode , dark }

是不是很简单呢，这样就可以实现了，你可能也发现了，我利用webstorage技术来实现风格的状态保存，这样就可以保证用户在切换风格以后，可以记录用户选择的状态

关于webstorage可以参看这篇文章：彻底弄清楚session,cookie,sessionStorage,localStorage的区别及应用场景（面试向）

前端技术虽然博大精深，但是作为一名全栈工程师，掌握前端也是十分必要的，想在互联网行业生存下去就取决于一个人的技术是否全面，我始终对同学的建议就是，不要惧怕前端，要热爱前端，关注前端从而反哺后端，只有不停的探索和学习，才能在技术这条路上走的平稳和长久。