vitess.io/vitess@v0.16.2/web/vtadmin/src/hooks/useTheme.ts (about) 1 import { useState } from 'react'; 2 3 export enum Theme { 4 dark = 'dark', 5 light = 'light', 6 } 7 8 const DEFAULT_THEME: Theme = Theme.light; 9 const HTML_THEME_ATTR = 'data-vtadmin-theme'; 10 11 // useTheme is a hook for using and setting the display theme. 12 // This particular implementation is super quick + dirty for the purposes 13 // of the Debug page. The :) correct implementation :) will be more robust, 14 // with persistence, system defaults, and night shift mode. 15 export const useTheme = (): [Theme, (t: Theme) => void] => { 16 const currentTheme = document.documentElement.getAttribute(HTML_THEME_ATTR); 17 const tidyTheme = currentTheme && currentTheme in Theme ? (currentTheme as Theme) : DEFAULT_THEME; 18 const [theme, setTheme] = useState<Theme>(tidyTheme); 19 20 const _setTheme = (nextTheme: Theme): void => { 21 document.documentElement.setAttribute(HTML_THEME_ATTR, nextTheme); 22 setTheme(nextTheme); 23 }; 24 25 return [theme, _setTheme]; 26 };