24 主题切换

  • 开发
  • 27

效果演示

24-主题切换.gif

实现了一个主题切换功能，当用户点击主题切换按钮时，背景颜色和文字颜色会随之改变，同时主体内容的背景颜色会从暗色变为浅色，文字颜色会从黑色变为白色。当用户再次点击主题切换按钮时，背景颜色和文字颜色会再次改变，同时主体内容的背景颜色会从浅色变为暗色，文字颜色会从白色变为黑色。

Code

<div class="page">
  <!--Theme switch-->
  <input type="checkbox" id="themeSwitch" name="theme-switch" class="theme-switch__input" />
  <label for="themeSwitch" class="theme-switch__label">
    <span>Switch theme</span>
  </label>

  <!--Main page content-->
  <main>
    <div class="wrapper">
      <h1>CSS Theme Switcher</h1>
      <p>Switch from light to dark mode using the toggle.</p>
    </div>
  </main>
</div>

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Merriweather:400,400i,700");
* {
   
  box-sizing: border-box;
}

body {
   
  font-family: Merriweather, serif;
}

label,
main {
   
  background: var(--bg, white);
  color: var(--text, black);
}

main {
   
  --gradDark: hsl(144, 100%, 89%);
  --gradLight: hsl(42, 94%, 76%);
  background: linear-gradient(to bottom, var(--gradDark), var(--gradLight));
  padding: 120px 40px 40px 40px;
  min-height: 100vh;
  text-align: center;
}

.wrapper {
   
  max-width: 700px;
  margin: 0 auto;
}

.theme-switch__input:checked ~ main,
.theme-switch__input:checked ~ label {
   
  --text: white;
}

.theme-switch__input:checked ~ main {
   
  --gradDark: hsl(198, 44%, 11%);
  --gradLight: hsl(198, 39%, 29%);
}

.theme-switch__input,
.theme-switch__label {
   
  position: absolute;
  z-index: 1;
}

.theme-switch__input {
   
  opacity: 0;
}
.theme-switch__input:hover + .theme-switch__label, .theme-switch__input:focus + .theme-switch__label {
   
  background-color: lightSlateGray;
}
.theme-switch__input:hover + .theme-switch__label span::after, .theme-switch__input:focus + .theme-switch__label span::after {
   
  background-color: #d4ebf2;
}

.theme-switch__label {
   
  padding: 20px;
  margin: 60px;
  transition: background-color 200ms ease-in-out;
  width: 120px;
  height: 50px;
  border-radius: 50px;
  text-align: center;
  background-color: slateGray;
  box-shadow: -4px 4px 15px inset rgba(0, 0, 0, 0.4);
}
.theme-switch__label::before, .theme-switch__label::after {
   
  font-size: 2rem;
  position: absolute;
  transform: translate3d(0, -50%, 0);
  top: 50%;
}
.theme-switch__label::before {
   
  content: "☼";
  right: 100%;
  margin-right: 10px;
  color: orange;
}
.theme-switch__label::after {
   
  content: "☾";
  left: 100%;
  margin-left: 10px;
  color: lightSlateGray;
}
.theme-switch__label span {
   
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 100%;
}
.theme-switch__label span::after {
   
  position: absolute;
  top: calc(100% + 15px);
  left: 5px;
  width: 40px;
  height: 40px;
  content: "";
  border-radius: 50%;
  background-color: lightBlue;
  transition: transform 200ms, background-color 200ms;
  box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.4);
}

.theme-switch__input:checked ~ .theme-switch__label {
   
  background-color: lightSlateGray;
}
.theme-switch__input:checked ~ .theme-switch__label::before {
   
  color: lightSlateGray;
}
.theme-switch__input:checked ~ .theme-switch__label::after {
   
  color: turquoise;
}
.theme-switch__input:checked ~ .theme-switch__label span::after {
   
  transform: translate3d(70px, 0, 0);
}

实现思路拆分

@charset "UTF-8"; // 设置字符编码为UTF-8
@import url("https://fonts.googleapis.com/css?family=Merriweather:400,400i,700"); // 导入字体样式

这两行代码分别设置了字符编码和导入字体样式。

* {
   
  box-sizing: border-box;
}

这行代码设置了所有元素的盒模型为border-box，这样可以让元素的宽度和高度包括内容、内边距和边框，而不是只包括内容和内边距。

body {
   
  font-family: Merriweather, serif;
}

这行代码设置了整个页面的字体为Merriweather，如果该字体不存在，则会使用serif字体。

label,
main {
   
  background: var(--bg, white);
  color: var(--text, black);
}

这段代码设置了label和main元素的背景和文字颜色，如果没有设置–bg和–text变量，则默认使用白色和黑色。

main {
   
  --gradDark: hsl(144, 100%, 89%);
  --gradLight: hsl(42, 94%, 76%);
  background: linear-gradient(to bottom, var(--gradDark), var(--gradLight));
  padding: 120px 40px 40px 40px;
  min-height: 100vh;
  text-align: center;
}

这段代码设置了main元素的背景颜色为渐变色，使用了CSS变量–gradDark和–gradLight来设置渐变色的深色和浅色。同时，设置了main元素的内边距、最小高度和文本对齐方式。

.wrapper {
   
  max-width: 700px;
  margin: 0 auto;
}

这段代码设置了页面中的wrapper元素的最大宽度和水平居中。

.theme-switch__input:checked ~ main,
.theme-switch__input:checked ~ label {
   
  --text: white;
}

这段代码设置了当主题切换按钮被选中时，main元素和label元素的文字颜色变为白色。

.theme-switch__input:checked ~ main {
   
  --gradDark: hsl(198, 44%, 11%);
  --gradLight: hsl(198, 39%, 29%);
}

这段代码设置了当主题切换按钮被选中时，main元素的背景颜色变为浅色。

.theme-switch__input,
.theme-switch__label {
   
  position: absolute;
  z-index: 1;
}

这段代码设置了主题切换按钮的位置为绝对定位，并且设置了z-index为1，以确保它在其他元素之上。

.theme-switch__input {
   
  opacity: 0;
}

这段代码设置了主题切换按钮的透明度为0，以确保它不会显示出来。

.theme-switch__input:hover +.theme-switch__label,.theme-switch__input:focus +.theme-switch__label {
   
  background-color: lightSlateGray;
}

这段代码设置了当鼠标悬停在主题切换按钮上或者获得焦点时，label元素的背景颜色变为浅色。

.theme-switch__input:hover +.theme-switch__label span::after,.theme-switch__input:focus +.theme-switch__label span::after {
   
  background-color: #d4ebf2;
}

这段代码设置了当鼠标悬停在主题切换按钮上或者获得焦点时，label元素的span元素的背景颜色变为浅色。

.theme-switch__label {
   
  padding: 20px;
  margin: 60px;
  transition: background-color 200ms ease-in-out;
  width: 120px;
  height: 50px;
  border-radius: 50px;
  text-align: center;
  background-color: slateGray;
  box-shadow: -4px 4px 15px inset rgba(0, 0, 0, 0.4);
}

这段代码设置了label元素的样式，包括背景颜色、内边距、边框半径、文本对齐方式和阴影效果。

.theme-switch__label::before,.theme-switch__label::after {
   
  font-size: 2rem;
  position: absolute;
  transform: translate3d(0, -50%, 0);
  top: 50%;
}

这段代码设置了label元素的伪元素的样式，包括字体大小、位置、垂直居中和3D变换。

.theme-switch__label::before {
   
  content: "☼";
  right: 100%;
  margin-right: 10px;
  color: orange;
}

这段代码设置了label元素的伪元素的样式，包括内容、右对齐、右边距和颜色。

.theme-switch__label::after {
   
  content: "☾";
  left: 100%;
  margin-left: 10px;
  color: lightSlateGray;
}

这段代码设置了label元素的伪元素的样式，包括内容、左对齐、左边距和颜色。

.theme-switch__label span {
   
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 100%;
}

这段代码设置了label元素的span元素的样式，包括绝对定位、底部对齐、宽度和底部边距。

.theme-switch__label span::after {
   
  position: absolute;
  top: calc(100% + 15px);
  left: 5px;
  width: 40px;
  height: 40px;
  content: "";
  border-radius: 50%;
  background-color: lightBlue;
  transition: transform 200ms, background-color 200ms;
  box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.4);
}

这段代码设置了label元素的span元素的伪元素的样式，包括绝对定位、顶部对齐、宽度、高度、内容、边框半径、背景颜色、过渡效果和阴影效果。

.theme-switch__input:checked ~.theme-switch__label {
   
  background-color: lightSlateGray;
}

这段代码设置了当主题切换按钮被选中时，label元素的背景颜色变为浅色。

.theme-switch__input:checked ~.theme-switch__label::before {
   
  color: lightSlateGray;
}

这段代码设置了当主题切换按钮被选中时，label元素的伪元素的颜色变为浅色。

.theme-switch__input:checked ~.theme-switch__label::after {
   
  color: turquoise;
}

这段代码设置了当主题切换按钮被选中时，label元素的伪元素的颜色变为绿色。

.theme-switch__input:checked ~.theme-switch__label span::after {
   
  transform: translate3d(70px, 0, 0);
}

这段代码设置了当主题切换按钮被选中时，label元素的span元素的伪元素向右移动70px。

阅读全部

相关推荐

  3. CSS_scss切换主题

    2024-01-09 04:30:01       10 阅读

  5. 前端点击切换样式/切换主题

    2024-01-09 04:30:01       19 阅读

  8. css前端主题切换方案(三种)

    2024-01-09 04:30:01       30 阅读

  10. 前端主题切换的多种方式

    2024-01-09 04:30:01       10 阅读

最近更新

  4. TCP协议是安全的吗?

    2024-01-09 04:30:01       16 阅读

  12. 阿里云服务器执行yum，一直下载docker-ce-stable失败

    2024-01-09 04:30:01       16 阅读

  13. 【Python教程】压缩PDF文件大小

    2024-01-09 04:30:01       15 阅读

  18. 通过文章id递归查询所有评论（xml）

    2024-01-09 04:30:01       18 阅读

热门阅读

  4. kotlin 单例

    2024-01-09 04:30:01       37 阅读

  6. Android开发 基于ARouter开源的路由框架的YmRouter

    2024-01-09 04:30:01       38 阅读

  7. 与AI合作 -- 写一个modern c++单例工厂2

    2024-01-09 04:30:01       45 阅读

  9. 优化改进YOLOv5算法之AKConv（可改变核卷积），即插即用的卷积，效果秒杀DSConv

    2024-01-09 04:30:01       39 阅读

  11. 检查unity打包IOS包含dlopen的块

    2024-01-09 04:30:01       30 阅读

  17. 面试经典150题(72-77)

    2024-01-09 04:30:01       34 阅读

  22. 解决Oracle执行SQL报错SQL 错误 [12704] [72000]: ORA-12704: 字符集不匹配的问题

    2024-01-09 04:30:01       50 阅读

  23. React Hooks之useState、useRef

    2024-01-09 04:30:01       50 阅读

  25. Mysql 中的常用命令

    2024-01-09 04:30:01       33 阅读

  27. 了解一下InternLM2

    2024-01-09 04:30:01       36 阅读

  29. linux 设备模型之类

    2024-01-09 04:30:01       29 阅读

  30. 复杂度分析-时间复杂度和空间复杂度

    2024-01-09 04:30:01       32 阅读