github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/Theme.tsx (about)

     1  /*
     2   *
     3   * THIS FILE WAS COPIED INTO THANOS FROM PROMETHEUS
     4   * (LIVING AT https://github.com/prometheus/prometheus/blob/main/web/ui/react-app/src/Theme.tsx),
     5   * THE ORIGINAL CODE WAS LICENSED UNDER AN APACHE 2.0 LICENSE, SEE
     6   * https://github.com/prometheus/prometheus/blob/main/LICENSE.
     7   *
     8   */
     9  
    10  import React, { FC, useEffect } from 'react';
    11  import { Form, Button, ButtonGroup } from 'reactstrap';
    12  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
    13  import { faMoon, faSun, faAdjust } from '@fortawesome/free-solid-svg-icons';
    14  import { useTheme } from './contexts/ThemeContext';
    15  
    16  export const themeLocalStorageKey = 'user-prefers-color-scheme';
    17  
    18  export const Theme: FC = () => {
    19    const { theme } = useTheme();
    20  
    21    useEffect(() => {
    22      document.body.classList.toggle('bootstrap-dark', theme === 'dark');
    23      document.body.classList.toggle('bootstrap', theme === 'light');
    24    }, [theme]);
    25  
    26    return null;
    27  };
    28  
    29  export const ThemeToggle: FC = () => {
    30    const { userPreference, setTheme } = useTheme();
    31  
    32    return (
    33      <Form className="ml-auto" inline>
    34        <ButtonGroup size="sm">
    35          <Button
    36            color="secondary"
    37            title="Use light theme"
    38            active={userPreference === 'light'}
    39            onClick={() => setTheme('light')}
    40          >
    41            <FontAwesomeIcon icon={faSun} className={userPreference === 'light' ? 'text-white' : 'text-dark'} />
    42          </Button>
    43          <Button color="secondary" title="Use dark theme" active={userPreference === 'dark'} onClick={() => setTheme('dark')}>
    44            <FontAwesomeIcon icon={faMoon} className={userPreference === 'dark' ? 'text-white' : 'text-dark'} />
    45          </Button>
    46          <Button
    47            color="secondary"
    48            title="Use browser-preferred theme"
    49            active={userPreference === 'auto'}
    50            onClick={() => setTheme('auto')}
    51          >
    52            <FontAwesomeIcon icon={faAdjust} className={userPreference === 'auto' ? 'text-white' : 'text-dark'} />
    53          </Button>
    54        </ButtonGroup>
    55      </Form>
    56    );
    57  };