feat: 添加暗色主题支持

- 在HTML根元素添加dark类名以启用暗色模式
- 引入Element Plus暗色主题CSS变量文件
- 格式化代码缩进和结构,提升代码可读性
This commit is contained in:
chenchun
2025-08-04 17:07:01 +08:00
parent 17f9ac6d54
commit 7f4b8f1c8a
2 changed files with 58 additions and 57 deletions

View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="dark">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
@@ -8,9 +9,9 @@
<!-- 为了icp备案--> <!-- 为了icp备案-->
<!-- <title>个人成果展示</title>--> <!-- <title>个人成果展示</title>-->
<link rel="stylesheet" href="/src/assets/loading.css" /> <link rel="stylesheet" href="/src/assets/loading.css" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5453339688995325" <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5453339688995325" crossorigin="anonymous"></script>
crossorigin="anonymous"></script>
</head> </head>
<body> <body>
<div id="Loading"> <div id="Loading">
<div class="loader JS_on"> <div class="loader JS_on">
@@ -42,6 +43,6 @@
} }
// 页面加载完成后再加载聊天组件 // 页面加载完成后再加载聊天组件
window.addEventListener('load', loadChatWidget); window.addEventListener('load', loadChatWidget);
</script> </script>
</html> </html>

View File

@@ -8,7 +8,7 @@ import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
import "element-plus/dist/index.css"; import "element-plus/dist/index.css";
import "./assets/main.css"; import "./assets/main.css";
import "@/assets/styles/index.scss"; // global css import "@/assets/styles/index.scss"; // global css
import 'element-plus/theme-chalk/dark/css-vars.css'
import * as ElementPlusIconsVue from "@element-plus/icons-vue"; import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import directive from "./directive"; // directive import directive from "./directive"; // directive