HTML 多主题的探索-526互联

如果主题只是一些样式不一样为了方便使用可以定义一些变量和一些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);