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

refactor: update toggle theme function for better structure and a11y

Browse Source 
Move theme switch js codes in Layout.astro file to external js file (toggle-theme.js). Update
.prettierignore to exclude the new toggle-theme.js file.  Update base.css for new data-theme
attribute.
This commit is contained in:
satnaing
2022-11-26 23:43:27 +06:30
parent 5a67afc6b2
commit 0eeed8e870
4 changed files with 61 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Layout.astro
+1 -39
View File
@@ -61,45 +61,7 @@ const socialImageURL = new URL(
onload="this.onload=null;this.rel='stylesheet'"
/>
<script is:inline>
const primaryColorScheme = "none"; // "light" | "dark" | "none"
const darkModeMediaQuery = window.matchMedia(
"(prefers-color-scheme: dark)"
).matches;
// Get theme data from local storage
const currentTheme = localStorage.getItem("theme");
let theme;
// Set theme to 'theme-dark' if currentTheme is 'dark'
if (currentTheme) {
theme = currentTheme === "dark" ? "theme-dark" : "";
} else {
// If primary color scheme is dark
// or primary color scheme is not set and prefers-color-scheme is dark
// choose dark mode
if (
primaryColorScheme === "dark" ||
(primaryColorScheme === "none" && darkModeMediaQuery)
) {
theme = "theme-dark";
}
// If primary color scheme is light
// choose light mode
else if (primaryColorScheme === "light") {
theme = "";
}
// fallback to prefers-color-scheme
else {
theme = darkModeMediaQuery ? "theme-dark" : "";
}
}
// Put dark class on html tag to enable dark mode
document.querySelector("html").className = theme;
</script>
<script is:inline src="/toggle-theme.js"></script>
</head>
<body>
<slot />
src/styles/base.css
+7 -5
View File
@@ -3,7 +3,8 @@
@tailwind utilities;
@layer base {
:root {
:root,
html[data-theme="light"] {
--color-fill: 251, 254, 251;
--color-text-base: 40, 39, 40;
--color-accent: 0, 108, 172;
@@ -11,7 +12,7 @@
--color-card-muted: 205, 205, 205;
--color-border: 236, 233, 233;
}
.theme-dark {
html[data-theme="dark"] {
--color-fill: 47, 55, 65;
--color-text-base: 230, 230, 230;
--color-accent: 26, 217, 217;
@@ -20,11 +21,11 @@
--color-border: 59, 70, 85;
}
#sun-svg,
.theme-dark #moon-svg {
html[data-theme="dark"] #moon-svg {
display: none;
}
#moon-svg,
.theme-dark #sun-svg {
html[data-theme="dark"] #sun-svg {
display: block;
}
body {
@@ -36,7 +37,8 @@
@apply max-w-3xl mx-auto px-4;
}
a {
@apply outline-offset-1 outline-skin-fill outline-2 focus-visible:outline-dashed focus-visible:no-underline;
@apply outline-offset-1 outline-skin-fill outline-2
focus-visible:outline-dashed focus-visible:no-underline;
}
svg {
@apply w-6 h-6 inline-block fill-skin-base group-hover:fill-skin-accent;