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  };