改变页面主题的两种方式
李鹏坤 / 2020-10-15
第一种设置 theme 属性
今天在看 谷歌文档 时觉得文档边上的目录很好看，于是打开了 F12 看 CSS 是怎么写的，发现了一个改变页面主题的新方法。
这是实现目录左边颜色条的 CSS：
1
2
3
4
| [dir=ltr] devsite-toc>.devsite-nav-list {
border-left: 4px solid #5f6368;
border-left-color: var(--devsite-toc-border,var(--devsite-primary-color,#5f6368));
}
|
默认是 #5f6368，但是 border-left-color 设置里有两个参数，--devsite-toc-border 和 --devsite-primary-color，CSS 中以 -- 开头代表是变量的意思。
于是继续往下看，看到了这个：
1
2
3
4
5
6
| [theme=google-blue] {
--devsite-primary-color: #1a73e8;
--devsite-dark-color: #185abc;
--devsite-light-color: #4285f4;
--devsite-upper-tab-active: #185abc;
}
|
根据浏览器描述，这是一个继承自 body 的样式，另外，[theme=google-blue] 比较陌生，查看了一下 CSS 选择器的文档 原来是一个属性选择器，再看 HTML。
1
2
3
| ……
<body theme="google-blue">……</body>
……
|
这下都明白了，改变了 body 的 theme 属性，会使不同的 CSS [theme=xxxx] 生效，从而使不同的颜色变量生效，从而实现改变主题。
第二种设置 disable 属性
这种方式是目前本站在用的，是在 highlightjs 的官网 看到的。
html 是这样的：
1
2
3
4
5
| ……
<link rel="stylesheet" id="github-light" href="/css/github-light.css">
<link rel="stylesheet" id="github-dark" href="/css/github-dark.css" disabled>
<link rel="stylesheet" id="github-dark-orange" href="/css/github-dark-orange.css" disabled>
……
|
js 是这样的：
1
2
3
4
5
| var githubLightCSS = document.querySelector('#github-light');
……
githubLightCSS.disabled = false;
……
githubLightCSS.disabled = true;
|
就这么简单，这需要浏览器加载多个 CSS 文件，但有一点比较好的就是，每个主题的 CSS 文件分开管理，会比较清晰。
完