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);
+}