actually use light & dark for background/foreground colors. closes #133

hyperglass/models/config/web.py

@@ -156,7 +156,7 @@ class ThemeColors(HyperglassModel):
 
     black: Color = "#000000"
     white: Color = "#ffffff"
-    dark: Color = "#121212"
+    dark: Color = "#010101"
     light: Color = "#f5f6f7"
     gray: Color = "#c1c7cc"
     red: Color = "#d84b4b"

hyperglass/ui/components/header/header.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { Flex, ScaleFade } from '@chakra-ui/react';
 import { AnimatedDiv } from '~/components';
-import { useColorValue, useBreakpointValue } from '~/context';
+import { useBreakpointValue } from '~/context';
 import { useBooleanValue, useLGState } from '~/hooks';
 import { Title } from './title';
 
@@ -10,8 +10,6 @@ import type { THeader } from './types';
 export const Header: React.FC<THeader> = (props: THeader) => {
   const { resetForm, ...rest } = props;
 
-  const bg = useColorValue('white', 'black');
-
   const { isSubmitting } = useLGState();
 
   const titleRef = useRef({} as HTMLDivElement);
@@ -25,18 +23,7 @@ export const Header: React.FC<THeader> = (props: THeader) => {
   const justify = useBreakpointValue({ base: 'flex-start', lg: 'center' });
 
   return (
-    <Flex
-      px={4}
-      pt={6}
-      bg={bg}
-      minH={16}
-      zIndex={4}
-      as="header"
-      width="full"
-      flex="0 1 auto"
-      color="gray.500"
-      {...rest}
-    >
+    <Flex px={4} pt={6} minH={16} zIndex={4} as="header" width="full" flex="0 1 auto" {...rest}>
       <ScaleFade in initialScale={0.5} style={{ width: '100%' }}>
         <AnimatedDiv
           layout

hyperglass/ui/components/layout/frame.tsx

@@ -2,7 +2,7 @@ import { useRef } from 'react';
 import { Flex } from '@chakra-ui/react';
 import { isSafari } from 'react-device-detect';
 import { If, Debugger, Greeting, Footer, Header } from '~/components';
-import { useConfig, useColorValue } from '~/context';
+import { useConfig } from '~/context';
 import { useLGState, useLGMethods } from '~/hooks';
 import { ResetButton } from './resetButton';
 
@@ -13,9 +13,6 @@ export const Frame: React.FC<TFrame> = (props: TFrame) => {
   const { isSubmitting } = useLGState();
   const { resetForm } = useLGMethods();
 
-  const bg = useColorValue('white', 'black');
-  const color = useColorValue('black', 'white');
-
   const containerRef = useRef<HTMLDivElement>({} as HTMLDivElement);
 
   function handleReset(): void {
@@ -27,9 +24,7 @@ export const Frame: React.FC<TFrame> = (props: TFrame) => {
   return (
     <>
       <Flex
-        bg={bg}
         w="100%"
-        color={color}
         flex="1 0 auto"
         flexDir="column"
         id="__hyperglass"