fix theme typing & color attributes

docs/docs/ui/theme.mdx

@@ -35,8 +35,8 @@ import PageLink from "../../src/components/PageLink";
 | `warning`   | String |                        | Warning message/status color           |
 | `error`     | String |                        | Error message/status color             |
 | `danger`    | String |                        | Danger message/status color            |
-| `black`     | String | <Color hex="#121212"/> | Used as background color in dark mode  |
-| `white`     | String | <Color hex="#f5f6f7"/> | Used as background color in light mode |
+| `dark`      | String | <Color hex="#121212"/> | Used as background color in dark mode  |
+| `light`     | String | <Color hex="#f5f6f7"/> | Used as background color in light mode |
 | `red`       | String | <Color hex="#d84b4b"/> | Used as `danger` color if undefined    |
 | `orange`    | String | <Color hex="#ff6b35"/> | Used as `error` color if undefined     |
 | `yellow`    | String | <Color hex="#edae49"/> | Used as `warning` color if undefined   |

hyperglass/models/config/web.py

@@ -153,8 +153,10 @@ class Text(HyperglassModel):
 class ThemeColors(HyperglassModel):
     """Validation model for theme colors."""
 
-    black: Color = "#121212"
-    white: Color = "#f5f6f7"
+    black: Color = "#000000"
+    white: Color = "#ffffff"
+    dark: Color = "#121212"
+    light: Color = "#f5f6f7"
     gray: Color = "#c1c7cc"
     red: Color = "#d84b4b"
     orange: Color = "#ff6b35"

hyperglass/ui/types/theme.ts

@@ -3,12 +3,14 @@ import type { ColorHues } from '@chakra-ui/theme/dist/types/foundations/colors';
 
 export namespace Theme {
   type ExtraColors = {
-    primary: ColorHues;
-    secondary: ColorHues;
-    tertiary: ColorHues;
     dark: ColorHues;
     light: ColorHues;
+    error: ColorHues;
+    danger: ColorHues;
+    primary: ColorHues;
     success: ColorHues;
+    warning: ColorHues;
+    secondary: ColorHues;
     blackSolid: ColorHues;
     whiteSolid: ColorHues;
   };

hyperglass/ui/util/theme.ts

@@ -7,10 +7,33 @@ import {
   readableColorIsBlack,
 } from 'color2k';
 import { extendTheme } from '@chakra-ui/react';
+import { mode } from '@chakra-ui/theme-tools';
 
 import type { Theme as ChakraTheme } from '@chakra-ui/react';
 import type { IConfigTheme, Theme } from '~/types';
 
+const defaultBodyFonts = [
+  '-apple-system',
+  'BlinkMacSystemFont',
+  '"Segoe UI"',
+  'Helvetica',
+  'Arial',
+  'sans-serif',
+  '"Apple Color Emoji"',
+  '"Segoe UI Emoji"',
+  '"Segoe UI Symbol"',
+];
+
+const defaultMonoFonts = [
+  'SFMono-Regular',
+  'Melno',
+  'Monaco',
+  'Consolas',
+  '"Liberation Mono"',
+  '"Courier New"',
+  'monospace',
+];
+
 export function isLight(color: string) {
   return readableColorIsBlack(color);
 }
@@ -74,28 +97,6 @@ function generateColors(colorInput: string) {
   return colorMap;
 }
 
-const defaultBodyFonts = [
-  '-apple-system',
-  'BlinkMacSystemFont',
-  '"Segoe UI"',
-  'Helvetica',
-  'Arial',
-  'sans-serif',
-  '"Apple Color Emoji"',
-  '"Segoe UI Emoji"',
-  '"Segoe UI Symbol"',
-];
-
-const defaultMonoFonts = [
-  'SFMono-Regular',
-  'Melno',
-  'Monaco',
-  'Consolas',
-  '"Liberation Mono"',
-  '"Courier New"',
-  'monospace',
-];
-
 function generatePalette(palette: IConfigTheme['colors']): Theme.Colors {
   const generatedPalette = Object();
 
@@ -180,7 +181,13 @@ export function makeTheme(userTheme: IConfigTheme): Theme.Full {
     fonts,
     fontWeights,
     styles: {
-      global: () => ({ html: { scrollBehavior: 'smooth' }, body: { overflow: 'hidden' } }),
+      global: props => ({
+        html: { scrollBehavior: 'smooth', height: '-webkit-fill-available' },
+        body: {
+          background: mode('light.500', 'dark.500')(props),
+          color: mode('black', 'white')(props),
+        },
+      }),
     },
   });