I am trying to create an HTML page that on a button click, the theme changes from dark to light.
The issue I have is with the menu icons. If you change to dark theme, and then open and close the menu, the light and dark theme menu icon show or the pop out menu won't have anything displayed inside of it, even the menu icon to close the menu.
Am I doing something wrong here?
<!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>
