fix: Model Manager light mode color fixes

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx

@@ -50,7 +50,7 @@ function SearchFolderForm() {
           gap: 2,
           p: 4,
           borderRadius: 4,
-          background: 'base.300',
+          background: 'base.200',
           alignItems: 'center',
           _dark: {
             background: 'base.800',
@@ -60,6 +60,7 @@ function SearchFolderForm() {
         <Flex w="100%" alignItems="center" gap={4} minH={12}>
           <Text
             sx={{
+              fontSize: 'sm',
               fontWeight: 600,
               color: 'base.700',
               minW: 'max-content',
@@ -80,8 +81,10 @@ function SearchFolderForm() {
                 w: '100%',
                 p: 2,
                 px: 4,
-                bg: 'base.200',
+                bg: 'base.300',
                 borderRadius: 4,
+                fontSize: 'sm',
+                fontWeight: 'bold',
                 _dark: { bg: 'base.700' },
               }}
             >

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/MergeModelsPanel.tsx

@@ -1,11 +1,4 @@
-import {
+import { Flex, Radio, RadioGroup, Text, Tooltip } from '@chakra-ui/react';
-  Flex,
-  Radio,
-  RadioGroup,
-  Text,
-  Tooltip,
-  useColorMode,
-} from '@chakra-ui/react';
 import { makeToast } from 'app/components/Toaster';
 import { useAppDispatch } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
@@ -23,7 +16,6 @@ import {
   useMergeMainModelsMutation,
 } from 'services/api/endpoints/models';
 import { BaseModelType, MergeModelConfig } from 'services/api/types';
-import { mode } from 'theme/util/mode';
 
 const baseModelTypeSelectData = [
   { label: 'Stable Diffusion 1', value: 'sd-1' },
@@ -38,7 +30,6 @@ type MergeInterpolationMethods =
 
 export default function MergeModelsPanel() {
   const { t } = useTranslation();
-  const { colorMode } = useColorMode();
   const dispatch = useAppDispatch();
 
   const { data } = useGetMainModelsQuery();
@@ -227,7 +218,10 @@ export default function MergeModelsPanel() {
           padding: 4,
           borderRadius: 'base',
           gap: 4,
-          bg: mode('base.100', 'base.800')(colorMode),
+          bg: 'base.200',
+          _dark: {
+            bg: 'base.800',
+          },
         }}
       >
         <IAISlider
@@ -252,7 +246,10 @@ export default function MergeModelsPanel() {
           padding: 4,
           borderRadius: 'base',
           gap: 4,
-          bg: mode('base.100', 'base.800')(colorMode),
+          bg: 'base.200',
+          _dark: {
+            bg: 'base.800',
+          },
         }}
       >
         <Text fontWeight={500} fontSize="sm" variant="subtext">
@@ -294,7 +291,10 @@ export default function MergeModelsPanel() {
           padding: 4,
           borderRadius: 'base',
           gap: 4,
-          bg: 'base.900',
+          bg: 'base.200',
+          _dark: {
+            bg: 'base.900',
+          },
         }}
       >
         <Flex columnGap={4}>

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

@@ -16,7 +16,7 @@ const invokeAI = defineStyle((props) => {
     };
 
     return {
-      bg: mode('base.200', 'base.600')(props),
+      bg: mode('base.250', 'base.600')(props),
       color: mode('base.850', 'base.100')(props),
       borderRadius: 'base',
       svg: {