黑/白主题，如何添加fontawesome图标（JavaScript）答案

【问题标题】：Black / white theme, how to add fontawesome icon (JavaScript)黑/白主题，如何添加fontawesome图标（JavaScript）
【发布时间】：2022-02-11 04:46:26
【问题描述】：

我真的不懂 JavaScript。我的目标是将图标添加到 ????白色的 / ？？？？深色按钮。如果你知道javascript，请帮助我。我想要什么：

如果你按下按钮，它是白色 = 月亮。
如果您按下按钮，天黑 = 太阳。

我的字体很棒：

<i class="fa-solid fa-sun"></i>
<i class="fa-solid fa-moon"></i>

CDN 字体真棒：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

if (!localStorage.theme) localStorage.theme = "light"
document.body.className = localStorage.theme
toggleThemeBtn.innerText = document.body.classList.contains("dark") ? "white" : "dark"

toggleThemeBtn.onclick = () => {
    document.body.classList.toggle("dark")
    toggleThemeBtn.innerText = document.body.classList.contains("dark") ? "white" : "dark"
    localStorage.theme = document.body.className || "light"
}

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
body {
    min-height: calc(100vh - 100px);
    margin-top: 100px;
}
body.dark {
    background: #303133;
    color: #fff;
}
body.dark .content {
    box-shadow: 0 0 5px #1d2225;
}
body.dark button {
    box-shadow: 0 0 5px #1d2225;
    color: #fff;
}
body.dark button:hover {
    box-shadow: 0 0 10px #1d2225;
}
body.dark button:active {
    box-shadow: inset 0 0 5px #1d2225;
}
.content {
    width: 55%;
    margin: auto;
    box-shadow: 0 0 3px silver;
    padding: 20px;
    height: calc(100vh - 100px - 40px);
}
section:not(:first-child) {
    margin-top: 30px;
}
.desc {
    margin: 10px 0;
    opacity: .7;
}
button {
    padding: 10px 20px;
    border: none;
    background: transparent;
    box-shadow: 0 0 5px silver;
    cursor: pointer;
    outline: none;
}
button:hover {
    box-shadow: 0 0 10px silver;
}
button:active {
    box-shadow: inset 0 0 5px silver;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <title></title>
</head>
<body>
    <main class="content">
        <i class="fa-solid fa-sun nav-li-icon-bottom" id="moodBW"></i> <i class="fa-solid fa-moon nav-li-icon-bottom"></i>
        <section>
            <h1>BLock</h1>
            <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quod porro voluptate minima quasi a mollitia dicta corrupti nesciunt! Corrupti, quis at? Perspiciatis voluptatibus provident laboriosam vitae voluptatem autem, cupiditate esse nihil est! Ducimus non, corrupti totam quisquam quod et!</p><button id="toggleThemeBtn">Сменить тему на тёмную</button>
        </section>
    </main>
    <script src="script.js">
    </script>
</body>
</html>

我不知道为什么，但是我的 HTML / CSS / js sn-p 在 StackOverflow 上不起作用，特别是为此我在 CodePen 上创建了一个页面 codepen url 或https://codepen.io/SergiuC121/pen/dyZWjOd

我不知道这是否有意义，但在我以以下方式更改我的代码并且它实际上工作但它显示真假之后，我删除了白色/深色文本。

var i = document.createElement("i");
var t = document.createElement("i");
t.className = "fa-solid fa-moon nav-li-icon-bottom";
i.className = "fa-solid fa-sun nav-li-icon-bottom";
if (!localStorage.theme) localStorage.theme = "backgroundthemelight";
document.body.className = localStorage.theme;

    if (toggleThemeBtn.innerText = document.body.classList.contains("dark")) {
        document.getElementById('toggleThemeBtn').appendChild(i);
    } else {
        document.getElementById('toggleThemeBtn').appendChild(t);
    }

toggleThemeBtn.onclick = () => {
    document.body.classList.toggle("dark");
    var i = document.createElement("i");
    i.className = "fa-solid fa-sun nav-li-icon-bottom";
    var t = document.createElement("i");
    t.className = "fa-solid fa-moon nav-li-icon-bottom";
    if (toggleThemeBtn.innerText = document.body.classList.contains("dark")) {
        document.getElementById('toggleThemeBtn').appendChild(i);
    } else {
        document.getElementById('toggleThemeBtn').appendChild(t);
    }
    localStorage.theme = document.body.className || "backgroundthemelight"
}

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    min-height: calc(100vh - 100px);
    margin-top: 100px;
}

body.dark {
    background: #303133;
    color: #fff;
}

body.dark .content {
    box-shadow: 0 0 5px #1d2225;
}

body.dark button {
    box-shadow: 0 0 5px #1d2225;
    color: #fff;
}

body.dark button:hover {
    box-shadow: 0 0 10px #1d2225;
}

body.dark button:active {
    box-shadow: inset 0 0 5px #1d2225;
}

.content {
    width: 55%;
    margin: auto;
    box-shadow: 0 0 3px silver;
    padding: 20px;
    height: calc(100vh - 100px - 40px);
}

section:not(:first-child) {
    margin-top: 30px;
}

.desc {
    margin: 10px 0;
    opacity: .7;
}

button {
    padding: 10px 20px;
    border: none;
    background: transparent;
    box-shadow: 0 0 5px silver;
    cursor: pointer;
    outline: none;
}

button:hover {
    box-shadow: 0 0 10px silver;
}

button:active {
    box-shadow: inset 0 0 5px silver;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="content"> 
                <i class="fa-solid fa-sun nav-li-icon-bottom" id="moodBW"></i> 
                <i class="fa-solid fa-moon nav-li-icon-bottom"></i>  
        <section>
            <h1>BLock</h1>
            <p class="desc">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quod porro voluptate minima quasi a mollitia dicta corrupti nesciunt! Corrupti, quis at? Perspiciatis voluptatibus provident laboriosam vitae voluptatem autem, cupiditate esse nihil est! Ducimus non, corrupti totam quisquam quod et!
            </p>
            <button id="toggleThemeBtn">Сменить тему на тёмную</button>
        </section>
    </main>

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

我在楼上展示了我的旧代码，但在这里它再次不起作用我不知道为什么我附上 CodePen 的链接 url codepen 或 https://codepen.io/SergiuC121/pen/zYPwLRz

IMG 结果：（按第二个按钮后突然第一个按钮）

主题保存在本地存储中，因为我无法在此处执行我的 sn-p。

有什么建议吗？

p.s:我用谷歌翻译把它翻译成英文，如果有人发现错误，请纠正他们，以便其他人理解，谢谢..

【问题讨论】：

标签： javascript html css

【解决方案1】：

对我来说，这两个代码笔示例都运行良好，因此我无法在 Javascript 中提出修复建议。虽然如果您的要求只是在 btns 之间切换并基于相同的主题切换主题，那么您可以使用 css 来隐藏/显示按钮，并且可以使用 js 来切换 body 类。

我为此创建了一个codepen 示例。

笔中的 js 仅用于根据单击的按钮切换 body 类。而 css 正在完成显示和隐藏按钮的工作。

JS如下：

document.getElementById("lightThemeBtn")?.addEventListener('click', (e) => {
    const body = document.querySelector("body");

    body.classList.add('dark');
});
document.getElementById("darkThemeBtn")?.addEventListener('click', (e) => {
    const body = document.querySelector("body");

    body.classList.remove('dark');
});

我已经使用了你所有的 CSS（除了按钮上的填充）并在底部添加了以下内容：

.toggleThemeBtn > div > i {
  margin-right: 5px;
}

.toggleThemeBtn #darkThemeBtn {
  display:none;
}

body.dark #lightThemeBtn {
  display: none;
}

body.dark #darkThemeBtn {
  display: block;
}

.toggleThemeBtn > div {
  padding: 10px 20px;
}

在 HTML 中，在按钮中，我正在渲染 2 个 div，其中包含太阳和月亮图标和文本。

  <button class="toggleThemeBtn" id="toggleThemeBtn">
          <div id="lightThemeBtn"><i class="fa-solid fa-sun"></i>Light</div>          
          <div id="darkThemeBtn"><i class="fa-solid fa-moon" ></i>Dark</div>
        </button>

这些变化给了我想要的结果。希望它以不同的方式回答您的问题。

【讨论】：

您的代码对我有帮助但不完全，如果您注意到我的片段中它保存在本地存储中，在您的情况下它没有保存，我会尝试找到一些东西来保存它，但我不是很擅长，但感谢您的代码。如果有可能，你能告诉我如何在本地存储中保存吗？
更新了codepen。它现在将状态保存在 localStorage 中，并在下次重新加载时加载相同的状态。更改仅在 JS 部分完成。