mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2026-03-01 12:44:17 +00:00
9e6bcf1846
* removed daisy from config * removed tw-elements artefact * removed comments from tailwind config * removed safelist * migrated to tailwind4 and daisyui5 * deleted tailwind.config.js which is not eeded anymore * 3.0.79 * version number * fixed broken layouts * more fixing * more layout fixing * tested theming * small fixes * adapt snapshots to changes * package.json: add unit test update script * more ui refactoring & theme controller * ui improvements * package-lock.json * fix linting * fixed tabs * fix linting * fixed typing --------- Co-authored-by: mahula <lenzmath@posteo.de>
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
|
|
const themes = [
|
|
'default',
|
|
'light',
|
|
'dark',
|
|
'valentine',
|
|
'retro',
|
|
'aqua',
|
|
'cyberpunk',
|
|
'caramellatte',
|
|
'abyss',
|
|
'silk',
|
|
]
|
|
|
|
export const ThemeControl = () => {
|
|
const [theme, setTheme] = useState<string>(() => {
|
|
const savedTheme = localStorage.getItem('theme')
|
|
return savedTheme ? (JSON.parse(savedTheme) as string) : 'default'
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (theme !== 'default') {
|
|
localStorage.setItem('theme', JSON.stringify(theme))
|
|
} else localStorage.removeItem('theme')
|
|
document.documentElement.setAttribute('data-theme', theme)
|
|
}, [theme])
|
|
|
|
return (
|
|
<div className='tw:dropdown tw:mr-2'>
|
|
<div tabIndex={0} role='button' className='tw:btn tw:m-1'>
|
|
Theme
|
|
<svg
|
|
width='12px'
|
|
height='12px'
|
|
className='tw:inline-block tw:h-2 tw:w-2 tw:fill-current tw:opacity-60'
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
viewBox='0 0 2048 2048'
|
|
>
|
|
<path d='M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z'></path>
|
|
</svg>
|
|
</div>
|
|
<ul
|
|
tabIndex={0}
|
|
className='tw:dropdown-content tw:bg-base-200 tw:rounded-box tw:z-1 tw:w-36 tw:p-2 tw:shadow-2xl'
|
|
>
|
|
{themes.map((t) => (
|
|
<li key={t}>
|
|
<input
|
|
className={`tw:btn ${theme === t ? 'tw:bg-base-300' : ''} tw:btn-sm tw:btn-block tw:btn-ghost tw:justify-start`}
|
|
type='radio'
|
|
name='theme'
|
|
value={t}
|
|
checked={theme === t}
|
|
onChange={() => setTheme(t)}
|
|
aria-label={t.toLowerCase()}
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|