⭐️ 有关 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');
    });
});