您现在的位置是：网站首页 > 一行CSS魔力：切换网站主题文章详情

一行CSS魔力：切换网站主题

陈川【 CSS 】 12551人已围观 3946字

在网页设计与开发领域，主题切换功能已成为提升用户体验的重要特性。传统实现方式往往需要编写大量JavaScript代码，维护多套CSS变量，甚至借助CSS预处理器。但现代CSS提供了一个令人惊艳的解决方案——仅用一行代码就能实现完整的主题切换功能。

核心魔法：filter属性

这行神奇的CSS代码就是：

css 复制代码

html { filter: invert(1) hue-rotate(180deg); }

这行代码结合了两个CSS滤镜函数：

invert(1) - 将页面颜色完全反转（黑色变白色等）
hue-rotate(180deg) - 将色相旋转180度，使颜色更加自然

实现原理

当应用这行代码时：

所有颜色值都会被自动计算并反转
图片和视频等媒体元素可通过额外规则排除
创建出与原始主题形成鲜明对比的暗色主题

进阶优化

虽然基础实现仅需一行，但完整方案可稍作扩展：

css 复制代码

html.dark-theme {
  filter: invert(1) hue-rotate(180deg);
}
/* 排除不需要反转的元素 */
.dark-theme img, 
.dark-theme video, 
.dark-theme iframe {
  filter: invert(1) hue-rotate(180deg);
}

优势与局限

优势：

实现极其简单
无需维护多套颜色变量
自动覆盖所有元素，包括第三方组件

局限：

对精确色彩控制要求高的场景不适用
需要额外处理媒体元素
性能略低于传统方案

适用场景

这种技术特别适合：

快速原型开发
个人博客和小型网站
对主题精确度要求不高的项目

示例代码

HTML代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一行CSS切换主题</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>主题切换演示</h1>
        <button id="themeToggle">切换主题</button>
    </header>

    <main>
        <article>
            <h2>关于这个演示</h2>
            <p>这个页面展示了如何使用一行CSS代码实现主题切换功能。</p>
            <p>核心代码是: <code>filter: invert(1) hue-rotate(180deg)</code></p>
        </article>

        <section class="card-container">
            <div class="card">
                <h3>卡片1</h3>
                <p>这是一个示例卡片</p>
            </div>
            <div class="card">
                <h3>卡片2</h3>
                <p>另一个示例卡片</p>
            </div>
        </section>

    </main>

    <footer>
        <p>© 2025 主题切换演示</p>
    </footer>

    <script src="script.js"></script>
</body>

</html>

CSS代码

css 复制代码

/* 基础样式 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333;
    transition: filter 0.3s ease;
}

header {
    background-color: #6200ee;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

button {
    padding: 0.5rem 1rem;
    background-color: white;
    color: #6200ee;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

main {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.card-container {
    display: flex;
    gap: 1rem;
    margin: 2rem 0;
}

.card {
    background-color: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex: 1;
}

footer {
    text-align: center;
}

/* 暗色主题 */
.dark-theme {
    filter: invert(1) hue-rotate(180deg);
}

/* 处理不需要反转的元素 */
.dark-theme img,
.dark-theme video,
.dark-theme iframe {
    filter: invert(1) hue-rotate(180deg);
}

JS代码

javascript 复制代码

document.addEventListener('DOMContentLoaded', () => {
    const themeToggle = document.getElementById('themeToggle');
    const htmlElement = document.documentElement;

    // 检查本地存储中的主题偏好
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        htmlElement.classList.add('dark-theme');
        themeToggle.textContent = '切换亮色主题';
    }

    // 切换主题
    themeToggle.addEventListener('click', () => {
        htmlElement.classList.toggle('dark-theme');

        // 更新按钮文本和本地存储
        if (htmlElement.classList.contains('dark-theme')) {
            themeToggle.textContent = '切换亮色主题';
            localStorage.setItem('theme', 'dark');
        } else {
            themeToggle.textContent = '切换暗色主题';
            localStorage.setItem('theme', 'light');
        }
    });
});