From ad6241012a4f260e6ed02e6de4e6131f52274eaa Mon Sep 17 00:00:00 2001 From: Kisechan Date: Thu, 6 Mar 2025 22:33:49 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B7=B1=E8=89=B2=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E6=A0=B7=E5=BC=8F=E4=BB=A5=E6=94=AF=E6=8C=81=E6=B7=B1?= =?UTF-8?q?=E8=89=B2=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/NavBar.vue | 69 +++++++++++++++++++++++++++++++++++++++ src/main.js | 1 + src/style.css | 16 ++++++++- src/views/HomeView.vue | 11 ++++--- src/views/LinksView.vue | 4 +++ 5 files changed, 95 insertions(+), 6 deletions(-) diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue index abb5188..0c9a2e8 100644 --- a/src/components/NavBar.vue +++ b/src/components/NavBar.vue @@ -10,14 +10,29 @@ 首页 博客 友链 + +
+
+ + + + + + +
+
+
\ No newline at end of file diff --git a/src/main.js b/src/main.js index ae6c133..f432199 100644 --- a/src/main.js +++ b/src/main.js @@ -7,6 +7,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue' import './assets/styles/global.css' import '@fortawesome/fontawesome-free/css/all.css'; import 'github-calendar/dist/github-calendar-responsive.css'; +import 'element-plus/theme-chalk/dark/css-vars.css' const app = createApp(App) diff --git a/src/style.css b/src/style.css index f691315..952b6b3 100644 --- a/src/style.css +++ b/src/style.css @@ -7,6 +7,9 @@ color: rgba(255, 255, 255, 0.87); background-color: #242424; + --background-color: #242424; + --text-color: #3d3d3d; + font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; @@ -18,10 +21,16 @@ a { color: #646cff; text-decoration: inherit; } + a:hover { color: #535bf2; } +.dark { + --background-color: #242424; + --text-color: rgb(228, 228, 228); +} + body { margin: 0; display: flex; @@ -42,7 +51,8 @@ button { font-size: 1em; font-weight: 500; font-family: inherit; - background-color: #1a1a1a; + background-color: var(--background-color); + color: var(--text-color); cursor: pointer; transition: border-color 0.25s; } @@ -77,3 +87,7 @@ button:focus-visible { background-color: #f9f9f9; } } + +p,a,h1,h2,h3,h4,h5,h6 { + color: var(--text-color); +} \ No newline at end of file diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 919e05a..aa40e46 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -226,7 +226,7 @@ onUnmounted(() => { } .social-icons a { - color: #303133; + color: var(--text-color); margin: 0 10px; font-size: 24px; transition: color 0.3s ease, transform 0.3s ease; @@ -279,7 +279,7 @@ onUnmounted(() => { .blog-title { font-size: 1.2em; font-weight: bold; - color: #303133; + color: var(--text-color); text-decoration: none; margin-left: 10px; } @@ -292,7 +292,7 @@ onUnmounted(() => { display: flex; align-items: center; font-size: 0.9em; - color: #606266; + color: var(--text-color); } .update-time, @@ -300,11 +300,12 @@ onUnmounted(() => { display: flex; align-items: center; margin-right: 20px; + color: var(--text-color); } .icon { margin-right: 5px; - color: #909399; + color: var(--text-color); } .tag { @@ -344,7 +345,7 @@ onUnmounted(() => { } .read-more-icon { - color: #409eff; + color: var(--text-color); transition: transform 0.3s ease; } diff --git a/src/views/LinksView.vue b/src/views/LinksView.vue index 4c5345b..f4c7104 100644 --- a/src/views/LinksView.vue +++ b/src/views/LinksView.vue @@ -209,4 +209,8 @@ h1 { align-items: center; gap: 10px; } + +.link-content { + color: var(--text-color); +}