使您的页面更加动态的一件事是使用 JavaScript 添加功能。在本文中，我将引导您使用 CSS 和 JavaScript 制作一个有趣且简单的主题切换！

你可以用它做些什么，所以让我们开始吧！

让我们设置我们的 HTML 文档

我们必须为我们的主题切换元素添加一个“包装器”，我们将在其中包含我们的标签、类型复选框以及最终包含我们笑脸/月亮脸的滑块。

<div class="theme-switch-wrapper"> 
    <label class="theme-switch" for="checkbox">
        <input type="checkbox" id="checkbox"/>
            <div class="slider round"></div>
    </label>
</div> 

<h1> Hi! This is test text </h1>
<h2> This is smaller test text </h2>
<h3> Smol test text </h3>

它看起来像这样：

我知道！我知道！但请记住我总是说的，你必须相信这个过程！

让我们来处理 CSS

首先我们需要添加我们的默认值样式，或:root 样式。这些是我们将在“轻”模式下看到的：

:root{
    --font-color: #66545e;
    --background-color: rgb(255, 194, 204);
  }

当然还有我们的“黑暗”模式：

  [data-theme="dark"] {
    --font-color: #525353;
    --background-color: #cde2e0;
}

另外让我们添加一些样式以使所有内容居中：

body{
  display: flex;
  align-items: center;
  justify-content:center;
  flex-direction: column;
  background-color: var(--background-color);
}

h1, h2, h3{
  color: var(--font-color);
}

现在，您可能已经注意到我使用了var(--background-color); 和var(--font-color); 如果单击，这将从“浅色”模式或“深色”模式中获取背景或字体颜色的变量（在我们添加 JavaScript 之后）。

它现在可能看起来有点像这样：

但那是一个 SUPER UGLY 主题 toggle yukkk！让我们解决这个问题：

*::before, *::after {    
    margin: 0;
    padding: 0;
}

但是我们不希望我们的主题切换是那种复选框框样式，所以让我们隐藏它。

.theme-switch {    
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
    border-radius: 15px;
}

.theme-switch input {
    display: none;    
}

留在我这里，让我们为我们的滑块添加一些生命！这就是所有魔法发生的地方：

.slider {
    background-color: gray;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;

  }

.slider::before {    
    bottom: 4px;
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px; 
    content:"🌞";

}

input:checked + .slider {
    background-color: gray;
}

input:checked + .slider::before {
    transform: translateX(26px);
    content:'🌙';

}

.slider.round {
    border-radius: 15px;
}

.slider.round::before {
    border-radius: 10%;
}

我们正在处理这个：

但什么都没有发生

添加 JavaScript

首先，我的朋友，我们必须从 HTML 文档中“选择”我们将要使用的元素。

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

现在我们需要创建一个函数来处理事件发生时的变化，在这种情况下是“点击”发生。

• 我们正在寻找一个活动
• 发生这种情况时，我们将数据主题设置为深色
• 否则它将是数据主题灯
• 我们为“更改”添加一个事件侦听器为 false

function switchTheme(e) { 
        if (e.target.checked) { 
            document.documentElement.setAttribute('data-theme', 'dark')
        }
        else { 
            document.documentElement.setAttribute('data-theme', 'light')
        }    
    }
    toggleSwitch.addEventListener('change', switchTheme, false)

那应该让它工作！但是我们希望通过确保页面记住主题偏好来让用户的生活更轻松，对吧？让我们用本地存储来做。

添加本地存储

这一步完全是可选的，我的朋友

我们只需要在 JavaScript 中添加几行代码。在我们的switchTheme(e)函数中，我们添加了本地存储。像这样：

    function switchTheme(e) { 
        if (e.target.checked) { 
            document.documentElement.setAttribute('data-theme', 'dark')
            localStorage.setItem('theme', 'dark'); 
        }
        else { 
            document.documentElement.setAttribute('data-theme', 'light')
            localStorage.setItem('theme', 'light'); 
        }    
    }

现在我们只需要实际存储它并在用户再次访问网站时获取它：

const savedTheme = localStorage.getItem('theme') ?  localStorage.getItem('theme') : null;

if (savedTheme) {
    document.documentElement.setAttribute('data-theme', savedTheme);

    if (savedTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

应该就是这样，我的朋友！使用您的新主题切换