3 个回答

你是说深色模式吗?看了下这个网站,是全部使用 style 去改变颜色的,现在主流的做法是使用CSS Var,示例如下:

html {
  --card-background: #ffffff;
}

html.dark {
  --card-background: #000000
}

.card {
  background-color: var(--card-background);
}

只是小改动态切换样式即可(比如楼上的做法)

许多框架的做法也是使用 css 变量,但这需要在设计初期就敲定

如果涉及变动元素较多,或者整体页面样式复杂,或者已经开发完项目了,想 临时增加 换肤功能,一般会额外设计几套 css 统一风格,js 动态控制引入

/* dark.css */
body {
  background-color: black;
  color: white;
}

/* light.css */
body {
  background-color: white;
  color: black;
}
<head>
  <link id="theme-style" rel="stylesheet" href="dark.css">
</head>

<script>
// 切换主题
function switchTheme(themeName) {
  document.getElementById('theme-style').href = themeName + '.css';
}
</script>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Microsoft
子站问答
访问
宣传栏