Web 网页随浏览器切换亮暗主题色

HenryZ 2023-11-02

使用 color-scheme 让网页随浏览器自动切换亮暗主题色（dark/light themes）

HTML:

<meta name="color-scheme" content="light dark">

CSS:

:root {
	color-scheme: light dark; /* both supported */

	/* defaults to light theme */
	--text-color: black;
	--bkg-color: white;
}



@media (prefers-color-scheme: dark) {
	:root{
	  /* for dark theme */
		--text-color: white;
		--bkg-color: black;
	}
}

body {
  background: var(--bkg-color);
  color: var(--text-color);
}

logo / favicon 图片

<html>
<head>
<link rel="icon" href="/favicon-light.png" type="image/png" media="(prefers-color-scheme: light)"/>
<link rel="icon" href="/favicon-dark.png" type="image/png" media="(prefers-color-scheme: dark)"/>
</head>
</html>