CSS实现主题切换|极客教程

CSS实现主题切换

在网页设计中，主题切换是一种常见的功能，可以让用户根据自己的喜好选择不同的主题风格。通过CSS实现主题切换可以让网页更加灵活多样，本文将介绍如何使用CSS来实现主题切换功能。

1. 使用CSS变量实现主题切换

CSS变量是一种在CSS中定义的变量，可以在整个样式表中重复使用。通过使用CSS变量，我们可以轻松地实现主题切换功能。下面是一个简单的示例代码，演示如何使用CSS变量实现主题切换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme Switching</title>
    <style>
        :root {
            --primary-color: #007bff;
            --secondary-color: #6c757d;
        }

        body {
            background-color: var(--primary-color);
            color: var(--secondary-color);
        }

        .btn {
            padding: 10px 20px;
            background-color: var(--secondary-color);
            color: var(--primary-color);
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button class="btn">Switch Theme</button>

    <script>
        const btn = document.querySelector('.btn');
        let isDarkMode = false;

        btn.addEventListener('click', () => {
            if (isDarkMode) {
                document.documentElement.style.setProperty('--primary-color', '#007bff');
                document.documentElement.style.setProperty('--secondary-color', '#6c757d');
            } else {
                document.documentElement.style.setProperty('--primary-color', '#343a40');
                document.documentElement.style.setProperty('--secondary-color', '#f8f9fa');
            }

            isDarkMode = !isDarkMode;
        });
    </script>
</body>
</html>

Output:

CSS实现主题切换

在上面的示例代码中，我们使用了CSS变量--primary-color和--secondary-color来定义主题的颜色。通过JavaScript代码监听按钮的点击事件，切换主题颜色。

2. 使用CSS类名切换主题

除了使用CSS变量，我们还可以通过切换CSS类名的方式来实现主题切换。下面是一个示例代码，演示如何使用CSS类名切换主题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme Switching</title>
    <style>
        .light-theme {
            --primary-color: #007bff;
            --secondary-color: #6c757d;
        }

        .dark-theme {
            --primary-color: #343a40;
            --secondary-color: #f8f9fa;
        }

        body {
            background-color: var(--primary-color);
            color: var(--secondary-color);
        }

        .btn {
            padding: 10px 20px;
            background-color: var(--secondary-color);
            color: var(--primary-color);
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body class="light-theme">
    <button class="btn">Switch Theme</button>

    <script>
        const btn = document.querySelector('.btn');
        let isDarkMode = false;

        btn.addEventListener('click', () => {
            if (isDarkMode) {
                document.body.classList.remove('dark-theme');
                document.body.classList.add('light-theme');
            } else {
                document.body.classList.remove('light-theme');
                document.body.classList.add('dark-theme');
            }

            isDarkMode = !isDarkMode;
        });
    </script>
</body>
</html>

Output:

CSS实现主题切换

在上面的示例代码中，我们定义了两个CSS类名light-theme和dark-theme，分别对应不同的主题颜色。通过JavaScript代码切换body元素的类名来实现主题切换。

3. 使用CSS预处理器实现主题切换

除了原生CSS，我们还可以使用CSS预处理器如Sass或Less来实现主题切换。下面是一个示例代码，演示如何使用Sass来实现主题切换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme Switching</title>
    <style>
         $primary-color: #007bff;$ secondary-color: #6c757d;

        .light-theme {
            background-color:  $primary-color; color:$ secondary-color;
        }

        .dark-theme {
            background-color: #343a40;
            color: #f8f9fa;
        }

        body {
            @extend .light-theme;
        }

        .btn {
            padding: 10px 20px;
            background-color:  $secondary-color; color:$ primary-color;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body class="light-theme">
    <button class="btn">Switch Theme</button>

    <script>
        const btn = document.querySelector('.btn');
        let isDarkMode = false;

        btn.addEventListener('click', () => {
            if (isDarkMode) {
                document.body.classList.remove('dark-theme');
                document.body.classList.add('light-theme');
            } else {
                document.body.classList.remove('light-theme');
                document.body.classList.add('dark-theme');
            }

            isDarkMode = !isDarkMode;
        });
    </script>
</body>
</html>

Output:

CSS实现主题切换