feat(ui): remove references to dark mode

invokeai/frontend/web/src/theme/components/accordion.ts

@@ -3,7 +3,6 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
-import { mode } from '@chakra-ui/theme-tools';
 
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys);
@@ -20,16 +19,16 @@ const invokeAIButton = defineStyle((props) => {
     fontSize: 'sm',
     border: 'none',
     borderRadius: 'base',
-    bg: mode(`${c}.250`, `${c}.800`)(props),
-    color: mode('base.900', 'base.100')(props),
+    bg: `${c}.800`,
+    color: 'base.100',
     _hover: {
-      bg: mode(`${c}.300`, `${c}.700`)(props),
+      bg: `${c}.700`,
     },
     _expanded: {
-      bg: mode(`${c}.250`, `${c}.750`)(props),
+      bg: `${c}.750`,
       borderBottomRadius: 'none',
       _hover: {
-        bg: mode(`${c}.300`, `${c}.700`)(props),
+        bg: `${c}.700`,
       },
     },
   };
@@ -38,7 +37,7 @@ const invokeAIButton = defineStyle((props) => {
 const invokeAIPanel = defineStyle((props) => {
   const { colorScheme: c } = props;
   return {
-    bg: mode(`${c}.200`, `${c}.800`)(props),
+    bg: `${c}.800`,
     borderRadius: 'base',
     borderTopRadius: 'none',
     p: 4,

invokeai/frontend/web/src/theme/components/button.ts

@@ -1,45 +1,44 @@
 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: mode(`${c}.200`, `${c}.600`)(props),
-    color: mode(`${c}.700`, `${c}.100`)(props),
+    bg: `${c}.600`,
+    color: `${c}.100`,
     svg: {
-      fill: mode(`${c}.700`, `${c}.100`)(props),
+      fill: `${c}.100`,
     },
   };
 
   return {
-    bg: mode(`${c}.300`, `${c}.700`)(props),
-    color: mode(`${c}.800`, `${c}.100`)(props),
+    bg: `${c}.700`,
+    color: `${c}.100`,
     borderRadius: 'base',
     svg: {
-      fill: mode(`${c}.800`, `${c}.100`)(props),
+      fill: `${c}.100`,
     },
     _disabled,
     _hover: {
-      bg: mode(`${c}.400`, `${c}.650`)(props),
-      color: mode(`black`, `${c}.50`)(props),
+      bg: `${c}.650`,
+      color: `${c}.50`,
       svg: {
-        fill: mode(`black`, `${c}.50`)(props),
+        fill: `${c}.50`,
       },
       _disabled,
     },
     _checked: {
-      bg: mode('accent.200', 'accent.700')(props),
-      color: mode('accent.800', 'accent.100')(props),
+      bg: 'accent.700',
+      color: 'accent.100',
       svg: {
-        fill: mode('accent.800', 'accent.100')(props),
+        fill: 'accent.100',
       },
       _disabled,
       _hover: {
-        bg: mode('accent.300', 'accent.600')(props),
-        color: mode('accent.900', 'accent.50')(props),
+        bg: 'accent.600',
+        color: 'accent.50',
         svg: {
-          fill: mode('accent.900', 'accent.50')(props),
+          fill: 'accent.50',
         },
         _disabled,
       },

invokeai/frontend/web/src/theme/components/checkbox.ts

@@ -3,7 +3,6 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
-import { mode } from '@chakra-ui/theme-tools';
 
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys);
@@ -13,31 +12,31 @@ const invokeAIControl = defineStyle((props) => {
 
   return {
     _checked: {
-      bg: mode(`${c}.500`, `${c}.200`)(props),
-      borderColor: mode(`${c}.500`, `${c}.200`)(props),
-      color: mode('white', 'base.900')(props),
+      bg: `${c}.200`,
+      borderColor: `${c}.200`,
+      color: 'base.900',
 
       _hover: {
-        bg: mode(`${c}.600`, `${c}.300`)(props),
-        borderColor: mode(`${c}.600`, `${c}.300`)(props),
+        bg: `${c}.300`,
+        borderColor: `${c}.300`,
       },
 
       _disabled: {
-        borderColor: mode('base.200', 'transparent')(props),
-        bg: mode('base.200', 'whiteAlpha.300')(props),
-        color: mode('base.500', 'whiteAlpha.500')(props),
+        borderColor: 'transparent',
+        bg: 'whiteAlpha.300',
+        color: 'whiteAlpha.500',
       },
     },
 
     _indeterminate: {
-      bg: mode(`${c}.500`, `${c}.200`)(props),
-      borderColor: mode(`${c}.500`, `${c}.200`)(props),
-      color: mode('white', 'base.900')(props),
+      bg: `${c}.200`,
+      borderColor: `${c}.200`,
+      color: 'base.900',
     },
 
     _disabled: {
-      bg: mode('base.100', 'whiteAlpha.100')(props),
-      borderColor: mode('base.100', 'transparent')(props),
+      bg: 'whiteAlpha.100',
+      borderColor: 'transparent',
     },
 
     _focusVisible: {
@@ -45,7 +44,7 @@ const invokeAIControl = defineStyle((props) => {
     },
 
     _invalid: {
-      borderColor: mode('red.500', 'red.300')(props),
+      borderColor: 'red.300',
     },
   };
 });

invokeai/frontend/web/src/theme/components/formLabel.ts

@@ -1,7 +1,6 @@
 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,
@@ -13,7 +12,7 @@ const invokeAI = defineStyle((props) => {
     _disabled: {
       opacity: 0.4,
     },
-    color: mode('base.600', 'base.300')(props),
+    color: 'base.300',
   };
 });
 

invokeai/frontend/web/src/theme/components/modal.ts

@@ -3,7 +3,6 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
-import { mode } from '@chakra-ui/theme-tools';
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
@@ -14,18 +13,18 @@ const invokeAIOverlay = defineStyle({
 
 const invokeAIDialogContainer = defineStyle({});
 
-const invokeAIDialog = defineStyle((props) => {
+const invokeAIDialog = defineStyle((_props) => {
   return {
-    bg: mode('base.300', 'base.850')(props),
+    bg: 'base.850',
     maxH: '80vh',
   };
 });
 
-const invokeAIHeader = defineStyle((props) => {
+const invokeAIHeader = defineStyle((_props) => {
   return {
     fontWeight: '600',
     fontSize: 'lg',
-    color: mode('base.700', 'base.200')(props),
+    color: 'base.200',
   };
 });
 

invokeai/frontend/web/src/theme/components/numberInput.ts

@@ -3,7 +3,7 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
-import { mode } from '@chakra-ui/theme-tools';
+
 import { getInputOutlineStyles } from '../util/getInputOutlineStyles';
 
 const { defineMultiStyleConfig, definePartsStyle } =
@@ -33,7 +33,7 @@ const invokeAIStepperGroup = defineStyle((_props) => {
   };
 });
 
-const invokeAIStepper = defineStyle((props) => {
+const invokeAIStepper = defineStyle((_props) => {
   return {
     border: 'none',
     // expand arrow hitbox
@@ -43,11 +43,11 @@ const invokeAIStepper = defineStyle((props) => {
     my: 0,
 
     svg: {
-      color: mode('base.600', 'base.300')(props),
+      color: 'base.300',
       width: 2.5,
       height: 2.5,
       _hover: {
-        color: mode('base.900', 'base.50')(props),
+        color: 'base.50',
       },
     },
   };

invokeai/frontend/web/src/theme/components/popover.ts

@@ -4,7 +4,6 @@ import {
   defineStyle,
 } from '@chakra-ui/styled-system';
 import { cssVar } from '@chakra-ui/theme-tools';
-import { mode } from '@chakra-ui/theme-tools';
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
@@ -13,7 +12,7 @@ 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`,
@@ -23,8 +22,8 @@ const invokeAIContent = defineStyle((props) => {
     p: 4,
     borderWidth: '2px',
     borderStyle: 'solid',
-    borderColor: mode('base.500', 'base.600')(props),
-    bg: mode('base.200', 'base.800')(props),
+    borderColor: 'base.600',
+    bg: 'base.800',
   };
 });
 

invokeai/frontend/web/src/theme/components/progress.ts

@@ -3,25 +3,22 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
-import { mode } from '@chakra-ui/theme-tools';
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const invokeAIFilledTrack = defineStyle((props) => ({
-  bg: mode('accent.400', 'accent.600')(props),
+const invokeAIFilledTrack = defineStyle((_props) => ({
+  bg: 'accent.600',
   transition: 'width 0.2s ease-in-out',
   _indeterminate: {
-    bgGradient: `linear(to-r, transparent 0%, ${mode(
-      'accent.400',
-      'accent.600'
-    )(props)} 50%, transparent 100%);`,
+    bgGradient:
+      'linear(to-r, transparent 0%, accent.600 50%, transparent 100%);',
   },
 }));
 
-const invokeAITrack = defineStyle((props) => {
+const invokeAITrack = defineStyle((_props) => {
   return {
-    bg: mode('base.300', 'base.800')(props),
+    bg: 'base.800',
   };
 });
 

invokeai/frontend/web/src/theme/components/select.ts

@@ -1,14 +1,13 @@
 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: mode('base.600', 'base.300')(props),
+    color: 'base.300',
   };
 });
 

invokeai/frontend/web/src/theme/components/slider.ts

@@ -1,13 +1,12 @@
 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: mode('base.300', 'base.400')(props),
+    bg: 'base.400',
     h: 1.5,
   };
 });
@@ -15,7 +14,7 @@ const invokeAITrack = defineStyle((props) => {
 const invokeAIFilledTrack = defineStyle((props) => {
   const { colorScheme: c } = props;
   return {
-    bg: mode(`${c}.400`, `${c}.600`)(props),
+    bg: `${c}.600`,
     h: 1.5,
   };
 });
@@ -27,11 +26,11 @@ const invokeAIThumb = defineStyle((_props) => {
   };
 });
 
-const invokeAIMark = defineStyle((props) => {
+const invokeAIMark = defineStyle((_props) => {
   return {
     fontSize: 'xs',
     fontWeight: '500',
-    color: mode('base.800', 'base.200')(props),
+    color: 'base.200',
     mt: 2,
     insetInlineStart: 'unset',
   };

invokeai/frontend/web/src/theme/components/switch.ts

@@ -3,7 +3,6 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
-import { mode } from '@chakra-ui/theme-tools';
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
@@ -12,13 +11,13 @@ const invokeAITrack = defineStyle((props) => {
   const { colorScheme: c } = props;
 
   return {
-    bg: mode(`base.400`, `base.600`)(props),
+    bg: 'base.600',
 
     _focusVisible: {
       boxShadow: 'none',
     },
     _checked: {
-      bg: mode(`${c}.400`, `${c}.600`)(props),
+      bg: `${c}.600`,
     },
   };
 });
@@ -27,7 +26,7 @@ const invokeAIThumb = defineStyle((props) => {
   const { colorScheme: c } = props;
 
   return {
-    bg: mode(`${c}.50`, `${c}.50`)(props),
+    bg: `${c}.50`,
   };
 });
 

invokeai/frontend/web/src/theme/components/tabs.ts

@@ -3,7 +3,6 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
-import { mode } from '@chakra-ui/theme-tools';
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
@@ -17,26 +16,26 @@ const invokeAIRoot = defineStyle((_props) => {
 
 const invokeAITab = defineStyle((_props) => ({}));
 
-const invokeAITablist = defineStyle((props) => ({
+const invokeAITablist = defineStyle((_props) => ({
   display: 'flex',
   flexDirection: 'column',
   gap: 1,
-  color: mode('base.500', 'base.700')(props),
+  color: 'base.700',
   button: {
     fontSize: 'sm',
     padding: 2,
     borderRadius: 'base',
     _selected: {
-      bg: mode('accent.200', 'accent.700')(props),
-      color: mode('accent.800', 'accent.100')(props),
+      bg: 'accent.700',
+      color: 'accent.100',
       _hover: {
-        bg: mode('accent.300', 'accent.600')(props),
-        color: mode('accent.900', 'accent.50')(props),
+        bg: 'accent.600',
+        color: 'accent.50',
       },
     },
     _hover: {
-      bg: mode('base.300', 'base.600')(props),
-      color: mode('base.900', 'base.50')(props),
+      bg: 'base.600',
+      color: 'base.50',
     },
   },
 }));

invokeai/frontend/web/src/theme/components/text.ts

@@ -1,8 +1,7 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
-import { mode } from '@chakra-ui/theme-tools';
 
-const subtext = defineStyle((props) => ({
-  color: mode('base.700', 'base.400')(props),
+const subtext = defineStyle((_props) => ({
+  color: 'base.400',
 }));
 
 export const textTheme = defineStyleConfig({

invokeai/frontend/web/src/theme/theme.ts

@@ -1,6 +1,6 @@
 import { ThemeOverride } from '@chakra-ui/react';
 import type { StyleFunctionProps } from '@chakra-ui/styled-system';
-import { mode } from '@chakra-ui/theme-tools';
+
 import { invokeAIThemeColors } from './colors/invokeAI';
 import { accordionTheme } from './components/accordion';
 import { buttonTheme } from './components/button';
@@ -22,15 +22,13 @@ import { textareaTheme } from './components/textarea';
 
 export const theme: ThemeOverride = {
   config: {
-    initialColorMode: 'dark',
-    useSystemColorMode: false,
     cssVarPrefix: 'invokeai',
   },
   styles: {
-    global: (props: StyleFunctionProps) => ({
+    global: (_props: StyleFunctionProps) => ({
       body: {
-        bg: mode('base.100', 'base.900')(props),
-        color: mode('base.800', 'base.50')(props),
+        bg: 'base.900',
+        color: 'base.50',
         overflow: 'hidden',
       },
       ...scrollbar,

invokeai/frontend/web/src/theme/util/getInputOutlineStyles.ts

@@ -1,40 +1,40 @@
-import { mode, StyleFunctionProps } from '@chakra-ui/theme-tools';
+import { StyleFunctionProps } from '@chakra-ui/theme-tools';
 
-export const getInputOutlineStyles = (props: StyleFunctionProps) => ({
+export const getInputOutlineStyles = (_props: StyleFunctionProps) => ({
   outline: 'none',
   borderWidth: 2,
   borderStyle: 'solid',
-  borderColor: mode('base.300', 'base.800')(props),
-  bg: mode('base.200', 'base.900')(props),
+  borderColor: 'base.800',
+  bg: 'base.900',
   borderRadius: 'base',
-  color: mode('base.900', 'base.100')(props),
+  color: 'base.100',
   boxShadow: 'none',
   _hover: {
-    borderColor: mode('base.500', 'base.600')(props),
+    borderColor: 'base.600',
   },
   _focus: {
-    borderColor: mode('accent.600', 'accent.700')(props),
+    borderColor: 'accent.700',
     boxShadow: 'none',
     _hover: {
-      borderColor: mode('accent.700', 'accent.600')(props),
+      borderColor: 'accent.600',
     },
   },
   _invalid: {
-    borderColor: mode('error.300', 'error.700')(props),
+    borderColor: 'error.700',
     boxShadow: 'none',
     _hover: {
-      borderColor: mode('error.500', 'error.600')(props),
+      borderColor: 'error.600',
     },
   },
   _disabled: {
-    borderColor: mode('base.300', 'base.700')(props),
-    bg: mode('base.400', 'base.700')(props),
-    color: mode('base.600', 'base.400')(props),
+    borderColor: 'base.700',
+    bg: 'base.700',
+    color: 'base.400',
     _hover: {
-      borderColor: mode('base.300', 'base.700')(props),
+      borderColor: 'base.700',
     },
   },
   _placeholder: {
-    color: mode('base.600', 'base.400')(props),
+    color: 'base.400',
   },
 });