css主题切换

html

DOCTYPE html>
<html>
<head>
  <title>主题切换示例title>
head>
<body>
  <div class="app">
    <button id="themeButton">切换主题button>
    <div class="content">
      <h1>主题切换示例h1>
      <p>当前主题：<span id="themeText">lightspan>p>
      <p>这是一些内容，样式根据主题变化。p>
    div>
  div>
body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

css

:root {
  --primary-color-light: #3498db;
  --primary-color-dark: #e74c3c;
}

/* 默认主题样式 */
html[data-theme='light'] {
  --primary-color: var(--primary-color-light);
  background-color: #fff;
  color: #333;
}

/* 暗主题样式 */
html[data-theme='dark'] {
  --primary-color: var(--primary-color-dark);
  background-color: #333;
  color: #fff;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

#themeButton {
  padding: 10px 20px;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

#themeButton:hover {
  background-color: darken(var(--primary-color), 10%);
}

.content {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

在模板中，通过绑定data-theme属性来控制主题变化。你可以使用条件语句来决定当前主题的值。

document.addEventListener('DOMContentLoaded', function () {
  const themeButton = document.getElementById('themeButton');
  const themeText = document.getElementById('themeText');
  let currentTheme = 'light';

  themeButton.addEventListener('click', function () {
    if (currentTheme === 'light') {
      document.documentElement.setAttribute('data-theme', 'dark');
      themeText.textContent = 'dark';
      currentTheme = 'dark';
    } else {
      document.documentElement.setAttribute('data-theme', 'light');
      themeText.textContent = 'light';
      currentTheme = 'light';
    }
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

相关阅读:
证件照快速抠图更换背景 - Python OpenCV图像分割
vue3 中 setup 里的计算属性（computed）和侦听器（watch）
RPC 对比 HTTP
Netty入门——ByteBuf
23届校招面经&内推
15、IOC 之ApplicationContext 的附加功能
【华为OD机试真题 python】猜密码【2022 Q4 | 200分】
基于java的考研自习室音视频通话APP设计
Kotlin高仿微信-第22篇-个人信息-修改昵称
Zabbix自动监控windows端口(主动监控方式)

原文地址：https://blog.csdn.net/ximing020714/article/details/134209611