summaryrefslogtreecommitdiff
path: root/components/Tweaks/Visual/ThemeSelect.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/Tweaks/Visual/ThemeSelect.tsx')
-rw-r--r--components/Tweaks/Visual/ThemeSelect.tsx63
1 files changed, 63 insertions, 0 deletions
diff --git a/components/Tweaks/Visual/ThemeSelect.tsx b/components/Tweaks/Visual/ThemeSelect.tsx
new file mode 100644
index 0000000..eed6daf
--- /dev/null
+++ b/components/Tweaks/Visual/ThemeSelect.tsx
@@ -0,0 +1,63 @@
+import React, { useContext } from 'react'
+import {
+ Box,
+ Button,
+ Flex,
+ Menu,
+ MenuButton,
+ MenuItem,
+ MenuList,
+ Portal,
+ Text,
+} from '@chakra-ui/react'
+
+import { themes } from '../../themes'
+import { ChevronDownIcon } from '@chakra-ui/icons'
+import { ThemeContext } from '../../../util/themecontext'
+
+export const ThemeSelect = () => {
+ type Theme = { [key: string]: string }
+ const { emacsTheme, setEmacsTheme, highlightColor } = useContext(ThemeContext)
+ return (
+ <Flex alignItems="center" justifyContent="space-between" pl={7} pr={2}>
+ <Text>Theme</Text>
+ <Menu isLazy placement="bottom" closeOnSelect={false}>
+ <MenuButton
+ as={Button}
+ size="sm"
+ colorScheme=""
+ color="black"
+ rightIcon={<ChevronDownIcon />}
+ >
+ {emacsTheme[0]}
+ </MenuButton>
+ <MenuList minW={10} zIndex="popover" bgColor="gray.200">
+ <MenuItem
+ onClick={() => ''}
+ justifyContent="space-between"
+ alignItems="center"
+ display="flex"
+ >
+ <Box height={6} width={6}></Box>
+ </MenuItem>
+ {Object.keys(themes).map((theme: string, i: number) => (
+ <MenuItem
+ key={theme}
+ onClick={() => setEmacsTheme([theme, themes[theme]])}
+ justifyContent="space-between"
+ alignItems="center"
+ display="flex"
+ >
+ <Text>{theme}</Text>
+ <Flex height={6} width={20} flexDirection="column" flexWrap="wrap">
+ {Object.values(themes[theme as string]).map((color: string) => {
+ return <Box key={color} bgColor={color} flex="1 1 8px"></Box>
+ })}
+ </Flex>
+ </MenuItem>
+ ))}
+ </MenuList>
+ </Menu>
+ </Flex>
+ )
+}