Skip to content

Commit c9cb3c3

Browse files
committed
lab 添加主题切换
1 parent 1e86923 commit c9cb3c3

File tree

3 files changed

+57
-5
lines changed

3 files changed

+57
-5
lines changed

src/components/Message.astro

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,11 @@ if (!index) {
6464
}, 3000);
6565
}
6666

67-
const buttons = document.querySelectorAll(".toastBtn");
68-
buttons.forEach((button) => {
69-
button.addEventListener("click", showToast);
67+
document.addEventListener("astro:page-load", () => {
68+
const buttons = document.querySelectorAll(".toastBtn");
69+
buttons.forEach((button) => {
70+
button.addEventListener("click", showToast);
71+
});
7072
});
7173
</script>
7274

src/pages/lab.astro

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,25 @@ const links = [
4444
</div>
4545
</BaseLayout>
4646

47+
<script>
48+
document.addEventListener("astro:page-load", () => {
49+
const themeToggle = document.getElementById("themeToggle");
50+
themeToggle?.addEventListener("click", () => {
51+
console.log("主题按钮点击");
52+
const theme = document.documentElement.getAttribute("data-theme");
53+
console.log("当前主题为", theme);
54+
55+
if (theme === "dark") {
56+
localStorage.removeItem("data-theme");
57+
document.documentElement.removeAttribute("data-theme");
58+
} else {
59+
localStorage.setItem("data-theme", "dark");
60+
document.documentElement.setAttribute("data-theme", "dark");
61+
}
62+
});
63+
});
64+
</script>
65+
4766
<style>
4867
.content-wrapper {
4968
display: flex;

src/styles/theme.css

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,5 +47,36 @@
4747
--tag-count-color: #888888;
4848
}
4949

50-
/* [data-theme="dark"] {
51-
} */
50+
:root[data-theme="dark"] {
51+
--bg-color: #333333;
52+
--reverse-bg-color: #f0f0f0;
53+
--overlay-color: rgba(0, 0, 0, 0.7);
54+
--desc-color: #a0a0a0;
55+
--tag-bg-color: #2a2a2a;
56+
--tag-border-color: #404040;
57+
--hover-menu-color: #2d2d2d;
58+
--text-color: #c0c0c0;
59+
--menu-text-color: rgba(240, 240, 240, 0.7);
60+
--menu-text-h-color: rgba(240, 240, 240, 0.9);
61+
--menu-bg-color: rgba(40, 40, 40, 0.8);
62+
--menu-border-color: rgba(240, 240, 240, 0.1);
63+
--menu-selected-bg-color: rgba(240, 240, 240, 0.15);
64+
--menu-selected-bg-h-color: rgba(240, 240, 240, 0.2);
65+
--menu-selected-text-color: rgba(240, 240, 240, 1);
66+
--hamburger-shadow-color: rgba(0, 0, 0, 0.5);
67+
--hamburger-shadow-h-color: rgba(0, 0, 0, 0.6);
68+
--hamburger-active-bg-color: #4a4a4a;
69+
--hamburger-active-span-bg-color: #f0f0f0;
70+
--hamburger-sidebar-head-color: #303030;
71+
--card-title-color: #e5e5e5;
72+
--card-text-color: #b0b0b0;
73+
--th-bg-color: #252525;
74+
--media-bg-color: #222222;
75+
--post-card-h-color: rgba(50, 50, 50, 0.6);
76+
--footer-bg-color: #1f1f1f;
77+
--footer-text-color: #909090;
78+
--footer-border-top-color: #303030;
79+
--tag-bg-color: #2a2a2a;
80+
--tag-bg-h-color: #3a3a3a;
81+
--tag-count-color: #999999;
82+
}

0 commit comments

Comments
 (0)