File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -32,21 +32,28 @@ interface ThemeSwitcherProps {
3232 */
3333export function ThemeSwitcher ( { className = '' } : ThemeSwitcherProps ) {
3434 const [ theme , setTheme ] = useState < ThemeId > ( 'dracula' )
35+ const [ mounted , setMounted ] = useState ( false )
3536 const validThemeIds = useMemo ( ( ) => new Set ( THEME_OPTIONS . map ( ( o ) => o . id ) ) , [ ] )
3637
3738 useEffect ( ( ) => {
39+ setMounted ( true )
3840 const saved = localStorage . getItem ( 'terminal-theme' )
3941 const attr = document . documentElement . getAttribute ( 'data-theme' )
4042 const initial = [ saved , attr ] . find (
4143 ( v ) : v is ThemeId => ! ! v && validThemeIds . has ( v as ThemeId ) ,
4244 )
43- if ( initial ) setTheme ( initial )
45+ if ( initial ) {
46+ setTheme ( initial )
47+ // Apply immediately to avoid flash if state update takes a tick
48+ document . documentElement . setAttribute ( 'data-theme' , initial )
49+ }
4450 } , [ validThemeIds ] )
4551
4652 useEffect ( ( ) => {
53+ if ( ! mounted ) return
4754 document . documentElement . setAttribute ( 'data-theme' , theme )
4855 localStorage . setItem ( 'terminal-theme' , theme )
49- } , [ theme ] )
56+ } , [ theme , mounted ] )
5057
5158 return (
5259 < label className = { `inline-flex items-center gap-2 text-sm font-mono text-[var(--term-fg-dim)] ${ className } ` . trim ( ) } >
You can’t perform that action at this time.
0 commit comments