html+CSS+JS实现了一个带有主题切换功能（浅色模式和深色模式）的时钟-CSDN博客

本文链接：https://blog.csdn.net/2201_76060199/article/details/142602238

这段代码是一个完整的HTML文档，它实现了一个带有主题切换功能（浅色模式和深色模式）的时钟。以下是代码的详细分析：

<!DOCTYPE html>: 声明文档类型为HTML5。
<html lang="en">: 设置文档语言为英语。
<head>: 包含元数据和样式定义。
- <meta charset="UTF-8">: 设置字符编码为UTF-8。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: 设置视口，以确保页面在移动设备上正确显示。
- <style>: 定义了CSS样式，包括使用CSS变量来定义主题颜色。
- <title>: 设置页面标题为"Theme Clock"。
<body>: 包含页面的主要内容。
- <button class="toggle">Dark mode</button>: 一个按钮，用于切换浅色模式和深色模式。
- <div class="clock-container">: 时钟的容器。
  - <div class="clock">: 时钟表盘。
    - 包含三个指针元素（.hour, .minute, .second）和一个中心点（.center-point）。
  - <div class="time">: 显示当前时间。
  - <div class="date">: 显示当前日期。

全局样式:
- 使用* { box-sizing: border-box; }来确保所有元素的padding和border都包含在元素的总宽度和高度内。
主题颜色:
- 使用CSS变量（--primary-color 和 --secondary-color）来定义主题颜色。
- 根据html元素是否有dark类来切换颜色。
HTML和Body:
- html元素的过渡效果。
- body元素设置为flex布局，用于居中对齐内容，并设置字体和背景。
按钮:
- .toggle按钮样式