改变页面主题的两种方式

李鹏坤 / 2020-10-15


第一种设置 theme 属性

今天在看谷歌文档时觉得文档边上的目录很好看,于是打开了 F12 看 CSS 是怎么写的,发现了一个改变页面主题的新方法。

这是实现目录左边颜色条的 CSS:

[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 中以 -- 开头代表是变量的意思。

于是继续往下看,看到了这个:

[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。

……
<body theme="google-blue">……</body>
……

这下都明白了,改变了 body 的 theme 属性,会使不同的 CSS [theme=xxxx] 生效,从而使不同的颜色变量生效,从而实现改变主题。

第二种设置 disable 属性

这种方式是目前本站在用的,是在 highlightjs 的官网 看到的。

html 是这样的:

……
<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 是这样的:

var githubLightCSS = document.querySelector('#github-light');
……
githubLightCSS.disabled = false;
……
githubLightCSS.disabled = true;

就这么简单,这需要浏览器加载多个 CSS 文件,但有一点比较好的就是,每个主题的 CSS 文件分开管理,会比较清晰。

EOF