Question

我正在尝试创建一个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>

Answer 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>

Answer 2

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

Answer 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>

浅色/深色主题切换

3 个答案: