主题切换方案
方案一
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;}
}