melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust github and theme toggle icon sizes

Browse Source
This commit is contained in:
mkelvers
2026-04-25 21:56:58 +02:00
parent b500e01498
commit 431acf6055
2 changed files with 53 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
static/theme.ts
View File

@@ -9,11 +9,11 @@ const getSavedTheme = (): Theme => {
}
const applyTheme = (theme: Theme): void => {
const html = document.documentElement
html.setAttribute('data-theme', theme)
localStorage.setItem(STORAGE_KEY, theme)
updateToggleButton(theme)
}
const html = document.documentElement
html.setAttribute('data-theme', theme)
localStorage.setItem(STORAGE_KEY, theme)
updateToggleButtons(theme)
}
const cycleTheme = (): void => {
const current = getSavedTheme()
@@ -21,38 +21,51 @@ const cycleTheme = (): void => {
applyTheme(next)
}
const updateToggleButton = (theme: Theme): void => {
const btn = document.getElementById('theme-toggle')
if (!btn) return
const updateToggleButtons = (theme: Theme): void => {
const headerBtn = document.getElementById('theme-toggle')
const footerBtn = document.getElementById('footer-theme-toggle')
const updateButton = (btn: HTMLButtonElement | null): void => {
if (!btn) return
const label = btn.querySelector('[data-theme-label]') as HTMLElement | null
if (label) {
label.textContent = theme
}
const label = btn.querySelector('[data-theme-label]') as HTMLElement | null
if (label) {
label.textContent = theme
}
const svg = btn.querySelector('svg')
if (!svg) return
const svg = btn.querySelector('svg')
if (!svg) return
if (theme === 'light') {
svg.innerHTML = '<circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>'
svg.setAttribute('stroke', 'currentColor')
svg.setAttribute('fill', 'none')
} else {
svg.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>'
svg.setAttribute('stroke', 'currentColor')
svg.setAttribute('fill', 'none')
}
}
if (theme === 'light') {
svg.innerHTML = '<circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>'
svg.setAttribute('stroke', 'currentColor')
svg.setAttribute('fill', 'none')
} else {
svg.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>'
svg.setAttribute('stroke', 'currentColor')
svg.setAttribute('fill', 'none')
}
}
const initTheme = (): void => {
const saved = getSavedTheme()
applyTheme(saved)
updateButton(headerBtn)
updateButton(footerBtn)
}
const btn = document.getElementById('theme-toggle')
if (btn) {
btn.addEventListener('click', cycleTheme)
}
}
const initTheme = (): void => {
const saved = getSavedTheme()
applyTheme(saved)
const headerBtn = document.getElementById('theme-toggle')
const footerBtn = document.getElementById('footer-theme-toggle')
if (headerBtn) {
headerBtn.addEventListener('click', cycleTheme)
}
if (footerBtn) {
footerBtn.addEventListener('click', cycleTheme)
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initTheme)