Custom Properties(主题切换)
197
2024-06-05
⭐️ 有关 CSS Custom Properties 的学习
什么是Custom Properties
CSS Custom Properties,也被称为CSS变量(Custom Properties),是CSS的一项功能,允许开发者定义并重用值。通过CSS变量,样式可以更加灵活和可维护。
可维护性:通过变量来管理颜色、字体等属性,更改时只需修改变量的值。
灵活性:可以在不同的上下文中重定义变量,实现多种主题或模式。
可读性:使用变量可以使CSS代码更加易读和理解。
定义和使用CSS变量
定义CSS变量
CSS变量使用
--
作为前缀,通常定义在:root
选择器中,这样可以在整个文档中使用。例如::root { --primary-color: #3498db; --secondary-color: #2ecc71; --font-size: 16px; }
使用CSS变量
使用CSS变量时,采用
var()
函数。例如:body { color: var(--primary-color); font-size: var(--font-size); } h1 { color: var(--secondary-color); }
示例:主题切换
通过CSS变量,切换黑暗模式和白天模式变得非常简单。例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>主题切换</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>我是标题</h1> <label class="switch"> <input type="checkbox" id="toggleSwitch"> <span class="slider round"></span> </label> </header> <main> <p>请告诉我,我是什么颜色?</p> </main> <script src="script.js"></script> </body> </html>
/* 定义CSS变量 */ :root { --background-color: white; --text-color: black; --header-background-color: #f5f5f5; } body { font-family: Arial, sans-serif; background-color: var(--background-color); color: var(--text-color); transition: background-color 0.3s, color 0.3s; } body.dark-mode { --background-color: #121212; --text-color: white; } header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: var(--header-background-color); } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s; border-radius: 50%; } input:checked + .slider { background-color: #2196F3; } input:checked + .slider:before { transform: translateX(26px); }
// script.js document.addEventListener('DOMContentLoaded', (event) => { const toggleSwitch = document.getElementById('toggleSwitch'); const currentMode = localStorage.getItem('mode') || 'light'; document.body.classList.add(currentMode + '-mode'); if (currentMode === 'dark') { toggleSwitch.checked = true; } toggleSwitch.addEventListener('change', () => { const isDarkMode = toggleSwitch.checked; document.body.classList.toggle('dark-mode', isDarkMode); localStorage.setItem('mode', isDarkMode ? 'dark' : 'light'); }); });
- 5
-
分享