当前位置：首页 > news >正文

主题切换方案

news 来源：原创 2025/5/15 7:38:16

方案一

CSS :root 选择器匹配文档的根元素。在 HTML 文档中，根元素就是 <html> 标签

1、定义颜色变量

可在公共样式文件里面定义

:root {--primary-color: #007bff;  //定义颜色变量
}

2、使用 JavaScript 修改 CSS 变量

document.documentElement.style.setProperty('--primary-color', '#ff0000');

3、使用

页面的样式引用

.bgcolor{background: var(--primary-color);
}

方案二

1、利用body标签添加class类名

document.body.className = "classname"

或者

document.body.classList.add('my-class')

方案一方案二结合使用

通过 :root 定义不同主题的颜色、字体等变量，然后利用 JavaScript 动态修改 :root 中变量的值，可以轻松实现网站的主题切换功能。例如，定义一个浅色主题和一个深色主题的变量

:root {--text-color: #333;--background-color: #f8f9fa;
}.dark-theme {--text-color: #f8f9fa;--background-color: #333;
}

在 JavaScript 中，通过添加或移除 dark - theme 类来切换主题：

const body = document.body;
const themeToggle = document.getElementById('theme-toggle');themeToggle.addEventListener('click', () => {body.classList.toggle('dark - theme');
});

响应式布局参考：

:root {--font-size-base: 16px;--margin - base: 10px;
}@media (min - width: 768px) {:root {--font - size - base: 18px;--margin - base: 20px;}
}@media (min - width: 1024px) {:root {--font - size - base: 20px;--margin - base: 30px;}
}