MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 2 Pull Requests Actions Packages Releases 1 Activity

Replace light/dark switch with sun/moon icon button
Some checks failed
Repo Health / Access control (push) Failing after 2s
Details
Repo Health / Release configuration (push) Has been skipped
Details
Repo Health / Scripts governance (push) Has been skipped
Details
Repo Health / Repository health (push) Has been skipped
Details

Browse Source 
- Remove toggle switch, Light/Dark labels, knob/track CSS
- Single button with sun (light) and moon (dark) FA icons
- Icons cross-fade with rotation transition on theme change
- Compact circular button matches FAB aesthetic
- Removed duplicate old switch CSS rules

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-04-14 21:43:28 -05:00
parent 4e66562958
commit 2a7c173f7b
2 changed files with 65 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/media/css/template.css
View File

@@ -17064,7 +17064,7 @@ form .form-select {
display: flex;
align-items: center;
gap: .5rem;
padding: calc(var(--padding-x, 0.25rem) * 2) calc(var(--padding-y, 0.25rem) * 3) calc(var(--padding-x, 0.25rem) * 2) calc(var(--padding-y, 0.25rem) * 8);
padding: .4rem .6rem;
border-radius: 999px;
border: none;
background: var(--muted-color, #6d757e);
@@ -17094,46 +17094,47 @@ form .form-select {
top: 1rem;
}
#mokoThemeFab .switch {
display: inline-flex;
/* Sun/Moon theme toggle button */
.theme-icon-btn {
display: flex;
align-items: center;
position: relative;
width: 44px;
height: 24px;
background: var(--secondary-color, #e6ebf1bf);
transition: background .2s, border-color .2s;
border-radius: var(--border-radius-xxl, 2rem);
}
#mokoThemeFab .knob {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
border-radius: var(--border-radius-xxl, 2rem);
background: var(--bs-body-bg, #fff);
box-shadow: var(--box-shadow, 0 .5rem 1rem #00000066);
transition: transform .2s ease;
}
#mokoThemeFab [role="switch"][aria-checked="true"] .knob {
transform: translateX(20px);
}
#mokoThemeFab [role="switch"][aria-checked="true"] .switch {
background: rgba(var(--secondary-color, #e6ebf1bf), .15);
}
button#mokoThemeSwitch {
border: unset;
background-color: unset;
}
#mokoThemeFab .label {
user-select: none;
font-size: .875rem;
justify-content: center;
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: rgba(255,255,255,.15);
color: #fff;
font-size: 1.1rem;
cursor: pointer;
padding: 0;
position: relative;
}
.theme-icon-btn .fa-sun,
.theme-icon-btn .fa-moon {
position: absolute;
transition: opacity .2s, transform .2s;
}
/* Light mode: show sun, hide moon */
.theme-icon-btn.is-light .fa-sun {
opacity: 1;
transform: rotate(0deg);
}
.theme-icon-btn.is-light .fa-moon {
opacity: 0;
transform: rotate(-90deg);
}
/* Dark mode: show moon, hide sun */
.theme-icon-btn.is-dark .fa-moon {
opacity: 1;
transform: rotate(0deg);
}
.theme-icon-btn.is-dark .fa-sun {
opacity: 0;
transform: rotate(90deg);
}
/* Auto toggle switch (on/off style) */
@@ -17357,37 +17358,6 @@ body.site.error-page {
text-decoration: none;
}
#mokoThemeFab .knob {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
border-radius: var(--border-radius-xxl, 2rem);
background: var(--bs-body-bg, #fff);
box-shadow: var(--box-shadow, 0 .5rem 1rem #00000066);
transition: transform .2s ease;
}
#mokoThemeFab [role="switch"][aria-checked="true"] .knob {
transform: translateX(20px);
}
#mokoThemeFab [role="switch"][aria-checked="true"] .switch {
background: rgba(var(--secondary-color, #e6ebf1bf), .15);
}
button#mokoThemeSwitch {
border: unset;
background-color: unset;
}
#mokoThemeFab .label {
user-select: none;
font-size: .875rem;
color: #fff;
}
#mokoThemeFab.debug-outline {
outline: 2px dashed var(--pink, #ff8fc0);
outline-offset: 2px;