1import { css } from '@emotion/react';
2import {
3  useTheme,
4  theme,
5  ChevronDownIcon,
6  ThemeAutoIcon,
7  ThemeDarkIcon,
8  ThemeLightIcon,
9  iconSize,
10  shadows,
11  spacing,
12  typography,
13  borderRadius,
14} from '@expo/styleguide';
15import React, { useEffect, useState } from 'react';
16
17export const ThemeSelector = () => {
18  const { themeName, setAutoMode, setDarkMode, setLightMode } = useTheme();
19  const [isLoaded, setLoaded] = useState(false);
20
21  useEffect(function didMount() {
22    setLoaded(true);
23  }, []);
24
25  if (!isLoaded) return <div css={containerStyle} />;
26
27  return (
28    <div css={containerStyle}>
29      <select
30        css={selectStyle}
31        value={themeName}
32        onChange={e => {
33          const option = e.target.value;
34
35          if (option === 'auto') setAutoMode();
36          if (option === 'dark') setDarkMode();
37          if (option === 'light') setLightMode();
38        }}>
39        <option value="auto">Auto</option>
40        <option value="light">Light</option>
41        <option value="dark">Dark</option>
42      </select>
43      <div css={selectIconStyle}>
44        {themeName === 'auto' && <ThemeAutoIcon size={iconSize.small} />}
45        {themeName === 'dark' && <ThemeDarkIcon size={iconSize.small} />}
46        {themeName === 'light' && <ThemeLightIcon size={iconSize.small} />}
47      </div>
48      <div css={themeIconStyle}>
49        <ChevronDownIcon size={iconSize.small} />
50      </div>
51    </div>
52  );
53};
54
55const containerStyle = css`
56  position: relative;
57  min-width: 120px;
58`;
59
60const selectStyle = css`
61  ${typography.fontSizes[14]}
62  display: flex;
63  align-items: center;
64  justify-content: center;
65  height: 40px;
66  color: ${theme.text.default};
67  line-height: 1.3;
68  padding: 0 ${spacing[9]}px;
69  width: 100%;
70  margin: 0;
71  border: 1px solid ${theme.border.default};
72  box-shadow: ${shadows.input};
73  border-radius: ${borderRadius.medium}px;
74  -moz-appearance: none;
75  -webkit-appearance: none;
76  appearance: none;
77  background-color: ${theme.background.default};
78  cursor: pointer;
79`;
80
81const selectIconStyle = css`
82  position: absolute;
83  left: 12px;
84  top: 12px;
85  pointer-events: none;
86`;
87
88const themeIconStyle = css`
89  position: absolute;
90  right: 12px;
91  top: 12px;
92  pointer-events: none;
93`;
94