黑夜模式的实现方式

目前很多app，网页都支持黑夜模式，让网站看上去比较暗，亮度较低，这样对视力有一定的保护，更方便晚上阅读使用。这里就简单说下本网站的实现方式：网页右侧添加切换按钮，每次切换后都会存储cookie（需要注意切换时页面的闪烁），这样页面刷新，或者用户下次进来都会显示对应的模式。目前没做自动转换的功能，比如到了晚上多少点就默认显示黑夜模式。下面nuxt.js部分代码说明：

nuxt.config.js：

module.exports = {
  head: {
    script: [
     {
type: 'text/JavaScript',
        innerhtml: `
          //黑暗模式,防止页面闪烁,目前是添加在这里的
          var getCookie = function(name) {
let str = document.cookie;
let arr = str.split('; ');
for (let i = 0; i < arr.length; i++) {
let newArr = arr[i].split('=');
if (newArr[0] === name) {
return newArr[1];
              }
            }
          };
let mode = getComputedStyle(document.documentElement).getPropertyValue('content');
if(getCookie('dark_method')=='dark' || mode =='dark'){
            document.getElementsByTagName('html')[0].setAttribute('class','page-dark-mode')
          };
        `
     },
}

公共css：

/*黑夜模式*/
@media (prefers-color-scheme: light) {
html {
content: "light";
  }
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
html{
content: "dark";
  }
}
.page-dark-mode body{
background: #5d5d5d;
}
/* 其他 */

组件html：

<div class="flexbtn" v-if="isDark=='dark'" @click="toDark('light')">
<svg style="width: 28px;height: 28px; top: 7px;left: 7px;" t="1593158948691" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8171" width="32" height="32"><path d="M270.933333 723.2l-89.6 89.6c-8.533333 8.533333-8.533333 21.333333 0 29.866667 8.533333 8.533333 21.333333 8.533333 29.866667 0l89.6-89.6c8.533333-8.533333 8.533333-21.333333 0-29.866667C292.266667 714.666667 279.466667 714.666667 270.933333 723.2zM213.333333 512c0-12.8-8.533333-21.333333-21.333333-21.333333L64 490.666667c-12.8 0-21.333333 8.533333-21.333333 21.333333s8.533333 21.333333 21.333333 21.333333l128 0C204.8 533.333333 213.333333 524.8 213.333333 512zM753.066667 300.8l89.6-89.6c8.533333-8.533333 8.533333-21.333333 0-29.866667-8.533333-8.533333-21.333333-8.533333-29.866667 0l-89.6 89.6c-8.533333 8.533333-8.533333 21.333333 0 29.866667C731.733333 309.333333 744.533333 309.333333 753.066667 300.8zM512 213.333333c12.8 0 21.333333-8.533333 21.333333-21.333333L533.333333 64c0-12.8-8.533333-21.333333-21.333333-21.333333s-21.333333 8.533333-21.333333 21.333333l0 128C490.666667 204.8 499.2 213.333333 512 213.333333zM270.933333 300.8c8.533333 8.533333 21.333333 8.533333 29.866667 0 8.533333-8.533333 8.533333-21.333333 0-29.866667L211.2 179.2c-8.533333-8.533333-21.333333-8.533333-29.866667 0-8.533333 8.533333-8.533333 21.333333 0 29.866667L270.933333 300.8zM960 490.666667l-128 0c-12.8 0-21.333333 8.533333-21.333333 21.333333s8.533333 21.333333 21.333333 21.333333l128 0c12.8 0 21.333333-8.533333 21.333333-21.333333S972.8 490.666667 960 490.666667zM753.066667 723.2c-8.533333-8.533333-21.333333-8.533333-29.866667 0-8.533333 8.533333-8.533333 21.333333 0 29.866667l89.6 89.6c8.533333 8.533333 21.333333 8.533333 29.866667 0 8.533333-8.533333 8.533333-21.333333 0-29.866667L753.066667 723.2zM512 256c-140.8 0-256 115.2-256 256 0 140.8 115.2 256 256 256s256-115.2 256-256C768 371.2 652.8 256 512 256zM512 725.333333c-117.333333 0-213.333333-96-213.333333-213.333333 0-117.333333 96-213.333333 213.333333-213.333333s213.333333 96 213.333333 213.333333C725.333333 629.333333 629.333333 725.333333 512 725.333333zM512 810.666667c-12.8 0-21.333333 8.533333-21.333333 21.333333l0 128c0