个人中心
gpt4 book ai didi

javascript - 浅色/深色主题切换

转载 作者：行者123 更新时间：2023-11-28 16:49:53 25 4
gpt4 key购买 nike

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

最佳答案

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

示例代码:

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

关于javascript - 浅色/深色主题切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59461180/

25 4 0
文章推荐： javascript - 带滚动条的左/顶部溢出
文章推荐： html - 具有边界折叠替代方案的砖墙
文章推荐： html - 使用交替的文本行制作条纹 div
文章推荐： jquery - 当我缩放此页面时，我使用 j 查询构建了一个 html 页面，一些图像没有响应，右侧图像只能滚动
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com