Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 11:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add light/dark mode functionality

Browse Source
This commit is contained in:
Sat Naing
2022-09-09 00:48:23 +06:30
parent 74efc50049
commit f995485c09
3 changed files with 35 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.astro
+15
View File
@@ -59,3 +59,18 @@
@apply w-6 h-6 fill-skin-base hover:fill-skin-accent; @apply w-6 h-6 fill-skin-base hover:fill-skin-accent;
} }
</style> </style>
<script>
const themeBtn = document.querySelector("#theme-btn");
const htmlClassList = document.querySelector("html")?.classList;
themeBtn?.addEventListener("click", function () {
if (htmlClassList?.contains("theme-dark")) {
localStorage.setItem("theme", "light");
htmlClassList?.remove("theme-dark");
} else {
localStorage.setItem("theme", "dark");
htmlClassList?.add("theme-dark");
}
});
</script>
src/layouts/Layout.astro
+12 -1
View File
@@ -35,8 +35,19 @@ const { title } = Astro.props;
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<script is:inline>
// Get theme data from local storage
const currentTheme = localStorage.getItem("theme");
// Set theme to 'theme-dark' if currentTheme is 'dark'
const theme = currentTheme === "dark" ? "theme-dark" : "";
// Put dark class on html tag to enable dark mode
document.querySelector("html").className = theme;
</script>
</head> </head>
<body> <body class="font-mono bg-skin-fill text-skin-base">
<slot /> <slot />
</body> </body>
</html> </html>
src/styles/base.css
+8
View File
@@ -19,6 +19,14 @@
--color-card: 63, 75, 90; --color-card: 63, 75, 90;
--color-border: 236, 233, 233; --color-border: 236, 233, 233;
} }
#sun-svg,
.theme-dark #moon-svg {
display: none;
}
#moon-svg,
.theme-dark #sun-svg {
display: block;
}
} }
@layer components { @layer components {