tiennm99/bonsai
1
0
Fork 0
mirror of https://github.com/tiennm99/bonsai.git synced 2026-09-02 18:18:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: theme-toggle CSS specificity + demo uses initials fallback

Browse Source 
- .theme-toggle svg { display: block } was beating per-class hide rules
  due to higher specificity. Scope the per-class rules under
  .theme-toggle .theme-toggle__sun/moon so they win.
- Remove avatar from exampleSite so the initials fallback renders, which
  inherits the active palette's accent color (sakura -> pink). The static
  avatar.svg was hardcoded vermilion and looked off in non-bonsai
  palettes.
This commit is contained in:
tiennm99
2026-05-03 11:16:02 +07:00
parent 1e7eeb28e9
commit f8d21d49d2
4 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
exampleSite/hugo.toml
+2 -1
View File
@@ -10,7 +10,8 @@ disableKinds = ["taxonomy", "term", "RSS", "sitemap", "404"]
name = "Tien Nguyen"
tagline = "Software engineer · tending small things with care"
bio = "Building tools, writing code, growing a quiet corner of the internet."
avatar = "/images/avatar.svg"
# avatar omitted intentionally so the demo showcases the initials fallback
# (the SVG circle uses the active palette's accent color)
colorTheme = "sakura" # try "bonsai" (default), "sakura", "sumi", "koi"
themeToggle = true
jobTitle = "Software Engineer"
images/screenshot.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 52 KiB

images/tn.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 36 KiB

static/css/bonsai.css
+10 -11
View File
@@ -310,22 +310,21 @@ body {
outline-offset: 2px;
}
.theme-toggle svg { display: block; }
/* Show moon in light, sun in dark.
The button shows the icon for the mode you'll switch TO. */
.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: block; }
The button shows the icon for the mode you'll switch TO.
Per-class rules avoid the specificity battle vs `.theme-toggle svg`. */
.theme-toggle .theme-toggle__sun { display: none; }
.theme-toggle .theme-toggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .theme-toggle__sun { display: block; }
html:not([data-theme="light"]) .theme-toggle__moon { display: none; }
html:not([data-theme="light"]) .theme-toggle .theme-toggle__sun { display: block; }
html:not([data-theme="light"]) .theme-toggle .theme-toggle__moon { display: none; }
}
[data-theme="dark"] .theme-toggle__sun { display: block; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
[data-theme="light"] .theme-toggle__sun { display: none; }
[data-theme="light"] .theme-toggle__moon { display: block; }
[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: block; }
[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }
[data-theme="light"] .theme-toggle .theme-toggle__sun { display: none; }
[data-theme="light"] .theme-toggle .theme-toggle__moon { display: block; }
/* ============================================================
Themes gallery (exampleSite/themes/) — 4 mini bio cards