jyapayne/Sunshine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(web-ui): modernize UI (#4631)

Browse source
This commit is contained in:
David Lane 2026-01-29 10:16:37 -05:00 • committed by GitHub
commit 3ce39b36d0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 3529 additions and 456 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src_assets/common/assets/web/theme.js
View file

@ -10,14 +10,30 @@ export const getPreferredTheme = () => {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
// Define which themes are dark (for Bootstrap compatibility)
const darkThemes = new Set([
'dark',
'ember',
'midnight',
'moonlight',
'nord',
'slate',
])
const setTheme = theme => {
if (theme === 'auto') {
document.documentElement.setAttribute(
'data-bs-theme',
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
)
const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
document.documentElement.dataset.bsTheme = preferredTheme
document.documentElement.dataset.theme = preferredTheme
console.log(`Theme set to auto (resolved to: ${preferredTheme})`)
} else {
document.documentElement.setAttribute('data-bs-theme', theme)
// Set Bootstrap's data-bs-theme to 'light' or 'dark' for Bootstrap's own styles
const bsTheme = darkThemes.has(theme) ? 'dark' : 'light'
document.documentElement.dataset.bsTheme = bsTheme
// Set our custom data-theme attribute for our color schemes
document.documentElement.dataset.theme = theme
console.log(`Theme set to: ${theme} (Bootstrap: ${bsTheme})`)
}
}
@ -29,9 +45,18 @@ export const showActiveTheme = (theme, focus = false) => {
}
const themeSwitcherText = document.querySelector('#bd-theme-text')
const activeThemeIcon = document.querySelector('.theme-icon-active i')
const activeThemeIcon = document.querySelector('.theme-icon-active svg')
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
const classListOfActiveBtn = btnToActive.querySelector('i').classList
if (!btnToActive) {
return
}
const btnIcon = btnToActive.querySelector('svg')
if (!activeThemeIcon || !btnIcon) {
return
}
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
element.classList.remove('active')
@ -40,8 +65,11 @@ export const showActiveTheme = (theme, focus = false) => {
btnToActive.classList.add('active')
btnToActive.setAttribute('aria-pressed', 'true')
activeThemeIcon.classList.remove(...activeThemeIcon.classList.values())
activeThemeIcon.classList.add(...classListOfActiveBtn)
// Clone the SVG icon from the active button to the theme switcher
const clonedIcon = btnIcon.cloneNode(true)
activeThemeIcon.parentNode.replaceChild(clonedIcon, activeThemeIcon)
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.textContent.trim()})`
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
@ -72,7 +100,8 @@ export function loadAutoTheme() {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
const storedTheme = getStoredTheme()
if (storedTheme !== 'light' && storedTheme !== 'dark') {
// Only auto-switch if theme is set to 'auto'
if (storedTheme === 'auto' || !storedTheme) {
setTheme(getPreferredTheme())
}
})