HTML 多套主题（夜间，白天等）的探索

如果主题只是一些样式不一样为了方便使用可以定义一些变量 和 一些class

比如这样

• 白天主题

:root {
  --status-colors-error: #C72929;
  --input-label-color: #8E8F90;
  --input-border-color-focus: #075FDB;
  --input-background-color: #021F4A;
  --input-border-color: #719ED1;
  --input-disabled: #00183A;
}

.img-light {
  display: none;
}

.img-dark {
  display: inline;
}

• 夜间主题

:root {
  --status-colors-error: #C72929;
  --input-label-color: #8E8F90;
  --input-border-color-focus: #075FDB;
  --input-background-color: white;
  --input-border-color: #DBDEEA;
  --input-disabled: #DBDEEA;
}

.img-light {
  display: inline;
}

.img-dark {
  display: none;
}

遇到某个【标题】在不同主题的时候直接使用变量color:var(--status-colors-error)

遇到某个【图片】在不同主题的时候，同时定义两个图片，配上img-dark、img-light,就可以自动在不同主题自动切换图片了

<img class="img-dark" src="./dark.png">
<img class="img-light" src="./light.png">

最后还有一个问题，怎么切换css文件？当然是使用js控制

//添加主题
const link = document.createElement('link')
link.rel = 'stylesheet'
link.type = 'text/css'
link.href =  './light.css'
document.head.appendChild(link);

//添加移除主题
const existingLinks = document.querySelectorAll(`link[rel="stylesheet"][href= "./light.css"]`)[0];
document.head.removeChild(existingLink);