diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index b69e3b82af..1b3b790222 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -24,16 +24,13 @@
     },
     "common": {
         "hotkeysLabel": "Hotkeys",
-        "themeLabel": "Theme",
+        "darkMode": "Dark Mode",
+        "lightMode": "Light Mode",
         "languagePickerLabel": "Language",
         "reportBugLabel": "Report Bug",
         "githubLabel": "Github",
         "discordLabel": "Discord",
         "settingsLabel": "Settings",
-        "darkTheme": "Dark",
-        "lightTheme": "Light",
-        "greenTheme": "Green",
-        "oceanTheme": "Ocean",
         "langArabic": "العربية",
         "langEnglish": "English",
         "langDutch": "Nederlands",
diff --git a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
index 5eea4bb940..1e86e0ce1b 100644
--- a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
+++ b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
@@ -3,17 +3,10 @@ import {
   createLocalStorageManager,
   extendTheme,
 } from '@chakra-ui/react';
-import { RootState } from 'app/store/store';
-import { useAppSelector } from 'app/store/storeHooks';
-import { ReactNode, useEffect } from 'react';
+import { ReactNode, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { theme as invokeAITheme } from 'theme/theme';
 
-import { greenTeaThemeColors } from 'theme/colors/greenTea';
-import { invokeAIThemeColors } from 'theme/colors/invokeAI';
-import { lightThemeColors } from 'theme/colors/lightTheme';
-import { oceanBlueColors } from 'theme/colors/oceanBlue';
-
 import '@fontsource-variable/inter';
 import { MantineProvider } from '@mantine/core';
 import { mantineTheme } from 'mantine-theme/theme';
@@ -24,29 +17,19 @@ type ThemeLocaleProviderProps = {
   children: ReactNode;
 };
 
-const THEMES = {
-  dark: invokeAIThemeColors,
-  light: lightThemeColors,
-  green: greenTeaThemeColors,
-  ocean: oceanBlueColors,
-};
-
 const manager = createLocalStorageManager('@@invokeai-color-mode');
 
 function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
   const { i18n } = useTranslation();
 
-  const currentTheme = useAppSelector(
-    (state: RootState) => state.ui.currentTheme
-  );
-
   const direction = i18n.dir();
 
-  const theme = extendTheme({
-    ...invokeAITheme,
-    colors: THEMES[currentTheme as keyof typeof THEMES],
-    direction,
-  });
+  const theme = useMemo(() => {
+    return extendTheme({
+      ...invokeAITheme,
+      direction,
+    });
+  }, [direction]);
 
   useEffect(() => {
     document.body.dir = direction;
diff --git a/invokeai/frontend/web/src/common/components/IAICollapse.tsx b/invokeai/frontend/web/src/common/components/IAICollapse.tsx
index ec23793741..5db26f3841 100644
--- a/invokeai/frontend/web/src/common/components/IAICollapse.tsx
+++ b/invokeai/frontend/web/src/common/components/IAICollapse.tsx
@@ -1,6 +1,14 @@
 import { ChevronUpIcon } from '@chakra-ui/icons';
-import { Box, Collapse, Flex, Spacer, Switch } from '@chakra-ui/react';
+import {
+  Box,
+  Collapse,
+  Flex,
+  Spacer,
+  Switch,
+  useColorMode,
+} from '@chakra-ui/react';
 import { PropsWithChildren, memo } from 'react';
+import { mode } from 'theme/util/mode';
 
 export type IAIToggleCollapseProps = PropsWithChildren & {
   label: string;
@@ -11,6 +19,7 @@ export type IAIToggleCollapseProps = PropsWithChildren & {
 
 const IAICollapse = (props: IAIToggleCollapseProps) => {
   const { label, isOpen, onToggle, children, withSwitch = false } = props;
+  const { colorMode } = useColorMode();
   return (
     <Box>
       <Flex
@@ -21,10 +30,14 @@ const IAICollapse = (props: IAIToggleCollapseProps) => {
           px: 4,
           borderTopRadius: 'base',
           borderBottomRadius: isOpen ? 0 : 'base',
-          bg: isOpen ? 'base.750' : 'base.800',
-          color: 'base.100',
+          bg: isOpen
+            ? mode('base.200', 'base.750')(colorMode)
+            : mode('base.150', 'base.800')(colorMode),
+          color: mode('base.900', 'base.100')(colorMode),
           _hover: {
-            bg: isOpen ? 'base.700' : 'base.750',
+            bg: isOpen
+              ? mode('base.250', 'base.700')(colorMode)
+              : mode('base.200', 'base.750')(colorMode),
           },
           fontSize: 'sm',
           fontWeight: 600,
@@ -50,7 +63,13 @@ const IAICollapse = (props: IAIToggleCollapseProps) => {
         )}
       </Flex>
       <Collapse in={isOpen} animateOpacity style={{ overflow: 'unset' }}>
-        <Box sx={{ p: 4, borderBottomRadius: 'base', bg: 'base.800' }}>
+        <Box
+          sx={{
+            p: 4,
+            borderBottomRadius: 'base',
+            bg: mode('base.100', 'base.800')(colorMode),
+          }}
+        >
           {children}
         </Box>
       </Collapse>
diff --git a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
index bdf22c2df1..d0652dc8b9 100644
--- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
@@ -5,6 +5,7 @@ import {
   Icon,
   IconButtonProps,
   Image,
+  useColorMode,
 } from '@chakra-ui/react';
 import { useDraggable, useDroppable } from '@dnd-kit/core';
 import { useCombinedRefs } from '@dnd-kit/utilities';
@@ -20,6 +21,7 @@ import { v4 as uuidv4 } from 'uuid';
 import IAIDropOverlay from './IAIDropOverlay';
 import { PostUploadAction } from 'services/api/thunks/image';
 import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
+import { mode } from 'theme/util/mode';
 
 type IAIDndImageProps = {
   image: ImageDTO | null | undefined;
@@ -62,6 +64,7 @@ const IAIDndImage = (props: IAIDndImageProps) => {
   } = props;
 
   const dndId = useRef(uuidv4());
+  const { colorMode } = useColorMode();
 
   const {
     isOver,
@@ -99,10 +102,10 @@ const IAIDndImage = (props: IAIDndImageProps) => {
     ? {}
     : {
         cursor: 'pointer',
-        bg: 'base.800',
+        bg: mode('base.200', 'base.800')(colorMode),
         _hover: {
-          bg: 'base.750',
-          color: 'base.300',
+          bg: mode('base.300', 'base.650')(colorMode),
+          color: mode('base.500', 'base.300')(colorMode),
         },
       };
 
@@ -181,7 +184,7 @@ const IAIDndImage = (props: IAIDndImageProps) => {
               borderRadius: 'base',
               transitionProperty: 'common',
               transitionDuration: '0.1s',
-              color: 'base.500',
+              color: mode('base.500', 'base.500')(colorMode),
               ...uploadButtonStyles,
             }}
             {...getUploadButtonProps()}
diff --git a/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx b/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx
index 79105c00d6..8ae54c30ab 100644
--- a/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx
@@ -1,6 +1,7 @@
-import { Flex, Text } from '@chakra-ui/react';
+import { Flex, Text, useColorMode } from '@chakra-ui/react';
 import { motion } from 'framer-motion';
 import { memo, useRef } from 'react';
+import { mode } from 'theme/util/mode';
 import { v4 as uuidv4 } from 'uuid';
 
 type Props = {
@@ -11,6 +12,7 @@ type Props = {
 export const IAIDropOverlay = (props: Props) => {
   const { isOver, label = 'Drop' } = props;
   const motionId = useRef(uuidv4());
+  const { colorMode } = useColorMode();
   return (
     <motion.div
       key={motionId.current}
@@ -42,7 +44,7 @@ export const IAIDropOverlay = (props: Props) => {
             insetInlineStart: 0,
             w: 'full',
             h: 'full',
-            bg: 'base.900',
+            bg: mode('base.700', 'base.900')(colorMode),
             opacity: 0.7,
             borderRadius: 'base',
             alignItems: 'center',
@@ -61,7 +63,9 @@ export const IAIDropOverlay = (props: Props) => {
             h: 'full',
             opacity: 1,
             borderWidth: 2,
-            borderColor: isOver ? 'base.200' : 'base.500',
+            borderColor: isOver
+              ? mode('base.50', 'base.200')(colorMode)
+              : mode('base.100', 'base.500')(colorMode),
             borderRadius: 'base',
             borderStyle: 'dashed',
             transitionProperty: 'common',
@@ -75,7 +79,9 @@ export const IAIDropOverlay = (props: Props) => {
               fontSize: '2xl',
               fontWeight: 600,
               transform: isOver ? 'scale(1.1)' : 'scale(1)',
-              color: isOver ? 'base.100' : 'base.500',
+              color: isOver
+                ? mode('base.100', 'base.100')(colorMode)
+                : mode('base.200', 'base.500')(colorMode),
               transitionProperty: 'common',
               transitionDuration: '0.1s',
             }}
diff --git a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
index 03a00d5b1c..4cff351aee 100644
--- a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
@@ -6,9 +6,10 @@ import {
   IconProps,
   Spinner,
   SpinnerProps,
+  useColorMode,
 } from '@chakra-ui/react';
-import { ReactElement } from 'react';
 import { FaImage } from 'react-icons/fa';
+import { mode } from 'theme/util/mode';
 
 type Props = FlexProps & {
   spinnerProps?: SpinnerProps;
@@ -17,10 +18,11 @@ type Props = FlexProps & {
 export const IAIImageLoadingFallback = (props: Props) => {
   const { spinnerProps, ...rest } = props;
   const { sx, ...restFlexProps } = rest;
+  const { colorMode } = useColorMode();
   return (
     <Flex
       sx={{
-        bg: 'base.900',
+        bg: mode('base.200', 'base.900')(colorMode),
         opacity: 0.7,
         w: 'full',
         h: 'full',
@@ -45,10 +47,12 @@ type IAINoImageFallbackProps = {
 export const IAINoImageFallback = (props: IAINoImageFallbackProps) => {
   const { sx: flexSx, ...restFlexProps } = props.flexProps ?? { sx: {} };
   const { sx: iconSx, ...restIconProps } = props.iconProps ?? { sx: {} };
+  const { colorMode } = useColorMode();
+
   return (
     <Flex
       sx={{
-        bg: 'base.900',
+        bg: mode('base.200', 'base.900')(colorMode),
         opacity: 0.7,
         w: 'full',
         h: 'full',
@@ -61,7 +65,7 @@ export const IAINoImageFallback = (props: IAINoImageFallbackProps) => {
     >
       <Icon
         as={props.as ?? FaImage}
-        sx={{ color: 'base.700', ...iconSx }}
+        sx={{ color: mode('base.700', 'base.500')(colorMode), ...iconSx }}
         {...restIconProps}
       />
     </Flex>
diff --git a/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx
index 90be25d04d..e62a7b34c3 100644
--- a/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx
@@ -1,6 +1,8 @@
-import { Tooltip } from '@chakra-ui/react';
+import { Tooltip, useColorMode, useToken } from '@chakra-ui/react';
 import { MultiSelect, MultiSelectProps } from '@mantine/core';
+import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
 import { memo } from 'react';
+import { mode } from 'theme/util/mode';
 
 type IAIMultiSelectProps = MultiSelectProps & {
   tooltip?: string;
@@ -8,71 +10,99 @@ type IAIMultiSelectProps = MultiSelectProps & {
 
 const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
   const { searchable = true, tooltip, ...rest } = props;
+  const {
+    base50,
+    base100,
+    base200,
+    base300,
+    base400,
+    base500,
+    base600,
+    base700,
+    base800,
+    base900,
+    accent200,
+    accent300,
+    accent400,
+    accent500,
+    accent600,
+  } = useChakraThemeTokens();
+  const [boxShadow] = useToken('shadows', ['dark-lg']);
+  const { colorMode } = useColorMode();
+
   return (
     <Tooltip label={tooltip} placement="top" hasArrow>
       <MultiSelect
         searchable={searchable}
         styles={() => ({
           label: {
-            color: 'var(--invokeai-colors-base-300)',
+            color: mode(base700, base300)(colorMode),
             fontWeight: 'normal',
           },
           searchInput: {
-            '::placeholder': {
-              color: 'var(--invokeai-colors-base-700)',
+            ':placeholder': {
+              color: mode(base300, base700)(colorMode),
             },
           },
           input: {
-            backgroundColor: 'var(--invokeai-colors-base-900)',
+            backgroundColor: mode(base50, base900)(colorMode),
             borderWidth: '2px',
-            borderColor: 'var(--invokeai-colors-base-800)',
-            color: 'var(--invokeai-colors-base-100)',
+            borderColor: mode(base200, base800)(colorMode),
+            color: mode(base900, base100)(colorMode),
             paddingRight: 24,
             fontWeight: 600,
-            '&:hover': { borderColor: 'var(--invokeai-colors-base-700)' },
+            '&:hover': { borderColor: mode(base300, base600)(colorMode) },
             '&:focus': {
-              borderColor: 'var(--invokeai-colors-accent-600)',
+              borderColor: mode(accent300, accent600)(colorMode),
+            },
+            '&:is(:focus, :hover)': {
+              borderColor: mode(base400, base500)(colorMode),
             },
             '&:focus-within': {
-              borderColor: 'var(--invokeai-colors-accent-600)',
+              borderColor: mode(accent200, accent600)(colorMode),
+            },
+            '&:disabled': {
+              backgroundColor: mode(base300, base700)(colorMode),
+              color: mode(base600, base400)(colorMode),
             },
           },
           value: {
-            backgroundColor: 'var(--invokeai-colors-base-800)',
-            color: 'var(--invokeai-colors-base-100)',
+            backgroundColor: mode(base200, base800)(colorMode),
+            color: mode(base900, base100)(colorMode),
             button: {
-              color: 'var(--invokeai-colors-base-100)',
+              color: mode(base900, base100)(colorMode),
             },
             '&:hover': {
-              backgroundColor: 'var(--invokeai-colors-base-700)',
+              backgroundColor: mode(base300, base700)(colorMode),
               cursor: 'pointer',
             },
           },
           dropdown: {
-            backgroundColor: 'var(--invokeai-colors-base-800)',
-            borderColor: 'var(--invokeai-colors-base-700)',
+            backgroundColor: mode(base200, base800)(colorMode),
+            borderColor: mode(base200, base800)(colorMode),
+            boxShadow,
           },
           item: {
-            backgroundColor: 'var(--invokeai-colors-base-800)',
-            color: 'var(--invokeai-colors-base-200)',
+            backgroundColor: mode(base200, base800)(colorMode),
+            color: mode(base800, base200)(colorMode),
             padding: 6,
             '&[data-hovered]': {
-              color: 'var(--invokeai-colors-base-100)',
-              backgroundColor: 'var(--invokeai-colors-base-750)',
+              color: mode(base900, base100)(colorMode),
+              backgroundColor: mode(base300, base700)(colorMode),
             },
             '&[data-active]': {
-              backgroundColor: 'var(--invokeai-colors-base-750)',
+              backgroundColor: mode(base300, base700)(colorMode),
               '&:hover': {
-                color: 'var(--invokeai-colors-base-100)',
-                backgroundColor: 'var(--invokeai-colors-base-750)',
+                color: mode(base900, base100)(colorMode),
+                backgroundColor: mode(base300, base700)(colorMode),
               },
             },
             '&[data-selected]': {
-              color: 'var(--invokeai-colors-base-50)',
-              backgroundColor: 'var(--invokeai-colors-accent-650)',
+              color: mode(base900, base50)(colorMode),
+              backgroundColor: mode(accent300, accent600)(colorMode),
               fontWeight: 600,
               '&:hover': {
-                backgroundColor: 'var(--invokeai-colors-accent-600)',
+                backgroundColor: mode(accent400, accent500)(colorMode),
               },
             },
           },
@@ -80,7 +110,7 @@ const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
             width: 24,
             padding: 20,
             button: {
-              color: 'var(--invokeai-colors-base-100)',
+              color: mode(base900, base100)(colorMode),
             },
           },
         })}
diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
index 5f02140904..0ca4c2c04c 100644
--- a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
@@ -1,6 +1,8 @@
-import { Tooltip } from '@chakra-ui/react';
+import { Tooltip, useColorMode, useToken } from '@chakra-ui/react';
 import { Select, SelectProps } from '@mantine/core';
+import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
 import { memo } from 'react';
+import { mode } from 'theme/util/mode';
 
 export type IAISelectDataType = {
   value: string;
@@ -14,61 +16,104 @@ type IAISelectProps = SelectProps & {
 
 const IAIMantineSelect = (props: IAISelectProps) => {
   const { searchable = true, tooltip, ...rest } = props;
+  const {
+    base50,
+    base100,
+    base200,
+    base300,
+    base400,
+    base500,
+    base600,
+    base700,
+    base800,
+    base900,
+    accent200,
+    accent300,
+    accent400,
+    accent500,
+    accent600,
+  } = useChakraThemeTokens();
+
+  const { colorMode } = useColorMode();
+
+  const [boxShadow] = useToken('shadows', ['dark-lg']);
+
   return (
     <Tooltip label={tooltip} placement="top" hasArrow>
       <Select
         searchable={searchable}
         styles={() => ({
           label: {
-            color: 'var(--invokeai-colors-base-300)',
+            color: mode(base700, base300)(colorMode),
             fontWeight: 'normal',
           },
           input: {
-            backgroundColor: 'var(--invokeai-colors-base-900)',
+            backgroundColor: mode(base50, base900)(colorMode),
             borderWidth: '2px',
-            borderColor: 'var(--invokeai-colors-base-800)',
-            color: 'var(--invokeai-colors-base-100)',
+            borderColor: mode(base200, base800)(colorMode),
+            color: mode(base900, base100)(colorMode),
             paddingRight: 24,
             fontWeight: 600,
-            '&:hover': { borderColor: 'var(--invokeai-colors-base-700)' },
+            '&:hover': { borderColor: mode(base300, base600)(colorMode) },
             '&:focus': {
-              borderColor: 'var(--invokeai-colors-accent-600)',
+              borderColor: mode(accent300, accent600)(colorMode),
+            },
+            '&:is(:focus, :hover)': {
+              borderColor: mode(base400, base500)(colorMode),
+            },
+            '&:focus-within': {
+              borderColor: mode(accent200, accent600)(colorMode),
             },
             '&:disabled': {
-              backgroundColor: 'var(--invokeai-colors-base-700)',
-              color: 'var(--invokeai-colors-base-400)',
+              backgroundColor: mode(base300, base700)(colorMode),
+              color: mode(base600, base400)(colorMode),
+            },
+          },
+          value: {
+            backgroundColor: mode(base100, base900)(colorMode),
+            color: mode(base900, base100)(colorMode),
+            button: {
+              color: mode(base900, base100)(colorMode),
+            },
+            '&:hover': {
+              backgroundColor: mode(base300, base700)(colorMode),
+              cursor: 'pointer',
             },
           },
           dropdown: {
-            backgroundColor: 'var(--invokeai-colors-base-800)',
-            borderColor: 'var(--invokeai-colors-base-700)',
+            backgroundColor: mode(base200, base800)(colorMode),
+            borderColor: mode(base200, base800)(colorMode),
+            boxShadow,
           },
           item: {
-            backgroundColor: 'var(--invokeai-colors-base-800)',
-            color: 'var(--invokeai-colors-base-200)',
+            backgroundColor: mode(base200, base800)(colorMode),
+            color: mode(base800, base200)(colorMode),
             padding: 6,
             '&[data-hovered]': {
-              color: 'var(--invokeai-colors-base-100)',
-              backgroundColor: 'var(--invokeai-colors-base-750)',
+              color: mode(base900, base100)(colorMode),
+              backgroundColor: mode(base300, base700)(colorMode),
             },
             '&[data-active]': {
-              backgroundColor: 'var(--invokeai-colors-base-750)',
+              backgroundColor: mode(base300, base700)(colorMode),
               '&:hover': {
-                color: 'var(--invokeai-colors-base-100)',
-                backgroundColor: 'var(--invokeai-colors-base-750)',
+                color: mode(base900, base100)(colorMode),
+                backgroundColor: mode(base300, base700)(colorMode),
               },
             },
             '&[data-selected]': {
-              color: 'var(--invokeai-colors-base-50)',
-              backgroundColor: 'var(--invokeai-colors-accent-650)',
+              color: mode(base900, base50)(colorMode),
+              backgroundColor: mode(accent300, accent600)(colorMode),
               fontWeight: 600,
               '&:hover': {
-                backgroundColor: 'var(--invokeai-colors-accent-600)',
+                backgroundColor: mode(accent400, accent500)(colorMode),
               },
             },
           },
           rightSection: {
             width: 32,
+            button: {
+              color: mode(base900, base100)(colorMode),
+            },
           },
         })}
         {...rest}
diff --git a/invokeai/frontend/web/src/common/components/IAISimpleCheckbox.tsx b/invokeai/frontend/web/src/common/components/IAISimpleCheckbox.tsx
index 2d28b5b72e..47e328727d 100644
--- a/invokeai/frontend/web/src/common/components/IAISimpleCheckbox.tsx
+++ b/invokeai/frontend/web/src/common/components/IAISimpleCheckbox.tsx
@@ -1,5 +1,6 @@
-import { Checkbox, CheckboxProps, Text } from '@chakra-ui/react';
+import { Checkbox, CheckboxProps, Text, useColorMode } from '@chakra-ui/react';
 import { memo, ReactElement } from 'react';
+import { mode } from 'theme/util/mode';
 
 type IAISimpleCheckboxProps = CheckboxProps & {
   label: string | ReactElement;
@@ -7,9 +8,15 @@ type IAISimpleCheckboxProps = CheckboxProps & {
 
 const IAISimpleCheckbox = (props: IAISimpleCheckboxProps) => {
   const { label, ...rest } = props;
+  const { colorMode } = useColorMode();
   return (
     <Checkbox colorScheme="accent" {...rest}>
-      <Text color="base.200" fontSize="md">
+      <Text
+        sx={{
+          fontSize: 'sm',
+          color: mode('base.800', 'base.200')(colorMode),
+        }}
+      >
         {label}
       </Text>
     </Checkbox>
diff --git a/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts b/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts
new file mode 100644
index 0000000000..770add7253
--- /dev/null
+++ b/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts
@@ -0,0 +1,124 @@
+import { useToken } from '@chakra-ui/react';
+
+export const useChakraThemeTokens = () => {
+  const [
+    base50,
+    base100,
+    base150,
+    base200,
+    base250,
+    base300,
+    base350,
+    base400,
+    base450,
+    base500,
+    base550,
+    base600,
+    base650,
+    base700,
+    base750,
+    base800,
+    base850,
+    base900,
+    base950,
+    accent50,
+    accent100,
+    accent150,
+    accent200,
+    accent250,
+    accent300,
+    accent350,
+    accent400,
+    accent450,
+    accent500,
+    accent550,
+    accent600,
+    accent650,
+    accent700,
+    accent750,
+    accent800,
+    accent850,
+    accent900,
+    accent950,
+  ] = useToken('colors', [
+    'base.50',
+    'base.100',
+    'base.150',
+    'base.200',
+    'base.250',
+    'base.300',
+    'base.350',
+    'base.400',
+    'base.450',
+    'base.500',
+    'base.550',
+    'base.600',
+    'base.650',
+    'base.700',
+    'base.750',
+    'base.800',
+    'base.850',
+    'base.900',
+    'base.950',
+    'accent.50',
+    'accent.100',
+    'accent.150',
+    'accent.200',
+    'accent.250',
+    'accent.300',
+    'accent.350',
+    'accent.400',
+    'accent.450',
+    'accent.500',
+    'accent.550',
+    'accent.600',
+    'accent.650',
+    'accent.700',
+    'accent.750',
+    'accent.800',
+    'accent.850',
+    'accent.900',
+    'accent.950',
+  ]);
+
+  return {
+    base50,
+    base100,
+    base150,
+    base200,
+    base250,
+    base300,
+    base350,
+    base400,
+    base450,
+    base500,
+    base550,
+    base600,
+    base650,
+    base700,
+    base750,
+    base800,
+    base850,
+    base900,
+    base950,
+    accent50,
+    accent100,
+    accent150,
+    accent200,
+    accent250,
+    accent300,
+    accent350,
+    accent400,
+    accent450,
+    accent500,
+    accent550,
+    accent600,
+    accent650,
+    accent700,
+    accent750,
+    accent800,
+    accent850,
+    accent900,
+    accent950,
+  };
+};
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx
index ad47b77041..1b97acba71 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx
@@ -1,8 +1,7 @@
 // Grid drawing adapted from https://longviewcoder.com/2021/12/08/konva-a-better-grid/
 
-import { useToken } from '@chakra-ui/react';
+import { useColorMode, useToken } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { isEqual, range } from 'lodash-es';
@@ -24,14 +23,14 @@ const selector = createSelector(
 );
 
 const IAICanvasGrid = () => {
-  const currentTheme = useAppSelector(
-    (state: RootState) => state.ui.currentTheme
-  );
   const { stageScale, stageCoordinates, stageDimensions } =
     useAppSelector(selector);
+  const { colorMode } = useColorMode();
   const [gridLines, setGridLines] = useState<ReactNode[]>([]);
-
-  const [gridLineColor] = useToken('colors', ['gridLineColor']);
+  const [darkGridLineColor, lightGridLineColor] = useToken('colors', [
+    'base.800',
+    'base.200',
+  ]);
 
   const unscale = useCallback(
     (value: number) => {
@@ -89,7 +88,7 @@ const IAICanvasGrid = () => {
         x={fullRect.x1 + i * 64}
         y={fullRect.y1}
         points={[0, 0, 0, ySize]}
-        stroke={gridLineColor}
+        stroke={colorMode === 'dark' ? darkGridLineColor : lightGridLineColor}
         strokeWidth={1}
       />
     ));
@@ -99,7 +98,7 @@ const IAICanvasGrid = () => {
         x={fullRect.x1}
         y={fullRect.y1 + i * 64}
         points={[0, 0, xSize, 0]}
-        stroke={gridLineColor}
+        stroke={colorMode === 'dark' ? darkGridLineColor : lightGridLineColor}
         strokeWidth={1}
       />
     ));
@@ -109,9 +108,10 @@ const IAICanvasGrid = () => {
     stageScale,
     stageCoordinates,
     stageDimensions,
-    currentTheme,
     unscale,
-    gridLineColor,
+    colorMode,
+    darkGridLineColor,
+    lightGridLineColor,
   ]);
 
   return <Group>{gridLines}</Group>;
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx
index 8e3edadd01..69bf628a39 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx
@@ -104,7 +104,10 @@ const IAICanvasStatusText = () => {
         margin: 1,
         borderRadius: 'base',
         pointerEvents: 'none',
-        bg: 'base.800',
+        bg: 'base.200',
+        _dark: {
+          bg: 'base.800',
+        },
       }}
     >
       <Box
diff --git a/invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx b/invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx
index 9ed63fe64d..bb01416e1d 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx
+++ b/invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx
@@ -1,4 +1,4 @@
-import { Box, ChakraProps, Flex } from '@chakra-ui/react';
+import { Box, ChakraProps, Flex, useColorMode } from '@chakra-ui/react';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { memo, useCallback } from 'react';
 import { FaCopy, FaTrash } from 'react-icons/fa';
@@ -22,6 +22,7 @@ import ParamControlNetShouldAutoConfig from './ParamControlNetShouldAutoConfig';
 import ParamControlNetBeginEnd from './parameters/ParamControlNetBeginEnd';
 import ParamControlNetControlMode from './parameters/ParamControlNetControlMode';
 import ParamControlNetProcessorSelect from './parameters/ParamControlNetProcessorSelect';
+import { mode } from 'theme/util/mode';
 
 const expandedControlImageSx: ChakraProps['sx'] = { maxH: 96 };
 
@@ -46,7 +47,7 @@ const ControlNet = (props: ControlNetProps) => {
   } = props.controlNet;
   const dispatch = useAppDispatch();
   const [isExpanded, toggleIsExpanded] = useToggle(false);
-
+  const { colorMode } = useColorMode();
   const handleDelete = useCallback(() => {
     dispatch(controlNetRemoved({ controlNetId }));
   }, [controlNetId, dispatch]);
@@ -67,7 +68,7 @@ const ControlNet = (props: ControlNetProps) => {
         flexDir: 'column',
         gap: 2,
         p: 3,
-        bg: 'base.850',
+        bg: mode('base.200', 'base.850')(colorMode),
         borderRadius: 'base',
         position: 'relative',
       }}
@@ -115,7 +116,7 @@ const ControlNet = (props: ControlNetProps) => {
             <ChevronUpIcon
               sx={{
                 boxSize: 4,
-                color: 'base.300',
+                color: mode('base.700', 'base.300')(colorMode),
                 transform: isExpanded ? 'rotate(0deg)' : 'rotate(180deg)',
                 transitionProperty: 'common',
                 transitionDuration: 'normal',
@@ -130,7 +131,7 @@ const ControlNet = (props: ControlNetProps) => {
               w: 1.5,
               h: 1.5,
               borderRadius: 'full',
-              bg: 'error.200',
+              bg: mode('error.700', 'error.200')(colorMode),
               top: 4,
               insetInlineEnd: 4,
             }}
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/AllImagesBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/AllImagesBoard.tsx
index ae1b1a29ae..858329ead6 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/AllImagesBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/AllImagesBoard.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from '@chakra-ui/react';
+import { Flex, Text, useColorMode } from '@chakra-ui/react';
 import { FaImages } from 'react-icons/fa';
 import { boardIdSelected } from '../../store/boardSlice';
 import { useDispatch } from 'react-redux';
@@ -10,9 +10,11 @@ import { ImageDTO } from 'services/api/types';
 import { useRemoveImageFromBoardMutation } from 'services/api/endpoints/boardImages';
 import { useDroppable } from '@dnd-kit/core';
 import IAIDropOverlay from 'common/components/IAIDropOverlay';
+import { mode } from 'theme/util/mode';
 
 const AllImagesBoard = ({ isSelected }: { isSelected: boolean }) => {
   const dispatch = useDispatch();
+  const { colorMode } = useColorMode();
 
   const handleAllImagesBoardClick = () => {
     dispatch(boardIdSelected());
@@ -79,7 +81,9 @@ const AllImagesBoard = ({ isSelected }: { isSelected: boolean }) => {
       </Flex>
       <Text
         sx={{
-          color: isSelected ? 'base.50' : 'base.200',
+          color: isSelected
+            ? mode('base.900', 'base.50')(colorMode)
+            : mode('base.700', 'base.200')(colorMode),
           fontWeight: isSelected ? 600 : undefined,
           fontSize: 'xs',
         }}
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList.tsx
index 21eba1a0a8..fb095b9f42 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList.tsx
@@ -62,13 +62,13 @@ const BoardsList = (props: Props) => {
   return (
     <Collapse in={isOpen} animateOpacity>
       <Flex
+        layerStyle={'first'}
         sx={{
           flexDir: 'column',
           gap: 2,
-          bg: 'base.800',
-          borderRadius: 'base',
           p: 2,
           mt: 2,
+          borderRadius: 'base',
         }}
       >
         <Flex sx={{ gap: 2, alignItems: 'center' }}>
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/HoverableBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/HoverableBoard.tsx
index 535cab1b15..118484f305 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/HoverableBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/HoverableBoard.tsx
@@ -8,6 +8,7 @@ import {
   Image,
   MenuItem,
   MenuList,
+  useColorMode,
 } from '@chakra-ui/react';
 
 import { useAppDispatch } from 'app/store/storeHooks';
@@ -30,6 +31,7 @@ import { AnimatePresence } from 'framer-motion';
 import IAIDropOverlay from 'common/components/IAIDropOverlay';
 import { SelectedItemOverlay } from '../SelectedItemOverlay';
 import { DeleteBoardImagesContext } from '../../../../app/contexts/DeleteBoardImagesContext';
+import { mode } from 'theme/util/mode';
 
 interface HoverableBoardProps {
   board: BoardDTO;
@@ -43,6 +45,8 @@ const HoverableBoard = memo(({ board, isSelected }: HoverableBoardProps) => {
     board.cover_image_name ?? skipToken
   );
 
+  const { colorMode } = useColorMode();
+
   const { board_name, board_id } = board;
 
   const { onClickDeleteBoardImages } = useContext(DeleteBoardImagesContext);
@@ -110,7 +114,7 @@ const HoverableBoard = memo(({ board, isSelected }: HoverableBoardProps) => {
               </MenuItem>
             )}
             <MenuItem
-              sx={{ color: 'error.300' }}
+              sx={{ color: mode('error.700', 'error.300')(colorMode) }}
               icon={<FaTrash />}
               onClickCapture={handleDeleteBoard}
             >
@@ -180,7 +184,9 @@ const HoverableBoard = memo(({ board, isSelected }: HoverableBoardProps) => {
               >
                 <EditablePreview
                   sx={{
-                    color: isSelected ? 'base.50' : 'base.200',
+                    color: isSelected
+                      ? mode('base.900', 'base.50')(colorMode)
+                      : mode('base.700', 'base.200')(colorMode),
                     fontWeight: isSelected ? 600 : undefined,
                     fontSize: 'xs',
                     textAlign: 'center',
@@ -190,9 +196,9 @@ const HoverableBoard = memo(({ board, isSelected }: HoverableBoardProps) => {
                 />
                 <EditableInput
                   sx={{
-                    color: 'base.50',
+                    color: mode('base.900', 'base.50')(colorMode),
                     fontSize: 'xs',
-                    borderColor: 'base.500',
+                    borderColor: mode('base.500', 'base.500')(colorMode),
                     p: 0,
                     outline: 0,
                   }}
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx
index 36c7ed3427..2da5185fe5 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx
@@ -32,7 +32,6 @@ const CurrentImageDisplay = () => {
         height: '100%',
         width: '100%',
         rowGap: 4,
-        borderRadius: 'base',
         alignItems: 'center',
         justifyContent: 'center',
       }}
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
index 24a89604e1..a22eb6d20f 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
@@ -9,6 +9,7 @@ import {
   Text,
   VStack,
   forwardRef,
+  useColorMode,
   useDisclosure,
 } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@@ -61,6 +62,7 @@ import BoardsList from './Boards/BoardsList';
 import { boardsSelector } from '../store/boardSlice';
 import { ChevronUpIcon } from '@chakra-ui/icons';
 import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
+import { mode } from 'theme/util/mode';
 
 const itemSelector = createSelector(
   [(state: RootState) => state],
@@ -135,6 +137,8 @@ const ImageGalleryContent = () => {
     },
   });
 
+  const { colorMode } = useColorMode();
+
   const {
     shouldPinGallery,
     galleryImageMinimumWidth,
@@ -267,13 +271,17 @@ const ImageGalleryContent = () => {
               alignItems: 'center',
               px: 2,
               _hover: {
-                bg: 'base.800',
+                bg: mode('base.100', 'base.800')(colorMode),
               },
             }}
           >
             <Text
               noOfLines={1}
-              sx={{ w: 'full', color: 'base.200', fontWeight: 600 }}
+              sx={{
+                w: 'full',
+                color: mode('base.800', 'base.200')(colorMode),
+                fontWeight: 600,
+              }}
             >
               {selectedBoard ? selectedBoard.board_name : 'All Images'}
             </Text>
diff --git a/invokeai/frontend/web/src/features/gallery/components/SelectedItemOverlay.tsx b/invokeai/frontend/web/src/features/gallery/components/SelectedItemOverlay.tsx
index 7038b4b64f..3fabe706d6 100644
--- a/invokeai/frontend/web/src/features/gallery/components/SelectedItemOverlay.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/SelectedItemOverlay.tsx
@@ -1,26 +1,40 @@
+import { useColorMode, useToken } from '@chakra-ui/react';
 import { motion } from 'framer-motion';
+import { mode } from 'theme/util/mode';
 
-export const SelectedItemOverlay = () => (
-  <motion.div
-    initial={{
-      opacity: 0,
-    }}
-    animate={{
-      opacity: 1,
-      transition: { duration: 0.1 },
-    }}
-    exit={{
-      opacity: 0,
-      transition: { duration: 0.1 },
-    }}
-    style={{
-      position: 'absolute',
-      top: 0,
-      insetInlineStart: 0,
-      width: '100%',
-      height: '100%',
-      boxShadow: 'inset 0px 0px 0px 2px var(--invokeai-colors-accent-300)',
-      borderRadius: 'var(--invokeai-radii-base)',
-    }}
-  />
-);
+export const SelectedItemOverlay = () => {
+  const [accent400, accent500] = useToken('colors', [
+    'accent.400',
+    'accent.500',
+  ]);
+
+  const { colorMode } = useColorMode();
+
+  return (
+    <motion.div
+      initial={{
+        opacity: 0,
+      }}
+      animate={{
+        opacity: 1,
+        transition: { duration: 0.1 },
+      }}
+      exit={{
+        opacity: 0,
+        transition: { duration: 0.1 },
+      }}
+      style={{
+        position: 'absolute',
+        top: 0,
+        insetInlineStart: 0,
+        width: '100%',
+        height: '100%',
+        boxShadow: `inset 0px 0px 0px 2px ${mode(
+          accent400,
+          accent500
+        )(colorMode)}`,
+        borderRadius: 'var(--invokeai-radii-base)',
+      }}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx b/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx
index f944c6e463..74b883b1d6 100644
--- a/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx
@@ -12,15 +12,25 @@ const IAINodeHeader = (props: IAINodeHeaderProps) => {
   const { nodeId, template } = props;
   return (
     <Flex
-      borderTopRadius="md"
-      justifyContent="space-between"
-      background="base.700"
-      px={2}
-      py={1}
-      alignItems="center"
+      sx={{
+        borderTopRadius: 'md',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        px: 2,
+        py: 1,
+        bg: 'base.300',
+        _dark: { bg: 'base.700' },
+      }}
     >
       <Tooltip label={nodeId}>
-        <Heading size="xs" fontWeight={600} color="base.100">
+        <Heading
+          size="xs"
+          sx={{
+            fontWeight: 600,
+            color: 'base.900',
+            _dark: { color: 'base.100' },
+          }}
+        >
           {template.title}
         </Heading>
       </Tooltip>
@@ -30,7 +40,16 @@ const IAINodeHeader = (props: IAINodeHeaderProps) => {
         hasArrow
         shouldWrapChildren
       >
-        <Icon color="base.300" as={FaInfoCircle} h="min-content" />
+        <Icon
+          sx={{
+            h: 'min-content',
+            color: 'base.700',
+            _dark: {
+              color: 'base.300',
+            },
+          }}
+          as={FaInfoCircle}
+        />
       </Tooltip>
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
index 909fd4b556..fc3a6377b2 100644
--- a/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
@@ -72,7 +72,14 @@ export const InvocationComponent = memo((props: NodeProps<InvocationValue>) => {
     return (
       <InvocationComponentWrapper selected={selected}>
         <Flex sx={{ alignItems: 'center', justifyContent: 'center' }}>
-          <Icon color="base.400" boxSize={32} as={FaExclamationCircle}></Icon>
+          <Icon
+            as={FaExclamationCircle}
+            sx={{
+              boxSize: 32,
+              color: 'base.600',
+              _dark: { color: 'base.400' },
+            }}
+          ></Icon>
           <IAINodeResizer />
         </Flex>
       </InvocationComponentWrapper>
@@ -86,8 +93,9 @@ export const InvocationComponent = memo((props: NodeProps<InvocationValue>) => {
         sx={{
           flexDirection: 'column',
           borderBottomRadius: 'md',
-          bg: 'base.800',
           py: 2,
+          bg: 'base.200',
+          _dark: { bg: 'base.800' },
         }}
       >
         <IAINodeOutputs nodeId={nodeId} outputs={outputs} template={template} />
diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
index 05f8c2a893..2be98b1cb9 100644
--- a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
@@ -8,12 +8,12 @@ import { memo } from 'react';
 const NodeEditor = () => {
   return (
     <Box
+      layerStyle={'first'}
       sx={{
         position: 'relative',
         width: 'full',
         height: 'full',
-        borderRadius: 'md',
-        bg: 'base.850',
+        borderRadius: 'base',
       }}
     >
       <ReactFlowProvider>
diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeGraphOverlay.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeGraphOverlay.tsx
index ef6f89bed0..1d498f19f5 100644
--- a/invokeai/frontend/web/src/features/nodes/components/NodeGraphOverlay.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/NodeGraphOverlay.tsx
@@ -11,17 +11,20 @@ const NodeGraphOverlay = () => {
   return (
     <Box
       as="pre"
-      fontFamily="monospace"
-      position="absolute"
-      top={2}
-      right={2}
-      opacity={0.7}
-      background="base.800"
-      p={2}
-      maxHeight={500}
-      maxWidth={500}
-      overflowY="scroll"
-      borderRadius="md"
+      sx={{
+        fontFamily: 'monospace',
+        position: 'absolute',
+        top: 2,
+        right: 2,
+        opacity: 0.7,
+        p: 2,
+        maxHeight: 500,
+        maxWidth: 500,
+        overflowY: 'scroll',
+        borderRadius: 'base',
+        bg: 'base.200',
+        _dark: { bg: 'base.800' },
+      }}
     >
       {JSON.stringify(graph, null, 2)}
     </Box>
diff --git a/invokeai/frontend/web/src/features/nodes/components/panels/MinimapPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/panels/MinimapPanel.tsx
index 2d76e2911f..1ad4cc78ce 100644
--- a/invokeai/frontend/web/src/features/nodes/components/panels/MinimapPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/panels/MinimapPanel.tsx
@@ -1,15 +1,25 @@
-import { RootState } from 'app/store/store';
-import { useAppSelector } from 'app/store/storeHooks';
-import { CSSProperties, memo } from 'react';
+import { useColorModeValue } from '@chakra-ui/react';
+import { memo } from 'react';
 import { MiniMap } from 'reactflow';
 
-const MinimapStyle: CSSProperties = {
-  background: 'var(--invokeai-colors-base-500)',
-};
-
 const MinimapPanel = () => {
-  const currentTheme = useAppSelector(
-    (state: RootState) => state.ui.currentTheme
+  const miniMapStyle = useColorModeValue(
+    {
+      background: 'var(--invokeai-colors-base-200)',
+    },
+    {
+      background: 'var(--invokeai-colors-base-500)',
+    }
+  );
+
+  const nodeColor = useColorModeValue(
+    'var(--invokeai-colors-accent-300)',
+    'var(--invokeai-colors-accent-700)'
+  );
+
+  const maskColor = useColorModeValue(
+    'var(--invokeai-colors-blackAlpha-300)',
+    'var(--invokeai-colors-blackAlpha-600)'
   );
 
   return (
@@ -18,15 +28,9 @@ const MinimapPanel = () => {
       pannable
       zoomable
       nodeBorderRadius={30}
-      style={MinimapStyle}
-      nodeColor={
-        currentTheme === 'light'
-          ? 'var(--invokeai-colors-accent-700)'
-          : currentTheme === 'green'
-          ? 'var(--invokeai-colors-accent-600)'
-          : 'var(--invokeai-colors-accent-700)'
-      }
-      maskColor="var(--invokeai-colors-base-700)"
+      style={miniMapStyle}
+      nodeColor={nodeColor}
+      maskColor={maskColor}
     />
   );
 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx
index 64974f0d35..19eb45a0a9 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx
@@ -4,17 +4,17 @@ import InitialImagePreview from './InitialImagePreview';
 const InitialImageDisplay = () => {
   return (
     <Flex
+      layerStyle={'first'}
       sx={{
         position: 'relative',
         flexDirection: 'column',
         height: '100%',
         width: '100%',
         rowGap: 4,
-        borderRadius: 'base',
         alignItems: 'center',
         justifyContent: 'center',
-        bg: 'base.850',
         p: 4,
+        borderRadius: 'base',
       }}
     >
       <Flex
diff --git a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/CancelButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/CancelButton.tsx
index 701a6ac4df..bb6e7e862d 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/CancelButton.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/CancelButton.tsx
@@ -1,33 +1,32 @@
+import {
+  ButtonGroup,
+  ButtonProps,
+  ButtonSpinner,
+  Menu,
+  MenuButton,
+  MenuItemOption,
+  MenuList,
+  MenuOptionGroup,
+} from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAIIconButton, {
-  IAIIconButtonProps,
-} from 'common/components/IAIIconButton';
+import IAIIconButton from 'common/components/IAIIconButton';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import {
+  CancelStrategy,
   SystemState,
   cancelScheduled,
   cancelTypeChanged,
-  CancelStrategy,
 } from 'features/system/store/systemSlice';
 import { isEqual } from 'lodash-es';
-import { useCallback, memo, useMemo } from 'react';
-import {
-  ButtonSpinner,
-  ButtonGroup,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuOptionGroup,
-  MenuItemOption,
-} from '@chakra-ui/react';
+import { memo, useCallback, useMemo } from 'react';
 
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { MdCancel, MdCancelScheduleSend } from 'react-icons/md';
 
-import { sessionCanceled } from 'services/api/thunks/session';
 import { ChevronDownIcon } from '@chakra-ui/icons';
+import { sessionCanceled } from 'services/api/thunks/session';
 
 const cancelButtonSelector = createSelector(
   systemSelector,
@@ -55,7 +54,7 @@ interface CancelButtonProps {
 }
 
 const CancelButton = (
-  props: CancelButtonProps & Omit<IAIIconButtonProps, 'aria-label'>
+  props: CancelButtonProps & Omit<ButtonProps, 'aria-label'>
 ) => {
   const dispatch = useAppDispatch();
   const { btnGroupWidth = 'auto', ...rest } = props;
@@ -145,6 +144,7 @@ const CancelButton = (
           paddingY={0}
           colorScheme="error"
           minWidth={5}
+          {...rest}
         />
         <MenuList minWidth="240px">
           <MenuOptionGroup
diff --git a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx
index 449280aa03..6f82562e48 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx
@@ -71,7 +71,7 @@ export default function InvokeButton(props: InvokeButton) {
             flexGrow={1}
             w="100%"
             tooltip={t('parameters.invoke')}
-            tooltipProps={{ placement: 'bottom' }}
+            tooltipProps={{ placement: 'top' }}
             colorScheme="accent"
             id="invoke-button"
             {...rest}
diff --git a/invokeai/frontend/web/src/features/system/components/ColorModeButton.tsx b/invokeai/frontend/web/src/features/system/components/ColorModeButton.tsx
new file mode 100644
index 0000000000..9bf748146c
--- /dev/null
+++ b/invokeai/frontend/web/src/features/system/components/ColorModeButton.tsx
@@ -0,0 +1,32 @@
+import { useColorMode } from '@chakra-ui/react';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { useTranslation } from 'react-i18next';
+import { FaMoon, FaSun } from 'react-icons/fa';
+
+const ColorModeButton = () => {
+  const { colorMode, toggleColorMode } = useColorMode();
+  const { t } = useTranslation();
+
+  return (
+    <IAIIconButton
+      aria-label={
+        colorMode === 'dark' ? t('common.lightMode') : t('common.darkMode')
+      }
+      tooltip={
+        colorMode === 'dark' ? t('common.lightMode') : t('common.darkMode')
+      }
+      size="sm"
+      icon={
+        colorMode === 'dark' ? (
+          <FaSun fontSize={19} />
+        ) : (
+          <FaMoon fontSize={18} />
+        )
+      }
+      onClick={toggleColorMode}
+      variant="link"
+    />
+  );
+};
+
+export default ColorModeButton;
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
index dfba1da4ef..c9508bb5fe 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
@@ -1,5 +1,4 @@
 import {
-  ChakraProps,
   Flex,
   Heading,
   Modal,
@@ -39,6 +38,7 @@ import { UIState } from 'features/ui/store/uiTypes';
 import { isEqual } from 'lodash-es';
 import {
   ChangeEvent,
+  PropsWithChildren,
   ReactElement,
   cloneElement,
   useCallback,
@@ -83,14 +83,6 @@ const selector = createSelector(
   }
 );
 
-const modalSectionStyles: ChakraProps['sx'] = {
-  flexDirection: 'column',
-  gap: 2,
-  p: 4,
-  bg: 'base.900',
-  borderRadius: 'base',
-};
-
 type ConfigOptions = {
   shouldShowDeveloperSettings: boolean;
   shouldShowResetWebUiText: boolean;
@@ -183,12 +175,12 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
         isCentered
       >
         <ModalOverlay />
-        <ModalContent paddingInlineEnd={4}>
+        <ModalContent>
           <ModalHeader>{t('common.settingsLabel')}</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
             <Flex sx={{ gap: 4, flexDirection: 'column' }}>
-              <Flex sx={modalSectionStyles}>
+              <StyledFlex>
                 <Heading size="sm">{t('settings.general')}</Heading>
                 <IAISwitch
                   label={t('settings.confirmOnDelete')}
@@ -197,14 +189,14 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                     dispatch(setShouldConfirmOnDelete(e.target.checked))
                   }
                 />
-              </Flex>
+              </StyledFlex>
 
-              <Flex sx={modalSectionStyles}>
+              <StyledFlex>
                 <Heading size="sm">{t('settings.generation')}</Heading>
                 <SettingsSchedulers />
-              </Flex>
+              </StyledFlex>
 
-              <Flex sx={modalSectionStyles}>
+              <StyledFlex>
                 <Heading size="sm">{t('settings.ui')}</Heading>
                 <IAISwitch
                   label={t('settings.displayHelpIcons')}
@@ -245,10 +237,10 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                     )
                   }
                 />
-              </Flex>
+              </StyledFlex>
 
               {shouldShowDeveloperSettings && (
-                <Flex sx={modalSectionStyles}>
+                <StyledFlex>
                   <Heading size="sm">{t('settings.developer')}</Heading>
                   <IAISwitch
                     label={t('settings.shouldLogToConsole')}
@@ -269,10 +261,10 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                       dispatch(setEnableImageDebugging(e.target.checked))
                     }
                   />
-                </Flex>
+                </StyledFlex>
               )}
 
-              <Flex sx={modalSectionStyles}>
+              <StyledFlex>
                 <Heading size="sm">{t('settings.resetWebUI')}</Heading>
                 <IAIButton colorScheme="error" onClick={handleClickResetWebUI}>
                   {t('settings.resetWebUI')}
@@ -283,7 +275,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                     <Text>{t('settings.resetWebUIDesc2')}</Text>
                   </>
                 )}
-              </Flex>
+              </StyledFlex>
             </Flex>
           </ModalBody>
 
@@ -319,3 +311,19 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
 };
 
 export default SettingsModal;
+
+const StyledFlex = (props: PropsWithChildren) => {
+  return (
+    <Flex
+      layerStyle="second"
+      sx={{
+        flexDirection: 'column',
+        gap: 2,
+        p: 4,
+        borderRadius: 'base',
+      }}
+    >
+      {props.children}
+    </Flex>
+  );
+};
diff --git a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx b/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx
index 66a2de325e..0c94c1d2f9 100644
--- a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx
@@ -12,8 +12,8 @@ import InvokeAILogoComponent from './InvokeAILogoComponent';
 import LanguagePicker from './LanguagePicker';
 import ModelManagerModal from './ModelManager/ModelManagerModal';
 import SettingsModal from './SettingsModal/SettingsModal';
-import ThemeChanger from './ThemeChanger';
 import { useFeatureStatus } from '../hooks/useFeatureStatus';
+import ColorModeButton from './ColorModeButton';
 
 const SiteHeader = () => {
   const { t } = useTranslation();
@@ -63,8 +63,6 @@ const SiteHeader = () => {
         />
       </HotkeysModal>
 
-      <ThemeChanger />
-
       {isLocalizationEnabled && <LanguagePicker />}
 
       {isBugLinkEnabled && (
@@ -121,6 +119,8 @@ const SiteHeader = () => {
         </Link>
       )}
 
+      <ColorModeButton />
+
       <SettingsModal>
         <IAIIconButton
           aria-label={t('common.settingsLabel')}
diff --git a/invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx b/invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx
index ddb18cb8d7..fc64f0275b 100644
--- a/invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx
@@ -1,12 +1,12 @@
 import { Flex, Link } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { FaCube, FaKeyboard, FaBug, FaGithub, FaDiscord } from 'react-icons/fa';
+import { FaBug, FaCube, FaDiscord, FaGithub, FaKeyboard } from 'react-icons/fa';
 import { MdSettings } from 'react-icons/md';
 import HotkeysModal from './HotkeysModal/HotkeysModal';
 import LanguagePicker from './LanguagePicker';
 import ModelManagerModal from './ModelManager/ModelManagerModal';
 import SettingsModal from './SettingsModal/SettingsModal';
-import ThemeChanger from './ThemeChanger';
+
 import IAIIconButton from 'common/components/IAIIconButton';
 import { useFeatureStatus } from '../hooks/useFeatureStatus';
 
@@ -53,8 +53,6 @@ const SiteHeaderMenu = () => {
         />
       </HotkeysModal>
 
-      <ThemeChanger />
-
       {isLocalizationEnabled && <LanguagePicker />}
 
       {isBugLinkEnabled && (
diff --git a/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx b/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
index cd0a4eacc3..c5945140c3 100644
--- a/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
+++ b/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
@@ -35,6 +35,18 @@ const statusIndicatorSelector = createSelector(
   defaultSelectorOptions
 );
 
+const DARK_COLOR_MAP = {
+  ok: 'green.400',
+  working: 'yellow.400',
+  error: 'red.400',
+};
+
+const LIGHT_COLOR_MAP = {
+  ok: 'green.600',
+  working: 'yellow.500',
+  error: 'red.500',
+};
+
 const StatusIndicator = () => {
   const {
     isConnected,
@@ -46,7 +58,7 @@ const StatusIndicator = () => {
   const { t } = useTranslation();
   const ref = useRef(null);
 
-  const statusColorScheme = useMemo(() => {
+  const statusString = useMemo(() => {
     if (isProcessing) {
       return 'working';
     }
@@ -90,9 +102,10 @@ const StatusIndicator = () => {
               sx={{
                 fontSize: 'sm',
                 fontWeight: '600',
-                color: `${statusColorScheme}.400`,
                 pb: '1px',
                 userSelect: 'none',
+                color: LIGHT_COLOR_MAP[statusString],
+                _dark: { color: DARK_COLOR_MAP[statusString] },
               }}
             >
               {t(statusTranslationKey as ResourceKey)}
@@ -101,7 +114,14 @@ const StatusIndicator = () => {
           </motion.div>
         )}
       </AnimatePresence>
-      <Icon as={FaCircle} boxSize="0.5rem" color={`${statusColorScheme}.400`} />
+      <Icon
+        as={FaCircle}
+        sx={{
+          boxSize: '0.5rem',
+          color: LIGHT_COLOR_MAP[statusString],
+          _dark: { color: DARK_COLOR_MAP[statusString] },
+        }}
+      />
     </Flex>
   );
 };
diff --git a/invokeai/frontend/web/src/features/system/components/ThemeChanger.tsx b/invokeai/frontend/web/src/features/system/components/ThemeChanger.tsx
deleted file mode 100644
index d9426eecf2..0000000000
--- a/invokeai/frontend/web/src/features/system/components/ThemeChanger.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuItemOption,
-  MenuList,
-  MenuOptionGroup,
-  Tooltip,
-} from '@chakra-ui/react';
-import { RootState } from 'app/store/store';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { setCurrentTheme } from 'features/ui/store/uiSlice';
-import i18n from 'i18n';
-import { map } from 'lodash-es';
-import { useTranslation } from 'react-i18next';
-import { FaPalette } from 'react-icons/fa';
-
-export const THEMES = {
-  dark: i18n.t('common.darkTheme'),
-  light: i18n.t('common.lightTheme'),
-  green: i18n.t('common.greenTheme'),
-  ocean: i18n.t('common.oceanTheme'),
-};
-
-export default function ThemeChanger() {
-  const { t } = useTranslation();
-
-  const dispatch = useAppDispatch();
-  const currentTheme = useAppSelector(
-    (state: RootState) => state.ui.currentTheme
-  );
-
-  return (
-    <Menu closeOnSelect={false}>
-      <Tooltip label={t('common.themeLabel')} hasArrow>
-        <MenuButton
-          as={IconButton}
-          icon={<FaPalette />}
-          variant="link"
-          aria-label={t('common.themeLabel')}
-          fontSize={20}
-          minWidth={8}
-        />
-      </Tooltip>
-      <MenuList>
-        <MenuOptionGroup value={currentTheme}>
-          {map(THEMES, (themeName, themeKey: keyof typeof THEMES) => (
-            <MenuItemOption
-              key={themeKey}
-              value={themeKey}
-              onClick={() => dispatch(setCurrentTheme(themeKey))}
-            >
-              {themeName}
-            </MenuItemOption>
-          ))}
-        </MenuOptionGroup>
-      </MenuList>
-    </Menu>
-  );
-}
diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
index c816c9b39e..3e2c2153e6 100644
--- a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
@@ -51,6 +51,7 @@ const FloatingGalleryButton = () => {
         w: 8,
         borderStartEndRadius: 0,
         borderEndEndRadius: 0,
+        shadow: '2xl',
       }}
     >
       <MdPhotoLibrary />
diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
index 4f4995ffa7..0969426339 100644
--- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
@@ -19,6 +19,7 @@ import { FaSlidersH } from 'react-icons/fa';
 const floatingButtonStyles: ChakraProps['sx'] = {
   borderStartStartRadius: 0,
   borderEndStartRadius: 0,
+  shadow: '2xl',
 };
 
 export const floatingParametersPanelButtonSelector = createSelector(
diff --git a/invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx b/invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx
index 760b910632..0eb4677182 100644
--- a/invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx
@@ -6,6 +6,7 @@ import {
   useOutsideClick,
   useTheme,
   SlideDirection,
+  useColorMode,
 } from '@chakra-ui/react';
 import {
   Resizable,
@@ -21,6 +22,7 @@ import {
   getSlideDirection,
   getStyles,
 } from './util';
+import { mode } from 'theme/util/mode';
 
 type ResizableDrawerProps = ResizableProps & {
   children: ReactNode;
@@ -64,7 +66,7 @@ const ResizableDrawer = ({
   sx = {},
 }: ResizableDrawerProps) => {
   const langDirection = useTheme().direction as LangDirection;
-
+  const { colorMode } = useColorMode();
   const outsideClickRef = useRef<HTMLDivElement>(null);
 
   const defaultWidth = useMemo(
@@ -160,11 +162,11 @@ const ResizableDrawer = ({
           handleStyles={handleStyles}
           {...minMaxDimensions}
           sx={{
-            borderColor: 'base.800',
+            borderColor: mode('base.200', 'base.800')(colorMode),
             p: 4,
-            bg: 'base.900',
+            bg: mode('base.100', 'base.900')(colorMode),
             height: 'full',
-            boxShadow: '0 0 4rem 0 rgba(0, 0, 0, 0.8)',
+            shadow: isOpen ? 'dark-lg' : undefined,
             ...containerStyles,
             ...sx,
           }}
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx
index d53a4d4fef..7ef0b48784 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx
@@ -1,6 +1,7 @@
-import { Box, Flex, FlexProps } from '@chakra-ui/react';
+import { Box, Flex, FlexProps, useColorMode } from '@chakra-ui/react';
 import { memo } from 'react';
 import { PanelResizeHandle } from 'react-resizable-panels';
+import { mode } from 'theme/util/mode';
 
 type ResizeHandleProps = FlexProps & {
   direction?: 'horizontal' | 'vertical';
@@ -8,6 +9,7 @@ type ResizeHandleProps = FlexProps & {
 
 const ResizeHandle = (props: ResizeHandleProps) => {
   const { direction = 'horizontal', ...rest } = props;
+  const { colorMode } = useColorMode();
 
   if (direction === 'horizontal') {
     return (
@@ -21,7 +23,13 @@ const ResizeHandle = (props: ResizeHandleProps) => {
           }}
           {...rest}
         >
-          <Box sx={{ w: 0.5, h: 'calc(100% - 4px)', bg: 'base.850' }} />
+          <Box
+            sx={{
+              w: 0.5,
+              h: 'calc(100% - 4px)',
+              bg: mode('base.100', 'base.850')(colorMode),
+            }}
+          />
         </Flex>
       </PanelResizeHandle>
     );
@@ -38,7 +46,13 @@ const ResizeHandle = (props: ResizeHandleProps) => {
         }}
         {...rest}
       >
-        <Box sx={{ w: 'calc(100% - 4px)', h: 0.5, bg: 'base.850' }} />
+        <Box
+          sx={{
+            w: 'calc(100% - 4px)',
+            h: 0.5,
+            bg: mode('base.100', 'base.850')(colorMode),
+          }}
+        />
       </Flex>
     </PanelResizeHandle>
   );
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx
index b6cfcf72c3..de21cb14eb 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx
@@ -4,13 +4,13 @@ import CurrentImageDisplay from 'features/gallery/components/CurrentImageDisplay
 const TextToImageTabMain = () => {
   return (
     <Box
+      layerStyle={'first'}
       sx={{
         position: 'relative',
         width: '100%',
         height: '100%',
-        borderRadius: 'base',
-        bg: 'base.850',
         p: 4,
+        borderRadius: 'base',
       }}
     >
       <Flex
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx
index d4b75fec1d..77085bcb75 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx
@@ -67,14 +67,14 @@ const UnifiedCanvasContent = () => {
   if (shouldUseCanvasBetaLayout) {
     return (
       <Box
+        layerStyle="first"
         ref={setDroppableRef}
         tabIndex={0}
         sx={{
           w: 'full',
           h: 'full',
-          borderRadius: 'base',
-          bg: 'base.850',
           p: 4,
+          borderRadius: 'base',
         }}
       >
         <Flex
@@ -110,11 +110,11 @@ const UnifiedCanvasContent = () => {
       ref={setDroppableRef}
       tabIndex={-1}
       sx={{
+        layerStyle: 'first',
         w: 'full',
         h: 'full',
-        borderRadius: 'base',
-        bg: 'base.850',
         p: 4,
+        borderRadius: 'base',
       }}
     >
       <Flex
diff --git a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
index 36c514e995..38af668cac 100644
--- a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
@@ -8,7 +8,6 @@ import { SchedulerParam } from 'features/parameters/store/parameterZodSchemas';
 
 export const initialUIState: UIState = {
   activeTab: 0,
-  currentTheme: 'dark',
   shouldPinParametersPanel: true,
   shouldShowParametersPanel: true,
   shouldShowImageDetails: false,
@@ -30,9 +29,6 @@ export const uiSlice = createSlice({
     setActiveTab: (state, action: PayloadAction<number | InvokeTabName>) => {
       setActiveTabReducer(state, action.payload);
     },
-    setCurrentTheme: (state, action: PayloadAction<string>) => {
-      state.currentTheme = action.payload;
-    },
     setShouldPinParametersPanel: (state, action: PayloadAction<boolean>) => {
       state.shouldPinParametersPanel = action.payload;
       state.shouldShowParametersPanel = true;
@@ -110,7 +106,6 @@ export const uiSlice = createSlice({
 
 export const {
   setActiveTab,
-  setCurrentTheme,
   setShouldPinParametersPanel,
   setShouldShowParametersPanel,
   setShouldShowImageDetails,
diff --git a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
index 2a9a82fbe8..d55a1d8fcf 100644
--- a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
@@ -16,7 +16,6 @@ export type Rect = Coordinates & Dimensions;
 
 export interface UIState {
   activeTab: number;
-  currentTheme: string;
   shouldPinParametersPanel: boolean;
   shouldShowParametersPanel: boolean;
   shouldShowImageDetails: boolean;
diff --git a/invokeai/frontend/web/src/index.ts b/invokeai/frontend/web/src/index.ts
index 274f9d5a0b..a2ce849cfd 100644
--- a/invokeai/frontend/web/src/index.ts
+++ b/invokeai/frontend/web/src/index.ts
@@ -1,9 +1,8 @@
-export { default as InvokeAiLogoComponent } from './features/system/components/InvokeAILogoComponent';
-export { default as ThemeChanger } from './features/system/components/ThemeChanger';
-export { default as IAIPopover } from './common/components/IAIPopover';
-export { default as IAIIconButton } from './common/components/IAIIconButton';
-export { default as SettingsModal } from './features/system/components/SettingsModal/SettingsModal';
-export { default as StatusIndicator } from './features/system/components/StatusIndicator';
-export { default as ModelSelect } from './features/system/components/ModelSelect';
 export { default as InvokeAIUI } from './app/components/InvokeAIUI';
 export type { PartialAppConfig } from './app/types/invokeai';
+export { default as IAIIconButton } from './common/components/IAIIconButton';
+export { default as IAIPopover } from './common/components/IAIPopover';
+export { default as InvokeAiLogoComponent } from './features/system/components/InvokeAILogoComponent';
+export { default as ModelSelect } from './features/system/components/ModelSelect';
+export { default as SettingsModal } from './features/system/components/SettingsModal/SettingsModal';
+export { default as StatusIndicator } from './features/system/components/StatusIndicator';
diff --git a/invokeai/frontend/web/src/mantine-theme/theme.ts b/invokeai/frontend/web/src/mantine-theme/theme.ts
index 081b2c3457..21dbd285f1 100644
--- a/invokeai/frontend/web/src/mantine-theme/theme.ts
+++ b/invokeai/frontend/web/src/mantine-theme/theme.ts
@@ -2,7 +2,7 @@ import { MantineThemeOverride } from '@mantine/core';
 
 export const mantineTheme: MantineThemeOverride = {
   colorScheme: 'dark',
-  fontFamily: `'InterVariable', sans-serif`,
+  fontFamily: `'Inter Variable', sans-serif`,
   components: {
     ScrollArea: {
       defaultProps: {
diff --git a/invokeai/frontend/web/src/theme/colors/colors.ts b/invokeai/frontend/web/src/theme/colors/colors.ts
new file mode 100644
index 0000000000..bcb2e43c0b
--- /dev/null
+++ b/invokeai/frontend/web/src/theme/colors/colors.ts
@@ -0,0 +1,24 @@
+import { InvokeAIThemeColors } from 'theme/themeTypes';
+import { generateColorPalette } from 'theme/util/generateColorPalette';
+
+const BASE = { H: 220, S: 16 };
+const ACCENT = { H: 250, S: 52 };
+const WORKING = { H: 47, S: 50 };
+const WARNING = { H: 28, S: 50 };
+const OK = { H: 113, S: 50 };
+const ERROR = { H: 0, S: 50 };
+
+export const InvokeAIColors: InvokeAIThemeColors = {
+  base: generateColorPalette(BASE.H, BASE.S),
+  baseAlpha: generateColorPalette(BASE.H, BASE.S, true),
+  accent: generateColorPalette(ACCENT.H, ACCENT.S),
+  accentAlpha: generateColorPalette(ACCENT.H, ACCENT.S, true),
+  working: generateColorPalette(WORKING.H, WORKING.S),
+  workingAlpha: generateColorPalette(WORKING.H, WORKING.S, true),
+  warning: generateColorPalette(WARNING.H, WARNING.S),
+  warningAlpha: generateColorPalette(WARNING.H, WARNING.S, true),
+  ok: generateColorPalette(OK.H, OK.S),
+  okAlpha: generateColorPalette(OK.H, OK.S, true),
+  error: generateColorPalette(ERROR.H, ERROR.S),
+  errorAlpha: generateColorPalette(ERROR.H, ERROR.S, true),
+};
diff --git a/invokeai/frontend/web/src/theme/colors/greenTea.ts b/invokeai/frontend/web/src/theme/colors/greenTea.ts
deleted file mode 100644
index 318aecbc61..0000000000
--- a/invokeai/frontend/web/src/theme/colors/greenTea.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { InvokeAIThemeColors } from 'theme/themeTypes';
-import { generateColorPalette } from '../util/generateColorPalette';
-
-export const greenTeaThemeColors: InvokeAIThemeColors = {
-  base: generateColorPalette(223, 10),
-  baseAlpha: generateColorPalette(223, 10, false, true),
-  accent: generateColorPalette(160, 60),
-  accentAlpha: generateColorPalette(160, 60, false, true),
-  working: generateColorPalette(47, 68),
-  workingAlpha: generateColorPalette(47, 68, false, true),
-  warning: generateColorPalette(28, 75),
-  warningAlpha: generateColorPalette(28, 75, false, true),
-  ok: generateColorPalette(122, 49),
-  okAlpha: generateColorPalette(122, 49, false, true),
-  error: generateColorPalette(0, 50),
-  errorAlpha: generateColorPalette(0, 50, false, true),
-  gridLineColor: 'rgba(255, 255, 255, 0.15)',
-};
diff --git a/invokeai/frontend/web/src/theme/colors/invokeAI.ts b/invokeai/frontend/web/src/theme/colors/invokeAI.ts
deleted file mode 100644
index 82db58bd35..0000000000
--- a/invokeai/frontend/web/src/theme/colors/invokeAI.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { InvokeAIThemeColors } from 'theme/themeTypes';
-import { generateColorPalette } from 'theme/util/generateColorPalette';
-
-export const invokeAIThemeColors: InvokeAIThemeColors = {
-  base: generateColorPalette(220, 15),
-  baseAlpha: generateColorPalette(220, 15, false, true),
-  accent: generateColorPalette(250, 50),
-  accentAlpha: generateColorPalette(250, 50, false, true),
-  working: generateColorPalette(47, 67),
-  workingAlpha: generateColorPalette(47, 67, false, true),
-  warning: generateColorPalette(28, 75),
-  warningAlpha: generateColorPalette(28, 75, false, true),
-  ok: generateColorPalette(113, 70),
-  okAlpha: generateColorPalette(113, 70, false, true),
-  error: generateColorPalette(0, 76),
-  errorAlpha: generateColorPalette(0, 76, false, true),
-  gridLineColor: 'rgba(150, 150, 180, 0.15)',
-};
diff --git a/invokeai/frontend/web/src/theme/colors/lightTheme.ts b/invokeai/frontend/web/src/theme/colors/lightTheme.ts
deleted file mode 100644
index 2fdbd1a769..0000000000
--- a/invokeai/frontend/web/src/theme/colors/lightTheme.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { InvokeAIThemeColors } from 'theme/themeTypes';
-import { generateColorPalette } from '../util/generateColorPalette';
-
-export const lightThemeColors: InvokeAIThemeColors = {
-  base: generateColorPalette(223, 10, true),
-  baseAlpha: generateColorPalette(223, 10, true, true),
-  accent: generateColorPalette(40, 80, true),
-  accentAlpha: generateColorPalette(40, 80, true, true),
-  working: generateColorPalette(47, 68, true),
-  workingAlpha: generateColorPalette(47, 68, true, true),
-  warning: generateColorPalette(28, 75, true),
-  warningAlpha: generateColorPalette(28, 75, true, true),
-  ok: generateColorPalette(122, 49, true),
-  okAlpha: generateColorPalette(122, 49, true, true),
-  error: generateColorPalette(0, 50, true),
-  errorAlpha: generateColorPalette(0, 50, true, true),
-  gridLineColor: 'rgba(0, 0, 0, 0.15)',
-};
diff --git a/invokeai/frontend/web/src/theme/colors/oceanBlue.ts b/invokeai/frontend/web/src/theme/colors/oceanBlue.ts
deleted file mode 100644
index 952e0a5066..0000000000
--- a/invokeai/frontend/web/src/theme/colors/oceanBlue.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { InvokeAIThemeColors } from 'theme/themeTypes';
-import { generateColorPalette } from '../util/generateColorPalette';
-
-export const oceanBlueColors: InvokeAIThemeColors = {
-  base: generateColorPalette(220, 30),
-  baseAlpha: generateColorPalette(220, 30, false, true),
-  accent: generateColorPalette(210, 80),
-  accentAlpha: generateColorPalette(210, 80, false, true),
-  working: generateColorPalette(47, 68),
-  workingAlpha: generateColorPalette(47, 68, false, true),
-  warning: generateColorPalette(28, 75),
-  warningAlpha: generateColorPalette(28, 75, false, true),
-  ok: generateColorPalette(122, 49),
-  okAlpha: generateColorPalette(122, 49, false, true),
-  error: generateColorPalette(0, 100),
-  errorAlpha: generateColorPalette(0, 100, false, true),
-  gridLineColor: 'rgba(136, 148, 184, 0.15)',
-};
diff --git a/invokeai/frontend/web/src/theme/components/accordion.ts b/invokeai/frontend/web/src/theme/components/accordion.ts
index 3477548c70..912e55d35b 100644
--- a/invokeai/frontend/web/src/theme/components/accordion.ts
+++ b/invokeai/frontend/web/src/theme/components/accordion.ts
@@ -3,6 +3,7 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
 
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys);
@@ -18,16 +19,16 @@ const invokeAIButton = defineStyle((props) => {
     fontSize: 'sm',
     border: 'none',
     borderRadius: 'base',
-    bg: `${c}.800`,
-    color: 'base.100',
+    bg: mode(`${c}.200`, `${c}.700`)(props),
+    color: mode(`${c}.900`, `${c}.100`)(props),
     _hover: {
-      bg: `${c}.700`,
+      bg: mode(`${c}.250`, `${c}.650`)(props),
     },
     _expanded: {
-      bg: `${c}.750`,
+      bg: mode(`${c}.250`, `${c}.650`)(props),
       borderBottomRadius: 'none',
       _hover: {
-        bg: `${c}.700`,
+        bg: mode(`${c}.300`, `${c}.600`)(props),
       },
     },
   };
@@ -36,7 +37,7 @@ const invokeAIButton = defineStyle((props) => {
 const invokeAIPanel = defineStyle((props) => {
   const { colorScheme: c } = props;
   return {
-    bg: `${c}.800`,
+    bg: mode(`${c}.100`, `${c}.800`)(props),
     borderRadius: 'base',
     borderTopRadius: 'none',
   };
diff --git a/invokeai/frontend/web/src/theme/components/button.ts b/invokeai/frontend/web/src/theme/components/button.ts
index 879b3dba96..74560e4461 100644
--- a/invokeai/frontend/web/src/theme/components/button.ts
+++ b/invokeai/frontend/web/src/theme/components/button.ts
@@ -1,44 +1,55 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
+import { mode } from '@chakra-ui/theme-tools';
 
 const invokeAI = defineStyle((props) => {
   const { colorScheme: c } = props;
   // must specify `_disabled` colors if we override `_hover`, else hover on disabled has no styles
   const _disabled = {
-    bg: `${c}.600`,
-    color: `${c}.100`,
+    bg: mode(`${c}.350`, `${c}.700`)(props),
+    color: mode(`${c}.750`, `${c}.150`)(props),
     svg: {
-      fill: `${c}.100`,
+      fill: mode(`${c}.750`, `${c}.150`)(props),
     },
+    opacity: 1,
+    filter: 'saturate(65%)',
   };
 
   return {
-    bg: `${c}.700`,
-    color: `${c}.100`,
+    bg: mode(`${c}.200`, `${c}.600`)(props),
+    color: mode(`${c}.850`, `${c}.100`)(props),
     borderRadius: 'base',
+    textShadow: mode(
+      `0 0 0.3rem var(--invokeai-colors-${c}-50)`,
+      `0 0 0.3rem var(--invokeai-colors-${c}-900)`
+    )(props),
     svg: {
-      fill: `${c}.100`,
+      fill: mode(`${c}.850`, `${c}.100`)(props),
+      filter: mode(
+        `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-100))`,
+        `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-800))`
+      )(props),
     },
     _disabled,
     _hover: {
-      bg: `${c}.650`,
-      color: `${c}.50`,
+      bg: mode(`${c}.300`, `${c}.500`)(props),
+      color: mode(`${c}.900`, `${c}.50`)(props),
       svg: {
-        fill: `${c}.50`,
+        fill: mode(`${c}.900`, `${c}.50`)(props),
       },
       _disabled,
     },
     _checked: {
-      bg: 'accent.700',
-      color: 'accent.100',
+      bg: mode('accent.200', 'accent.600')(props),
+      color: mode('accent.800', 'accent.100')(props),
       svg: {
-        fill: 'accent.100',
+        fill: mode('accent.800', 'accent.100')(props),
       },
       _disabled,
       _hover: {
-        bg: 'accent.600',
-        color: 'accent.50',
+        bg: mode('accent.300', 'accent.500')(props),
+        color: mode('accent.900', 'accent.50')(props),
         svg: {
-          fill: 'accent.50',
+          fill: mode('accent.900', 'accent.50')(props),
         },
         _disabled,
       },
diff --git a/invokeai/frontend/web/src/theme/components/checkbox.ts b/invokeai/frontend/web/src/theme/components/checkbox.ts
index ec61706715..58871237e5 100644
--- a/invokeai/frontend/web/src/theme/components/checkbox.ts
+++ b/invokeai/frontend/web/src/theme/components/checkbox.ts
@@ -3,6 +3,7 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
 
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys);
@@ -11,14 +12,18 @@ const invokeAIControl = defineStyle((props) => {
   const { colorScheme: c } = props;
 
   return {
+    bg: mode('base.200', 'base.700')(props),
+    borderColor: mode('base.200', 'base.700')(props),
+    color: mode('base.900', 'base.100')(props),
+
     _checked: {
-      bg: `${c}.200`,
-      borderColor: `${c}.200`,
-      color: 'base.900',
+      bg: mode(`${c}.300`, `${c}.600`)(props),
+      borderColor: mode(`${c}.300`, `${c}.600`)(props),
+      color: mode(`${c}.900`, `${c}.100`)(props),
 
       _hover: {
-        bg: `${c}.300`,
-        borderColor: `${c}.300`,
+        bg: mode(`${c}.400`, `${c}.500`)(props),
+        borderColor: mode(`${c}.400`, `${c}.500`)(props),
       },
 
       _disabled: {
@@ -29,9 +34,9 @@ const invokeAIControl = defineStyle((props) => {
     },
 
     _indeterminate: {
-      bg: `${c}.200`,
-      borderColor: `${c}.200`,
-      color: 'base.900',
+      bg: mode(`${c}.300`, `${c}.600`)(props),
+      borderColor: mode(`${c}.300`, `${c}.600`)(props),
+      color: mode(`${c}.900`, `${c}.100`)(props),
     },
 
     _disabled: {
@@ -44,7 +49,7 @@ const invokeAIControl = defineStyle((props) => {
     },
 
     _invalid: {
-      borderColor: 'red.300',
+      borderColor: mode('error.600', 'error.300')(props),
     },
   };
 });
diff --git a/invokeai/frontend/web/src/theme/components/formLabel.ts b/invokeai/frontend/web/src/theme/components/formLabel.ts
index 0ff7c6cdea..866bb7beb1 100644
--- a/invokeai/frontend/web/src/theme/components/formLabel.ts
+++ b/invokeai/frontend/web/src/theme/components/formLabel.ts
@@ -1,6 +1,7 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
 
-const invokeAI = defineStyle((_props) => {
+const invokeAI = defineStyle((props) => {
   return {
     fontSize: 'sm',
     marginEnd: 0,
@@ -12,7 +13,7 @@ const invokeAI = defineStyle((_props) => {
     _disabled: {
       opacity: 0.4,
     },
-    color: 'base.300',
+    color: mode('base.700', 'base.300')(props),
   };
 });
 
diff --git a/invokeai/frontend/web/src/theme/components/menu.ts b/invokeai/frontend/web/src/theme/components/menu.ts
index 597e989953..02f75087ed 100644
--- a/invokeai/frontend/web/src/theme/components/menu.ts
+++ b/invokeai/frontend/web/src/theme/components/menu.ts
@@ -1,38 +1,40 @@
 import { menuAnatomy } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
+import { mode } from '@chakra-ui/theme-tools';
 
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(menuAnatomy.keys);
 
 // define the base component styles
-const invokeAI = definePartsStyle({
+const invokeAI = definePartsStyle((props) => ({
   // define the part you're going to style
   button: {
     // this will style the MenuButton component
-    fontWeight: '600',
-    bg: 'base.500',
-    color: 'base.200',
+    fontWeight: 500,
+    bg: mode('base.300', 'base.500')(props),
+    color: mode('base.900', 'base.100')(props),
     _hover: {
-      bg: 'base.600',
-      color: 'white',
+      bg: mode('base.400', 'base.600')(props),
+      color: mode('base.900', 'base.50')(props),
+      fontWeight: 600,
     },
   },
   list: {
     zIndex: 9999,
-    bg: 'base.800',
+    bg: mode('base.200', 'base.800')(props),
   },
   item: {
     // this will style the MenuItem and MenuItemOption components
     fontSize: 'sm',
-    bg: 'base.800',
+    bg: mode('base.200', 'base.800')(props),
     _hover: {
-      bg: 'base.750',
+      bg: mode('base.300', 'base.700')(props),
     },
     _focus: {
-      bg: 'base.700',
+      bg: mode('base.400', 'base.600')(props),
     },
   },
-});
+}));
 
 export const menuTheme = defineMultiStyleConfig({
   variants: {
diff --git a/invokeai/frontend/web/src/theme/components/modal.ts b/invokeai/frontend/web/src/theme/components/modal.ts
index 1f6900278a..8310d9d46c 100644
--- a/invokeai/frontend/web/src/theme/components/modal.ts
+++ b/invokeai/frontend/web/src/theme/components/modal.ts
@@ -3,28 +3,31 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const invokeAIOverlay = defineStyle({
-  bg: 'blackAlpha.600',
-});
+const invokeAIOverlay = defineStyle((props) => ({
+  bg: mode('blackAlpha.700', 'blackAlpha.700')(props),
+}));
 
 const invokeAIDialogContainer = defineStyle({});
 
-const invokeAIDialog = defineStyle((_props) => {
+const invokeAIDialog = defineStyle((props) => {
   return {
-    bg: 'base.850',
+    layerStyle: 'first',
     maxH: '80vh',
   };
 });
 
-const invokeAIHeader = defineStyle((_props) => {
+const invokeAIHeader = defineStyle((props) => {
   return {
     fontWeight: '600',
     fontSize: 'lg',
-    color: 'base.200',
+    layerStyle: 'first',
+    borderTopRadius: 'base',
+    borderInlineEndRadius: 'base',
   };
 });
 
@@ -37,7 +40,7 @@ const invokeAIBody = defineStyle({
 const invokeAIFooter = defineStyle({});
 
 export const invokeAI = definePartsStyle((props) => ({
-  overlay: invokeAIOverlay,
+  overlay: invokeAIOverlay(props),
   dialogContainer: invokeAIDialogContainer,
   dialog: invokeAIDialog(props),
   header: invokeAIHeader(props),
diff --git a/invokeai/frontend/web/src/theme/components/numberInput.ts b/invokeai/frontend/web/src/theme/components/numberInput.ts
index 935f21077b..681fa6f566 100644
--- a/invokeai/frontend/web/src/theme/components/numberInput.ts
+++ b/invokeai/frontend/web/src/theme/components/numberInput.ts
@@ -5,6 +5,7 @@ import {
 } from '@chakra-ui/styled-system';
 
 import { getInputOutlineStyles } from '../util/getInputOutlineStyles';
+import { mode } from '@chakra-ui/theme-tools';
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
@@ -33,7 +34,7 @@ const invokeAIStepperGroup = defineStyle((_props) => {
   };
 });
 
-const invokeAIStepper = defineStyle((_props) => {
+const invokeAIStepper = defineStyle((props) => {
   return {
     border: 'none',
     // expand arrow hitbox
@@ -43,11 +44,11 @@ const invokeAIStepper = defineStyle((_props) => {
     my: 0,
 
     svg: {
-      color: 'base.300',
+      color: mode('base.700', 'base.300')(props),
       width: 2.5,
       height: 2.5,
       _hover: {
-        color: 'base.50',
+        color: mode('base.900', 'base.100')(props),
       },
     },
   };
diff --git a/invokeai/frontend/web/src/theme/components/popover.ts b/invokeai/frontend/web/src/theme/components/popover.ts
index c8d6ae20d8..a28e2bfbc4 100644
--- a/invokeai/frontend/web/src/theme/components/popover.ts
+++ b/invokeai/frontend/web/src/theme/components/popover.ts
@@ -3,7 +3,7 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
-import { cssVar } from '@chakra-ui/theme-tools';
+import { cssVar, mode } from '@chakra-ui/theme-tools';
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
@@ -12,15 +12,20 @@ const $popperBg = cssVar('popper-bg');
 const $arrowBg = cssVar('popper-arrow-bg');
 const $arrowShadowColor = cssVar('popper-arrow-shadow-color');
 
-const invokeAIContent = defineStyle((_props) => {
+const invokeAIContent = defineStyle((props) => {
   return {
-    [$arrowBg.variable]: `colors.base.800`,
-    [$popperBg.variable]: `colors.base.800`,
-    [$arrowShadowColor.variable]: `colors.base.600`,
+    [$arrowBg.variable]: mode('colors.base.100', 'colors.base.800')(props),
+    [$popperBg.variable]: mode('colors.base.100', 'colors.base.800')(props),
+    [$arrowShadowColor.variable]: mode(
+      'colors.base.400',
+      'colors.base.600'
+    )(props),
     minW: 'unset',
     width: 'unset',
     p: 4,
-    bg: 'base.800',
+    bg: mode('base.100', 'base.800')(props),
+    border: 'none',
+    shadow: 'dark-lg',
   };
 });
 
diff --git a/invokeai/frontend/web/src/theme/components/select.ts b/invokeai/frontend/web/src/theme/components/select.ts
index 2fad17e1b4..72bb896238 100644
--- a/invokeai/frontend/web/src/theme/components/select.ts
+++ b/invokeai/frontend/web/src/theme/components/select.ts
@@ -1,13 +1,14 @@
 import { selectAnatomy as parts } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
 import { getInputOutlineStyles } from '../util/getInputOutlineStyles';
+import { mode } from '@chakra-ui/theme-tools';
 
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const invokeAIIcon = defineStyle((_props) => {
+const invokeAIIcon = defineStyle((props) => {
   return {
-    color: 'base.300',
+    color: mode('base.200', 'base.300')(props),
   };
 });
 
diff --git a/invokeai/frontend/web/src/theme/components/slider.ts b/invokeai/frontend/web/src/theme/components/slider.ts
index e706aab7b8..397dea786a 100644
--- a/invokeai/frontend/web/src/theme/components/slider.ts
+++ b/invokeai/frontend/web/src/theme/components/slider.ts
@@ -1,12 +1,13 @@
 import { sliderAnatomy as parts } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
+import { mode } from '@chakra-ui/theme-tools';
 
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const invokeAITrack = defineStyle((_props) => {
+const invokeAITrack = defineStyle((props) => {
   return {
-    bg: 'base.400',
+    bg: mode('base.400', 'base.600')(props),
     h: 1.5,
   };
 });
@@ -14,23 +15,24 @@ const invokeAITrack = defineStyle((_props) => {
 const invokeAIFilledTrack = defineStyle((props) => {
   const { colorScheme: c } = props;
   return {
-    bg: `${c}.600`,
+    bg: mode(`${c}.400`, `${c}.600`)(props),
     h: 1.5,
   };
 });
 
-const invokeAIThumb = defineStyle((_props) => {
+const invokeAIThumb = defineStyle((props) => {
   return {
     w: 2,
     h: 4,
+    bg: mode('base.50', 'base.100')(props),
   };
 });
 
-const invokeAIMark = defineStyle((_props) => {
+const invokeAIMark = defineStyle((props) => {
   return {
     fontSize: 'xs',
     fontWeight: '500',
-    color: 'base.400',
+    color: mode('base.700', 'base.400')(props),
     mt: 2,
     insetInlineStart: 'unset',
   };
diff --git a/invokeai/frontend/web/src/theme/components/switch.ts b/invokeai/frontend/web/src/theme/components/switch.ts
index 6f13888442..b803e58b3b 100644
--- a/invokeai/frontend/web/src/theme/components/switch.ts
+++ b/invokeai/frontend/web/src/theme/components/switch.ts
@@ -3,6 +3,7 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
@@ -11,13 +12,13 @@ const invokeAITrack = defineStyle((props) => {
   const { colorScheme: c } = props;
 
   return {
-    bg: 'base.600',
+    bg: mode('base.300', 'base.600')(props),
 
     _focusVisible: {
       boxShadow: 'none',
     },
     _checked: {
-      bg: `${c}.600`,
+      bg: mode(`${c}.400`, `${c}.500`)(props),
     },
   };
 });
@@ -26,7 +27,7 @@ const invokeAIThumb = defineStyle((props) => {
   const { colorScheme: c } = props;
 
   return {
-    bg: `${c}.50`,
+    bg: mode(`${c}.50`, `${c}.50`)(props),
   };
 });
 
diff --git a/invokeai/frontend/web/src/theme/components/tabs.ts b/invokeai/frontend/web/src/theme/components/tabs.ts
index daf6e18cab..a0ab7dd3b9 100644
--- a/invokeai/frontend/web/src/theme/components/tabs.ts
+++ b/invokeai/frontend/web/src/theme/components/tabs.ts
@@ -3,6 +3,7 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
@@ -16,30 +17,51 @@ const invokeAIRoot = defineStyle((_props) => {
 
 const invokeAITab = defineStyle((_props) => ({}));
 
-const invokeAITablist = defineStyle((_props) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 1,
-  color: 'base.700',
-  button: {
-    fontSize: 'sm',
-    padding: 2,
-    borderRadius: 'base',
-    _selected: {
-      borderBottomColor: 'base.800',
-      bg: 'accent.700',
-      color: 'accent.100',
+const invokeAITablist = defineStyle((props) => {
+  const { colorScheme: c } = props;
+
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 1,
+    color: mode('base.700', 'base.400')(props),
+    button: {
+      fontSize: 'sm',
+      padding: 2,
+      borderRadius: 'base',
+      textShadow: mode(
+        `0 0 0.3rem var(--invokeai-colors-accent-100)`,
+        `0 0 0.3rem var(--invokeai-colors-accent-900)`
+      )(props),
+      svg: {
+        fill: mode('base.700', 'base.300')(props),
+      },
+      _selected: {
+        borderBottomColor: 'base.800',
+        bg: mode('accent.200', 'accent.600')(props),
+        color: mode('accent.800', 'accent.100')(props),
+        _hover: {
+          bg: mode('accent.300', 'accent.500')(props),
+          color: mode('accent.900', 'accent.50')(props),
+        },
+        svg: {
+          fill: mode('base.900', 'base.50')(props),
+          filter: mode(
+            `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-accent-100))`,
+            `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-accent-900))`
+          )(props),
+        },
+      },
       _hover: {
-        bg: 'accent.600',
-        color: 'accent.50',
+        bg: mode('base.100', 'base.800')(props),
+        color: mode('base.900', 'base.50')(props),
+        svg: {
+          fill: mode(`base.800`, `base.100`)(props),
+        },
       },
     },
-    _hover: {
-      bg: 'base.600',
-      color: 'base.50',
-    },
-  },
-}));
+  };
+});
 
 const invokeAITabpanel = defineStyle((_props) => ({
   padding: 0,
diff --git a/invokeai/frontend/web/src/theme/components/text.ts b/invokeai/frontend/web/src/theme/components/text.ts
index 88f5f23f7e..2404bf0594 100644
--- a/invokeai/frontend/web/src/theme/components/text.ts
+++ b/invokeai/frontend/web/src/theme/components/text.ts
@@ -1,7 +1,8 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
+import { mode } from '@chakra-ui/theme-tools';
 
-const subtext = defineStyle((_props) => ({
-  color: 'base.400',
+const subtext = defineStyle((props) => ({
+  color: mode('colors.base.500', 'colors.base.400')(props),
 }));
 
 export const textTheme = defineStyleConfig({
diff --git a/invokeai/frontend/web/src/theme/components/tooltip.ts b/invokeai/frontend/web/src/theme/components/tooltip.ts
new file mode 100644
index 0000000000..511e0fecf0
--- /dev/null
+++ b/invokeai/frontend/web/src/theme/components/tooltip.ts
@@ -0,0 +1,17 @@
+import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
+import { mode } from '@chakra-ui/theme-tools';
+import { cssVar } from '@chakra-ui/theme-tools';
+
+const $arrowBg = cssVar('popper-arrow-bg');
+
+// define the base component styles
+const baseStyle = defineStyle((props) => ({
+  borderRadius: 'base',
+  shadow: 'dark-lg',
+  bg: mode('base.700', 'base.200')(props),
+  [$arrowBg.variable]: mode('colors.base.700', 'colors.base.200')(props),
+  pb: 1.5,
+}));
+
+// export the component theme
+export const tooltipTheme = defineStyleConfig({ baseStyle });
diff --git a/invokeai/frontend/web/src/theme/theme.ts b/invokeai/frontend/web/src/theme/theme.ts
index 90f26387ab..76b4aaaacc 100644
--- a/invokeai/frontend/web/src/theme/theme.ts
+++ b/invokeai/frontend/web/src/theme/theme.ts
@@ -1,7 +1,6 @@
 import { ThemeOverride } from '@chakra-ui/react';
-import type { StyleFunctionProps } from '@chakra-ui/styled-system';
 
-import { invokeAIThemeColors } from 'theme/colors/invokeAI';
+import { InvokeAIColors } from './colors/colors';
 import { accordionTheme } from './components/accordion';
 import { buttonTheme } from './components/button';
 import { checkboxTheme } from './components/checkbox';
@@ -12,13 +11,14 @@ import { modalTheme } from './components/modal';
 import { numberInputTheme } from './components/numberInput';
 import { popoverTheme } from './components/popover';
 import { progressTheme } from './components/progress';
-import { no_scrollbar, scrollbar as _scrollbar } from './components/scrollbar';
+import { no_scrollbar } from './components/scrollbar';
 import { selectTheme } from './components/select';
 import { sliderTheme } from './components/slider';
 import { switchTheme } from './components/switch';
 import { tabsTheme } from './components/tabs';
 import { textTheme } from './components/text';
 import { textareaTheme } from './components/textarea';
+import { tooltipTheme } from './components/tooltip';
 
 export const theme: ThemeOverride = {
   config: {
@@ -26,30 +26,32 @@ export const theme: ThemeOverride = {
     initialColorMode: 'dark',
     useSystemColorMode: false,
   },
+  layerStyles: {
+    body: {
+      bg: 'base.50',
+      color: 'base.900',
+      '.chakra-ui-dark &': { bg: 'base.900', color: 'base.50' },
+    },
+    first: {
+      bg: 'base.100',
+      color: 'base.900',
+      '.chakra-ui-dark &': { bg: 'base.850', color: 'base.100' },
+    },
+    second: {
+      bg: 'base.200',
+      color: 'base.900',
+      '.chakra-ui-dark &': { bg: 'base.800', color: 'base.100' },
+    },
+  },
   styles: {
-    global: (_props: StyleFunctionProps) => ({
-      body: {
-        bg: 'base.900',
-        color: 'base.50',
-        overflow: {
-          base: 'scroll',
-          xl: 'hidden',
-        },
-      },
+    global: () => ({
+      layerStyle: 'body',
       '*': { ...no_scrollbar },
     }),
   },
   direction: 'ltr',
   fonts: {
-    body: `'InterVariable', sans-serif`,
-  },
-  breakpoints: {
-    base: '0em', // 0px and onwards
-    sm: '30em', // 480px and onwards
-    md: '48em', // 768px and onwards
-    lg: '62em', // 992px and onwards
-    xl: '80em', // 1280px and onwards
-    '2xl': '96em', // 1536px and onwards
+    body: `'Inter Variable', sans-serif`,
   },
   shadows: {
     light: {
@@ -68,9 +70,7 @@ export const theme: ThemeOverride = {
     },
     nodeSelectedOutline: `0 0 0 2px var(--invokeai-colors-base-500)`,
   },
-  colors: {
-    ...invokeAIThemeColors,
-  },
+  colors: InvokeAIColors,
   components: {
     Button: buttonTheme, // Button and IconButton
     Input: inputTheme,
@@ -88,5 +88,6 @@ export const theme: ThemeOverride = {
     Checkbox: checkboxTheme,
     Menu: menuTheme,
     Text: textTheme,
+    Tooltip: tooltipTheme,
   },
 };
diff --git a/invokeai/frontend/web/src/theme/themeTypes.d.ts b/invokeai/frontend/web/src/theme/themeTypes.d.ts
index 46144f39ab..c85ebd33ce 100644
--- a/invokeai/frontend/web/src/theme/themeTypes.d.ts
+++ b/invokeai/frontend/web/src/theme/themeTypes.d.ts
@@ -11,7 +11,6 @@ export type InvokeAIThemeColors = {
   okAlpha: Partial<InvokeAIPaletteSteps>;
   error: Partial<InvokeAIPaletteSteps>;
   errorAlpha: Partial<InvokeAIPaletteSteps>;
-  gridLineColor: string;
 };
 
 export type InvokeAIPaletteSteps = {
diff --git a/invokeai/frontend/web/src/theme/util/generateColorPalette.ts b/invokeai/frontend/web/src/theme/util/generateColorPalette.ts
index 4cb5fbd57d..6d90a070c0 100644
--- a/invokeai/frontend/web/src/theme/util/generateColorPalette.ts
+++ b/invokeai/frontend/web/src/theme/util/generateColorPalette.ts
@@ -2,46 +2,35 @@ import { InvokeAIPaletteSteps } from 'theme/themeTypes';
 
 /**
  * Add two numbers together
- * @param  {String | Number} hue Hue of the color (0-360) - Reds 0, Greens 120, Blues 240
- * @param  {String | Number} saturation Saturation of the color (0-100)
- * @param  {boolean} light True to generate light color palette
+ * @param  {String | Number} H Hue of the color (0-360) - Reds 0, Greens 120, Blues 240
+ * @param  {String | Number} L Saturation of the color (0-100)
+ * @param  {Boolean} alpha Whether or not to generate this palette as a transparency palette
  */
 export function generateColorPalette(
-  hue: string | number,
-  saturation: string | number,
-  light = false,
+  H: string | number,
+  S: string | number,
   alpha = false
 ) {
-  hue = String(hue);
-  saturation = String(saturation);
+  H = String(H);
+  S = String(S);
 
   const colorSteps = Array.from({ length: 21 }, (_, i) => i * 50);
+
   const lightnessSteps = [
     0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 59, 64, 68, 73, 77, 82, 86,
     95, 100,
   ];
 
-  const darkPalette: Partial<InvokeAIPaletteSteps> = {};
-  const lightPalette: Partial<InvokeAIPaletteSteps> = {};
-
-  colorSteps.forEach((colorStep, index) => {
+  const p = colorSteps.reduce((palette, step, index) => {
     const A = alpha ? lightnessSteps[index] / 100 : 1;
 
     // Lightness should be 50% for alpha colors
-    const darkPaletteLightness = alpha
-      ? 50
-      : lightnessSteps[colorSteps.length - 1 - index];
+    const L = alpha ? 50 : lightnessSteps[colorSteps.length - 1 - index];
 
-    darkPalette[
-      colorStep as keyof typeof darkPalette
-    ] = `hsl(${hue} ${saturation}% ${darkPaletteLightness}% / ${A})`;
+    palette[step as keyof typeof palette] = `hsl(${H} ${S}% ${L}% / ${A})`;
 
-    const lightPaletteLightness = alpha ? 50 : lightnessSteps[index];
+    return palette;
+  }, {} as InvokeAIPaletteSteps);
 
-    lightPalette[
-      colorStep as keyof typeof lightPalette
-    ] = `hsl(${hue} ${saturation}% ${lightPaletteLightness}% / ${A})`;
-  });
-
-  return light ? lightPalette : darkPalette;
+  return p;
 }
diff --git a/invokeai/frontend/web/src/theme/util/getInputOutlineStyles.ts b/invokeai/frontend/web/src/theme/util/getInputOutlineStyles.ts
index 7d818cb6a4..8cf64cbd94 100644
--- a/invokeai/frontend/web/src/theme/util/getInputOutlineStyles.ts
+++ b/invokeai/frontend/web/src/theme/util/getInputOutlineStyles.ts
@@ -1,40 +1,40 @@
-import { StyleFunctionProps } from '@chakra-ui/theme-tools';
+import { StyleFunctionProps, mode } from '@chakra-ui/theme-tools';
 
-export const getInputOutlineStyles = (_props?: StyleFunctionProps) => ({
+export const getInputOutlineStyles = (props: StyleFunctionProps) => ({
   outline: 'none',
   borderWidth: 2,
   borderStyle: 'solid',
-  borderColor: 'base.800',
-  bg: 'base.900',
+  borderColor: mode('base.200', 'base.800')(props),
+  bg: mode('base.50', 'base.900')(props),
   borderRadius: 'base',
-  color: 'base.100',
+  color: mode('base.900', 'base.100')(props),
   boxShadow: 'none',
   _hover: {
-    borderColor: 'base.600',
+    borderColor: mode('base.300', 'base.600')(props),
   },
   _focus: {
-    borderColor: 'accent.700',
+    borderColor: mode('accent.200', 'accent.600')(props),
     boxShadow: 'none',
     _hover: {
-      borderColor: 'accent.600',
+      borderColor: mode('accent.300', 'accent.500')(props),
     },
   },
   _invalid: {
-    borderColor: 'error.700',
+    borderColor: mode('error.300', 'error.600')(props),
     boxShadow: 'none',
     _hover: {
-      borderColor: 'error.600',
+      borderColor: mode('error.400', 'error.500')(props),
     },
   },
   _disabled: {
-    borderColor: 'base.700',
-    bg: 'base.700',
-    color: 'base.400',
+    borderColor: mode('base.300', 'base.700')(props),
+    bg: mode('base.300', 'base.700')(props),
+    color: mode('base.600', 'base.400')(props),
     _hover: {
-      borderColor: 'base.700',
+      borderColor: mode('base.300', 'base.700')(props),
     },
   },
   _placeholder: {
-    color: 'base.500',
+    color: mode('base.700', 'base.400')(props),
   },
 });
diff --git a/invokeai/frontend/web/src/theme/util/mode.ts b/invokeai/frontend/web/src/theme/util/mode.ts
new file mode 100644
index 0000000000..fbaabecb6c
--- /dev/null
+++ b/invokeai/frontend/web/src/theme/util/mode.ts
@@ -0,0 +1,3 @@
+export const mode =
+  (light: string, dark: string) => (colorMode: 'light' | 'dark') =>
+    colorMode === 'light' ? light : dark;