18Blogger网页架构设计-添加暗黑(深色)模式

arsncao 七月 31, 2023

暗黑(深色)模式已被许多流行的网站和应用程序使用，在我们自己的网站上引用这样的功能，使我们的阅读者轻松舒适，增加使用体验的好感度，我在本教程中重点介绍怎样使用 CSS 和脚本在博客博客中添加暗模式或深色模式的切换功能。




本文索引


第 1 步 - 使用深色模式的好处，科普深色模式的原理


相比暗黑模式而言，没有暗模式的网站就好比将手电筒对准了我们的眼睛，感觉很不舒服；众所周知，黑暗模式减少了进入眼睛的光线量，最大限度地让眼睛减轻了疲劳，并有助于更好的睡眠质量；此外，光亮的减少，从而节省更多的能源；因此，暗黑模式已经成为了优秀网站的一个趋势。





第 2 步 - 加入 Jquery 文件和 CSS 代码


如果博客里面没有 Jquery ，就必须加入，已经加了就不要重复加；加的位置是 <head> 与</head>之间。然后，把下面的 CSS 代码加入到 <head> 与</head>之间。

<style type='text/css'>
/* Button Dark Mode */
.modedark {
display: inline-block;
float: right;
margin-top: 3px;
position: fixed;
right: 30%;
top: 2px;
z-index: 999;
border-radius: 100px;
background: rgba(0, 0, 0, .1) radial-gradient(circle, transparent 2%, rgba(0, 0, 0, .1) 2%) center/15000%;
}
.modedark svg {
width: 24px;
height: 24px;
vertical-align: -5px;
background-repeat: no-repeat !important;
content: ''
}
.modedark svg path {
fill: #fff;
}
.modedark .check:checked~.NavMenu {
opacity: 1;
visibility: visible;
top: 45px;
min-width: 200px;
transition: all .3s ease;
z-index: 2;
}
.iconmode {
cursor: pointer;
display: block;
padding: 8px;
background-position: center;
transition: all .5s linear;
}
.iconmode:hover {
border-radius: 100px;
background: rgba(0, 0, 0, .5) radial-gradient(circle, transparent 2%, rgba(0, 0, 0, .5) 2%) center/15000%;
}
.check {
display: none;
}
.modedark .iconmode .openmode {
display: block;
}
.modedark .iconmode .closemode {
display: none;
}
.modedark .check:checked~.iconmode .openmode {
display: none;
}
.modedark .check:checked~.iconmode .closemode {
display: block;
}
/*----- Start adding Elements From here outer-wrapper-----*/
// Below are some samples only
// Start with .nightmode followed by element(class or id) {their_properties}
.Night {
background:#15202B;
color:rgba(255,255,255,.7)
}
.Night .post-snippet-link,
.Night a,
.Night .headline,
.Night h1,
.Night h2,
.Night h3,
.Night p,
.Night .BlogSearch .search-input,
.Night .BlogSearch .search-action,
.Night .contact-form-name,
.Night .contact-form-email,
.Night .contact-form-email-message,
.Night .contact-form-button-submit,
.Night #outer-wrapper,
.Night #nav-social ul li a,
.Night #main-menu ul li a,
.Night #widget-title h3,
.Night .index-post,
.Night .grid-posts,
.Night h2.post-title a,
.Night #post-item-content,
.Night #post-title a,
.Night #ArchiveList .flat li a,
.Night #ArchiveList .flat li > a > span,
.Night .list-label ul li a,
.Night .list-label .label-count,
.Night #related-wrap,
.Night .slide-menu-toggle,
.Night .mobile-menu,
.Night .mobile-menu ul li a,
.Night .techirshloader,
.Night .techirshloader a,
.Night .sub-footer-wrapper,
.Night .comments,
.Night .post-body div{
background:#323232; color:#fff!important
}
/* --- Add More Elements ---.FeaturedPost .post-title a .PopularPosts .post-title a */
</style>



第 3 步 - 加入切换按钮


下面是一段HTML文本，功能是制作暗黑模式的切换按钮，这段代码放置在 <body> 与</body>之间。

<div class='modedark'>
<input class='check' id='modedark' title='Mode Dark' type='checkbox'/>
<label class='iconmode' for='modedark'>
<svg class='openmode' viewBox='0 0 24 24'>
<path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/>
</svg>
<svg class='closemode' viewBox='0 0 24 24'>
<path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/>
</svg>
</label>
</div>



第 4 步 - 加入JS代码



下面的代码是JS，功能是实现暗黑模式的切换，这段代码放置的位置是在 <body> 与</body>之间。

<script type='text/javascript'>
/* Night Mode/Dark Mode Feature - By TwistBlogg.com */
/* Keep the Credit Intact */
$(document).ready(function(){
$("body").toggleClass(localStorage.toggled),
$("#modedark").on("click",function(){
"Night"!=localStorage.toggled?($("body").toggleClass("Night",!0),localStorage.toggled="Night",
$(".section-center").css("display","block")):($("body").toggleClass("Night",!1),
localStorage.toggled="",$(".section-center").css("display",""))
}),
$("body").hasClass("Night")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)
});
</script>


油管频道👉 https://bit.ly/2XNfakc 看最新视频，白嫖最新节点！

请朋友们优先使用订阅，特别是手机用户，更方便更快捷！




发表评论

0 评论

发表评论