dark mode for modal and inputs

theme/components/Form.ts

@@ -115,12 +115,12 @@ const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionP
         position: 'absolute',
         borderRadius: 'base',
         boxSizing: 'border-box',
-        color: mode('gray.500', 'whiteAlpha.400')(props),
+        color: 'gray.500',
         backgroundColor: 'transparent',
         pointerEvents: 'none',
         margin: 0,
         transformOrigin: 'top left',
-        transition: 'font-size 200ms ease, line-height 200ms ease, padding 200ms ease, top 200ms ease, background-color 200ms ease 200ms',
+        transitionProperty: 'font-size, line-height, padding, top, background-color',
       },
       'input:not(:placeholder-shown) + label, textarea:not(:placeholder-shown) + label': {
         ...activeLabelStyles,

theme/components/Modal.ts

@@ -7,16 +7,17 @@ const baseStyleDialog: SystemStyleFunction = (props) => {
   return {
     padding: 8,
     borderRadius: 'lg',
-    bg: mode('white', 'gray.800')(props),
+    bg: mode('white', 'gray.900')(props),
   };
 };
 
-const baseStyleHeader = {
+const baseStyleHeader: SystemStyleFunction = (props) => ({
   padding: 0,
   marginBottom: 8,
   fontSize: '2xl',
   lineHeight: 10,
-};
+  color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
+});
 
 const baseStyleBody = {
   padding: 0,
@@ -34,7 +35,7 @@ const baseStyleCloseButton: SystemStyleFunction = (props) => {
     right: 8,
     height: 10,
     width: 10,
-    color: mode('gray.700', 'gray.600')(props),
+    color: mode('gray.700', 'gray.500')(props),
     _hover: { color: 'blue.400' },
     _active: { bg: 'none' },
   };
@@ -45,7 +46,7 @@ const baseStyleOverlay = {
 
 const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
   dialog: baseStyleDialog(props),
-  header: baseStyleHeader,
+  header: baseStyleHeader(props),
   body: baseStyleBody,
   footer: baseStyleFooter,
   closeButton: baseStyleCloseButton(props),

theme/utils/getOutlinedFieldStyles.ts

@@ -6,16 +6,17 @@ import getDefaultTransitionProps from './getDefaultTransitionProps';
 
 export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
   const { theme } = props;
-  const { focusColor: fc, errorColor: ec, filledColor: flc } = getDefaultFormColors(props);
+  const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props);
   const transitionProps = getDefaultTransitionProps();
 
   return {
     border: '2px solid',
     bg: 'inherit',
-    borderColor: getColor(theme, flc),
+    // filled input
+    borderColor: mode('gray.300', 'gray.600')(props),
     ...transitionProps,
     _hover: {
-      borderColor: mode('gray.200', 'whiteAlpha.400')(props),
+      borderColor: mode('gray.200', 'gray.500')(props),
     },
     _readOnly: {
       boxShadow: 'none !important',
@@ -39,7 +40,8 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
     _placeholder: {
       color: mode('blackAlpha.600', 'whiteAlpha.600')(props),
     },
-    ':placeholder-shown:not(:focus-visible):not(:hover)': { borderColor: mode('blackAlpha.100', 'whiteAlpha.200')(props) },
+    // not filled input
+    ':placeholder-shown:not(:focus-visible):not(:hover)': { borderColor: mode('gray.100', 'gray.700')(props) },
     ':-webkit-autofill': { transition: 'background-color 5000s ease-in-out 0s' },
     ':-webkit-autofill:hover': { transition: 'background-color 5000s ease-in-out 0s' },
     ':-webkit-autofill:focus': { transition: 'background-color 5000s ease-in-out 0s' },