feat(ui) : add site colors, dark mode toggle and card styling improvements
- Site color field with color picker in create/edit modals - Dark mode theme (mytheme-dark) with toggle in navbar - Stronger site color visibility on cards (gradient, top border, badges) - Bigger action buttons (btn-sm) on machine cards - White card backgrounds with proper dark mode support Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
26
app/composables/useDarkMode.ts
Normal file
26
app/composables/useDarkMode.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
const isDark = ref(false)
|
||||
|
||||
export function useDarkMode() {
|
||||
const toggle = () => {
|
||||
isDark.value = !isDark.value
|
||||
applyTheme()
|
||||
}
|
||||
|
||||
const applyTheme = () => {
|
||||
const theme = isDark.value ? 'mytheme-dark' : 'mytheme'
|
||||
document.documentElement.setAttribute('data-theme', theme)
|
||||
localStorage.setItem('theme', theme)
|
||||
}
|
||||
|
||||
const init = () => {
|
||||
const saved = localStorage.getItem('theme')
|
||||
if (saved === 'mytheme-dark') {
|
||||
isDark.value = true
|
||||
} else if (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
isDark.value = true
|
||||
}
|
||||
applyTheme()
|
||||
}
|
||||
|
||||
return { isDark, toggle, init }
|
||||
}
|
||||
Reference in New Issue
Block a user