Awesome Login Pages中的暗黑模式实现：完整代码解析

Awesome Login Pages中的暗黑模式实现：完整代码解析

【免费下载链接】awesome-login-pagesThis repository consist of many login page example, whch can be used for any web or hybrid app developement.项目地址: https://gitcode.com/gh_mirrors/aw/awesome-login-pages

GitHub 加速计划 / aw / awesome-login-pages 是一个包含多种登录页面示例的开源项目，可用于任何Web或混合应用开发。本文将详细解析该项目中暗黑模式的实现方法，帮助开发者快速掌握这一实用功能。

暗黑模式实现的核心原理

暗黑模式（Dark Mode）是一种高对比度的界面设计模式，通过深色背景配合浅色文字，有效减少屏幕亮度，降低视觉疲劳。在 Awesome Login Pages 项目中，暗黑模式的实现主要依赖于 CSS 变量和 JavaScript 切换逻辑的结合。

1. CSS 变量定义

项目采用 CSS 自定义属性（变量）来统一管理不同模式下的样式值。在Loginform with dark mode and animation/index.html文件中，通过.container:not(.dark)和.container.dark两个选择器定义了两套主题变量：

.container:not(.dark) { --background: #fcfbfe; --color:#323133; --sectionBackground: #ffffff; --borderColor: #e9e9e9; --text1:#323133; --text2:#3C3B3D; --shadow:rgba(0,0,0,0.1); --iconColor:#03e9f4; } .container.dark { --background: #1C1B20; --color:#F5F7FA; --sectionBackground: #222126; --borderColor: #252429; --text1:#F5F7FA; --text2:#E6E9ED; --shadow:rgba(0,0,0,0.1); --iconColor:#03e9f4; }

这种方式的优势在于：

• 集中管理主题样式，便于维护和扩展
• 支持动态切换，只需修改根元素的类名
• 减少重复代码，提高开发效率

2. 模式切换按钮设计

在登录页面中，右下角设计了一个悬浮的模式切换按钮，使用 Font Awesome 的月亮/太阳图标直观表示当前模式：

<div class="darkmode inner-card fas fa-moon-cloud"></div>

按钮样式通过 CSS 实现了发光效果和悬停动画，增强用户交互体验：

.container .darkmode { position: fixed; bottom: 1rem; left: 1rem; font-size: 1.75rem; padding: 1rem; border-radius: 100%; border-color: var(--iconColor) !important; box-shadow: 0 0 1rem -0.25rem var(--iconColor), inset 0 0 1rem -0.75rem var(--iconColor); color: var(--iconColor); cursor: pointer; transition: .25s -.05s; }

实现暗黑模式切换的完整代码

1. HTML 结构

在登录表单页面中，需要添加模式切换按钮和主题容器：

<div id="container" class="container"> <!-- 页面内容 --> <div class="darkmode inner-card fas fa-moon-cloud"></div> </div> <div class="clip"></div>

2. JavaScript 切换逻辑

模式切换的核心逻辑在Loginform with dark mode and animation/function.js文件中实现，主要功能包括：

• 点击按钮时触发模式切换
• 使用过渡动画提升用户体验
• 保存滚动位置，确保切换后页面位置不变

let buttonenabled = true, scroll = 0; $(document).on("click", ".darkmode", function(){ if(!buttonenabled) return; buttonenabled = false; // 创建过渡动画元素 $(".clip").html($("body >.container")[0].outerHTML); scrollbind($(".clip .container")); // 切换暗黑模式类 $(".clip .container").toggleClass("dark").scrollTop(scroll); // 切换图标 $(".clip .darkmode").toggleClass("fa-moon").toggleClass("fa-sun"); // 添加动画类 $(".clip").addClass("anim"); // 动画结束后替换内容 setTimeout(function(){ $("body >.container").replaceWith($(".clip").html()) scrollbind($("body >.container")); $("body >.container").scrollTop(scroll); $(".clip").html("").removeClass("anim"); buttonenabled = true; }, 1000); }); // 绑定滚动事件保存位置 const scrollbind = el => el.bind("scroll", function(){ scroll = $(this).scrollTop(); if($(".container").length > 1) $(".container").scrollTop(scroll); }); scrollbind($(".container"));

3. 平滑过渡动画

为了让模式切换更加自然，项目使用 CSSclip-path属性实现了圆形扩散的过渡效果：

.clip { z-index: 2; position: fixed; bottom: 3rem; left: 3rem; width: 0rem; height: 0rem; border-radius: 100%; } .clip.anim { animation: open 1.5s ease-in; } @keyframes open { 0% { bottom: 3rem; left: 3rem; width: 0rem; height: 0rem; clip-path: circle(0rem at center); } 100% { bottom: calc(-250vmax + 3rem); left: calc(-250vmax + 3rem); width: 500vmax; height: 500vmax; clip-path: circle(100% at center); } }

暗黑模式效果展示

桌面端暗黑模式

下面是桌面设备上的暗黑模式登录界面效果，展示了深色背景与蓝色强调色的搭配：


移动端暗黑模式

移动端适配同样保持了暗黑模式的一致性，界面元素比例和交互方式针对小屏幕进行了优化：


如何在项目中应用暗黑模式

要在自己的登录页面项目中应用这种暗黑模式实现，可以按照以下步骤操作：

1. 克隆项目：

   git clone https://gitcode.com/gh_mirrors/aw/awesome-login-pages

2. 复制核心文件：

   • 复制Loginform with dark mode and animation/index.html中的 CSS 变量定义
   • 复制Loginform with dark mode and animation/function.js到自己的项目
   • 添加模式切换按钮的 HTML 结构

3. 自定义主题颜色： 根据项目需求修改 CSS 变量中的颜色值，定义自己的亮色/暗色主题

4. 调整动画效果： 修改@keyframes open中的参数可以调整过渡动画的速度和范围

总结

Awesome Login Pages 项目中的暗黑模式实现采用了现代化的 CSS 变量和 JavaScript 结合的方式，既保证了代码的可维护性，又提供了流畅的用户体验。通过本文的解析，开发者可以快速掌握这一功能的实现原理，并应用到自己的项目中。

这种实现方式的优势在于：

• 使用 CSS 变量实现主题集中管理
• 平滑过渡动画提升用户体验
• 响应式设计确保多设备兼容
• 代码简洁，易于理解和扩展

希望本文对您理解和实现暗黑模式有所帮助！

【免费下载链接】awesome-login-pagesThis repository consist of many login page example, whch can be used for any web or hybrid app developement.项目地址: https://gitcode.com/gh_mirrors/aw/awesome-login-pages