prometheus

1
import React, { FC, useEffect } from 'react';
2
import { Form, Button, ButtonGroup } from 'reactstrap';
3
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4
import { faMoon, faSun, faAdjust } from '@fortawesome/free-solid-svg-icons';
5
import { useTheme } from './contexts/ThemeContext';
6

7
export const themeLocalStorageKey = 'user-prefers-color-scheme';
8

9
export const Theme: FC = () => {
10
  const { theme } = useTheme();
11

12
  useEffect(() => {
13
    document.body.classList.toggle('bootstrap-dark', theme === 'dark');
14
    document.body.classList.toggle('bootstrap', theme === 'light');
15
  }, [theme]);
16

17
  return null;
18
};
19

20
export const ThemeToggle: FC = () => {
21
  const { userPreference, setTheme } = useTheme();
22

23
  return (
24
    <Form className="ml-auto" inline>
25
      <ButtonGroup size="sm">
26
        <Button
27
          color="secondary"
28
          title="Use light theme"
29
          active={userPreference === 'light'}
30
          onClick={() => setTheme('light')}
31
        >
32
          <FontAwesomeIcon icon={faSun} className={userPreference === 'light' ? 'text-white' : 'text-dark'} />
33
        </Button>
34
        <Button color="secondary" title="Use dark theme" active={userPreference === 'dark'} onClick={() => setTheme('dark')}>
35
          <FontAwesomeIcon icon={faMoon} className={userPreference === 'dark' ? 'text-white' : 'text-dark'} />
36
        </Button>
37
        <Button
38
          color="secondary"
39
          title="Use browser-preferred theme"
40
          active={userPreference === 'auto'}
41
          onClick={() => setTheme('auto')}
42
        >
43
          <FontAwesomeIcon icon={faAdjust} className={userPreference === 'auto' ? 'text-white' : 'text-dark'} />
44
        </Button>
45
      </ButtonGroup>
46
    </Form>
47
  );
48
};
49