实训综合运用 3

介绍

. 主题切换是指在 Web 应用中动态更改界面外观或样式的一种功能

. 通常用于实现暗黑模式、皮肤切换等场景

特点

. 改善用户体验

. 要精心、显式的指定主题色

方法

. 修改类名

. 修改属性

. 动态加载 CSS 文件

. 其它

换肤数据

. 两套 CSS 变量，条件发生时，从一套数据切换到另一套数据

:root {
  --bg-color: #fff;
  --txt-color: #000;
  // 其它内容...
}

// 类形式
.dark-theme {
  --bg-color: #000;
  --txt-color: #fff;
}

// 自定义属性形式 data-
[data-theme="dark"] {
  --bg-color: #000;
  --txt-color: #fff;
}

body {
  background-color: var(--bg-color);
  color: var(--txt-color);
  height: 100vh;
}

UI 实现

. 事件触发：可以操作 <html> 也可以操作 <body>

. 纯 CSS 实现：利用多选按钮 checkbox 的选择属性配合特定的选择器模拟事件

仓库实现

. 应结合不同的 UI 实现设计对应的仓库

实现1 事件触发

. 单击换肤元素：更改换肤元素的类；更改 <body> 的类

. 对结构没有特别要求

. 通过精心设计 .active 丰富 UI 效果

theme.onclick = function () {
  // 触发主题元素特效
  theme.classList.toggle("active");
  // 触发背景伪元素特效
  document.body.classList.toggle("dark-mode");
};

. 背景过渡动画 - 不要显式指定过渡属性 clip-path，使用默认的 All

body::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--bg-color);
  z-index: -1;
  clip-path: circle(0% at 100% 0%);
  transition: 0.5s ease-in-out;
}

body.dark-theme::before {
  clip-path: circle(100%);
}

实现2 纯 CSS：利用多选按钮 checkbox 的选择属性 checked 配合特定的选择器模拟事件

. 对结构有要求

. 隐藏 <input>；选中时，.theme-icon从左侧移动到右侧

. 也可以使用 .theme-btn 的伪元素代替 .theme-icon

<input type="checkbox" id="theme" class="theme" hidden>
<div class="theme-wrap">
    <span class="iconfont icon-Sun"></span>
    <label for="theme" class="theme-btn">
        <div class="theme-icon"></div>
    </label>
    <span class="iconfont icon-Moon-Star"></span>
</div>

. <body>如果检测到 <input> 是选中状态，则更新/替换 CSS 变量

body:has(.theme:checked) {
    --main-bg-color: #000;
    --main-txt-color: #f7f7f7;
}

主题切换

Theme