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

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/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;