stackoom
  简体   繁体   中英

Light/Dark Theme Toggle

 原文  2019-12-23 20:51:48  6   3    javascript/ html/ css

Question

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>

3 answers

solution1
 1  2019-12-23 22:35:33

to switch from one theme to another use different style tag

sample code: 

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

solution2
 0  2019-12-23 21:20:18

For icons, you can use empty divs and style them with css with width, height and background (image and position) attributes (do this instead of putting the images via html). Then in the jquery, as you did for the rest, use on click functions to add/remove a class that has another background styling.

solution3
 0  2019-12-24 00:17:07

I don't know but this code is refactored from @Mister Jojo, not quite what's the difference, I happened to find a hard time understand his. 

 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Replace select tag with a check box to toggle between dark and light theme How do I force Update my components in my react code to toggle dark theme to light theme React light/dark mode toggle Light mode dark mode toggle I have a light/dark theme toggle react component that I'm trying to improve How can I use localStorage to make the browser remember a classlist toggle state for a light/dark mode theme switch? How do you toggle between light and dark themes while current theme is being locally stored? How to override css for Dark/Light Mode Toggle? How to save cookies for Dark/Light Mode Toggle? How to create a Light/Dark function in a toggle button
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM