xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加暗色主题支持

Browse Source 
- 在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
Download Patch File Download Diff File Expand all files Collapse all files

85
Yi.Bbs.Vue3/index.html
View File

@@ -1,47 +1,48 @@
<!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>
<div id="Loading">
<div class="loader JS_on">
<span class="binary"></span>
<span class="binary"></span>
<span class="getting-there">意社区很大，你要等一下...</span>
</div>
</div>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
<!-- 引入聊天组件脚本 --> <body>
<script async src="https://opendeep.wiki/koala-chat-widget.js"></script> <div id="Loading">
<script> <div class="loader JS_on">
function loadChatWidget() { <span class="binary"></span>
KoalaChatWidget.init({ <span class="binary"></span>
appId: 'ccnetcore', <span class="getting-there">意社区很大，你要等一下...</span>
title: 'ccnetcore', </div>
theme: 'light', // 或 'dark' </div>
// 其他可选配置... <div id="app"></div>
onError: (error) => { <script type="module" src="/src/main.js"></script>
console.error('Chat widget error:', error); </body>
},
onValidationFailed: (domain) => { <!-- 引入聊天组件脚本 -->
console.error('Domain validation failed:', domain); <script async src="https://opendeep.wiki/koala-chat-widget.js"></script>
} <script>
}); function loadChatWidget() {
} KoalaChatWidget.init({
// 页面加载完成后再加载聊天组件 appId: 'ccnetcore',
window.addEventListener('load', loadChatWidget); title: 'ccnetcore',
theme: 'light', // 或 'dark'
</script> // 其他可选配置...
</html> onError: (error) => {
console.error('Chat widget error:', error);
},
onValidationFailed: (domain) => {
console.error('Domain validation failed:', domain);
}
});
}
// 页面加载完成后再加载聊天组件
window.addEventListener('load', loadChatWidget);
</script>
</html>

30
Yi.Bbs.Vue3/src/main.js
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,17 +16,17 @@ 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);
} }
const pinia = createPinia(); const pinia = createPinia();
pinia.use(piniaPluginPersistedstate); pinia.use(piniaPluginPersistedstate);
app.use(pinia); app.use(pinia);
directive(app); directive(app);
app.use(router); app.use(router);
app.use(VueLuckyCanvas); app.use(VueLuckyCanvas);
await router.isReady(); await router.isReady();
app.mount("#app"); app.mount("#app");
})(); })();