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,17 +1,18 @@
<!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" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>.Net意社区</title> <title>.Net意社区</title>
<!-- 为了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">
<span class="binary"></span> <span class="binary"></span>
@@ -21,11 +22,11 @@
</div> </div>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
<!-- 引入聊天组件脚本 --> <!-- 引入聊天组件脚本 -->
<script async src="https://opendeep.wiki/koala-chat-widget.js"></script> <script async src="https://opendeep.wiki/koala-chat-widget.js"></script>
<script> <script>
function loadChatWidget() { function loadChatWidget() {
KoalaChatWidget.init({ KoalaChatWidget.init({
appId: 'ccnetcore', appId: 'ccnetcore',
@@ -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
@@ -16,7 +16,7 @@ import VueLuckyCanvas from '@lucky-canvas/vue'
import "./permission"; import "./permission";
(async () => { (async() => {
const app = createApp(App); const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component); app.component(key, component);