浅色/深色主题切换答案

【问题标题】：Light/Dark Theme Toggle浅色/深色主题切换
【发布时间】：2019-12-24 08:17:07
【问题描述】：

我正在尝试创建一个 HTML 页面，在单击按钮时，主题会从暗变为亮。

我遇到的问题是菜单图标。如果您更改为深色主题，然后打开和关闭菜单，则浅色和深色主题菜单图标显示或弹出菜单将不会显示任何内容，甚至是关闭菜单的菜单图标。

我在这里做错了吗？

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="JS/jquery-3.3.1.slim.min.js"></script>


<style>
@font-face {font-family:"Poppins";src: url("../FONT/Poppins/pxiEyp8kv8JHgFVrJJnecmNE.woff2") format('woff2');}
html, body {font-family: 'Poppins', sans-serif;overflow: hidden;}
p {font-weight: 400;}
a {text-decoration: none; }
.dark {color: #ececec;background: rgb(22,22,22);}
#lightend{display:none;cursor:pointer;outline:none;border:none;width:2vh;float:right}
#darkend {cursor: pointer;outline: none;border: none;width: 2vh;float: right;}
.header {width: 100%;height: 15%;display: inline-block;}
.header_menu {width: 5%;height: 100%;float: left;display: inline-block;}
.header_logo {width: 60%;height: 100%;float: left;display: inline-block;}
.header_search {width: 30%;height: 100%;float: left;display: inline-block;}
.header_theme {width: 5%;height: 100%;float: left;display: inline-block;}
.wrapper {display: none;position: absolute;z-index: 50;width: 20%;height: 105%;background: rgb(22,22,22);transition: all 0.3s;}
#sidebarOpen {background: inherit;border: none;cursor: pointer;}
#sidebarOpenWhite {display: none;background: inherit;border: none;cursor: pointer;}
.sidemenu-info {background: rgb(22,22,22);cursor: pointer;border: none;}
.sidebar-header {background: rgb(27,27,27); width: 100%; height: 20%;}
#sidebar a {color: #ececec;}
.sidebar-header-main {width: 100%; height: 100%; position: relative; display: inline-block;}
.sidebar-header-main-account-image {width: 50%; height: 100%; position: relative; display: inline-block; float: left;}
.sidebar-header-main-account-image img {width: 50%; height: 100%; border-radius: 50%; margin-top: 5%; margin-left: 2.5%;}
.sidebar-header-main-account-name {width: 50%; height: 100%; position: relative; display: inline-block; float: left;}
.main {width: 100%;height: 1250px;position: relative;}
</style>



</head>

<body>
<div class="wrapper">
    <nav id="sidebar">
        <button type="button" id="sidebarClose" class="sidemenu-info"><img src="Media/menu_icon_white.png" width="25"></button>
        <a href="#"><div class="sidebar-header"><div class="sidebar-header-main"><div class="sidebar-header-main-account-image"><img src="MEDIA/account-picture-placeholder.png"></div><div class="sidebar-header-main-account-name"><span> FIRST.LAST </span></div></div></div></a>

    </nav>
</div>
<div class="header">
    <div class="header_menu"><button type="button" id="sidebarOpen" class="menu-info"><img src="Media/menu_icon.png" width="25"></button><button type="button" id="sidebarOpenWhite" class="menu-info"><img src="Media/menu_icon_white.png" width="25"></button></div>
    <div class="header_logo">
    <p style="float: right; margin-top: auto; margin-bottom: auto;">Insert Logo Here</p>
    </div>
    <div class="header_search">
    <p style="float: right; margin-top: auto; margin-bottom: auto;">Insert Search Bar Here</p>
    </div>
    <div class="header_theme"><input type="image" src="MEDIA/darkmode.png" id="darkend"></input><input type="image" src="MEDIA/lightmode.png" id="lightend"></input></div>
</div>



<script>
$('#darkend').click(function(){
    $('html').toggleClass("dark");
    $('#darkend').hide("slow");
    $('#lightend').show("slow");
    $('#sidebarOpen').hide("slow");
    $('#sidebarOpenWhite').show("slow");
    $('.wrapper').css('background','rgb(32,32,32)');
    $('.sidemenu-info').css('background','rgb(32,32,32)');
});

$('#lightend').click(function(){
    $('html').toggleClass("dark");
    $('#darkend').show("slow");
    $('#lightend').hide("slow");
    $('#sidebarOpen').show("slow");
    $('#sidebarOpenWhite').hide("slow");
});

$('#sidebarOpen').click(function(){
    $('.wrapper').show('slow');
    $('#sidebarClose').show('slow');
    $('#sidebarOpen').hide('slow');
});

$('#sidebarOpenWhite').click(function(){
    $('.wrapper').show('slow');
});

$('#sidebarClose').click(function(){
    $('.wrapper').hide('slow');
    $('#sidebarClose').hide('slow');
    $('#sidebarOpen').show('slow');
});
</script>

</body>
</html>

【问题讨论】：

来自java tag description：“Java（不要与 JavaScript 或 JScript 或 JS 混淆）...”。来自javascript tag description：“JavaScript（不要与 Java 混淆）...”

标签： javascript html css

【解决方案1】：

从一个主题切换到另一个主题使用不同的样式标签

示例代码：

(function( ColorThem ) {
  let themes  = document.querySelectorAll('style.theme')
    , current = 0
    ;
  themes.forEach((st, i)=>st.disabled=(i!==current))
    ;
  ColorThem.switch = function( )
    {
    current = ++current % themes.length
    themes.forEach((st, i)=>st.disabled=(i!==current))
    } 
}(window.ColorThem=window.ColorThem || {}));


document.querySelector('#bt-theme-switch').onclick = ColorThem.switch;

/*
document.querySelector('#theme-Light').disabled = true;
document.querySelector('#theme-Dark').disabled = false;
*/

<style class='theme' id='theme-Dark' >
  body { background-color: darkslategrey;}
  p    { color:            yellow;}
</style>

<style class='theme' id='theme-Light' >
  body { background-color:floralwhite;}
  p    { color:           black;}
</style>


<p> some things </p>

<button id="bt-theme-switch"> switch theme </button>

【讨论】：

这很好，但它并没有解决我的菜单图标问题。
@j.k.ells 也许吧，但我无法查看或测试您所说的内容，因为我无法打磨您的图像或您使用的字体

【解决方案2】：

对于图标，您可以使用空 div 并使用具有宽度、高度和背景（图像和位置）属性的 css 设置它们的样式（这样做而不是通过 html 放置图像）。然后在 jquery 中，就像你对其余部分所做的那样，使用点击函数来添加/删除具有其他背景样式的类。

【讨论】：

【解决方案3】：

我不知道，但是这段代码是从@Mister Jojo 重构的，差别不大，我碰巧很难理解他的。

const switchButton = document.getElementById('button-switch')
const themeStyles = document.querySelectorAll('style.theme')

switchButton.addEventListener('click', toggleTheme)
themeStyles[0].disabled = true

function toggleTheme() {
  themeStyles.forEach(x => {
    x.disabled = !x.disabled
  })
}

<style class='theme --dark'>
  body {
    background: black;
    color: white;
  }
</style>

<style class='theme --light'>
  body {
    background: white;
    color: black;
  }
</style>


<p> paragraph </p>
<button id="button-switch"> switch theme </button>

【讨论】：

我的代码只是一个 IIFE developer.mozilla.org/en-US/docs/Glossary/IIFE，用于创建 1 个对象（ ColorThem ），其中一些数据保存在闭包中......没什么特别的，这与所有 jQuery 使用的方法相同，并且其他图书馆