feat: more color options

docs/stories/aIntro.stories.tsx

@@ -154,3 +154,15 @@ export const WithNoSpecialColumns = {
     enableExport: false,
   } satisfies TableProps<Item>,
 };
+
+export const DarkMode = {
+  args: {
+    ...Primary.args,
+    colors: {
+      background: '#333',
+      text: '#fff',
+      border: '#555',
+      borderLight: '#444',
+    },
+  } satisfies TableProps<Item>,
+};

src/components/autoFocusTextField.tsx

@@ -18,5 +18,16 @@ export function AutoFocusTextField(props: Omit<Props, 'inputRef'>) {
     }
   }, [isActive]);
 
-  return <TextField {...props} inputRef={ref} />;
+  return (
+    <TextField
+      {...props}
+      inputRef={ref}
+      css={{
+        input: {
+          backgroundColor: 'inherit',
+          color: 'inherit',
+        },
+      }}
+    />
+  );
 }

src/components/dateInput.tsx

@@ -111,6 +111,13 @@ export function DateInput({
                 borderBottom: '2px solid transparent',
                 outline: 'none',
                 fontSize: 'inherit',
+                backgroundColor: 'inherit',
+                color: 'inherit',
+
+                '::placeholder': {
+                  color: 'inherit',
+                  opacity: 0.5,
+                },
 
                 '&:focus': {
                   borderBottom: '2px solid var(--primaryMain)',

src/components/datePicker.tsx

@@ -10,7 +10,6 @@ import {
 } from 'react';
 import { useTheme } from '../hooks/useTheme';
 import { defaults } from '../misc/defaults';
-import { gray } from '../theme/defaultTheme/defaultClasses';
 import { useCssVariables } from '../theme/useCssVariables';
 import { DateInput } from './dateInput';
 import { Text } from './text';
@@ -285,9 +284,10 @@ export function DatePicker(props: DatePickerProps) {
         background: 'transparent',
         cursor: disabled ? undefined : 'pointer',
         font: 'inherit',
+        color: 'inherit',
       },
       (prevMonth || nextMonth) && {
-        color: gray,
+        color: 'var(--date-picker-disemphasized, #bdbdbd)',
       },
       today && {
         outline: '1px solid var(--secondaryMain)',
@@ -351,6 +351,9 @@ export function DatePicker(props: DatePickerProps) {
           key={index}
           variant="text"
           type="button"
+          css={{
+            color: 'inherit',
+          }}
           onClick={() => {
             setDirty(undefined);
 
@@ -435,7 +438,14 @@ export function DatePicker(props: DatePickerProps) {
   }, [locale]);
 
   return (
-    <div css={cssVariables}>
+    <div
+      css={[
+        cssVariables,
+        {
+          color: 'var(--table-text-color)',
+        },
+      ]}
+    >
       <div
         css={{
           display: 'grid',
@@ -499,7 +509,8 @@ export function DatePicker(props: DatePickerProps) {
                 css={{
                   justifySelf: 'center',
                   padding: 10,
-                  borderRight: `1px solid ${gray}`,
+                  borderRight:
+                    '1px solid var(--date-picker-separator, var(--table-border, #bdbdbd))',
                 }}
               >
                 <Text id="calendarWeek" />
@@ -539,7 +550,9 @@ export function DatePicker(props: DatePickerProps) {
                         background: 'transparent',
                         cursor: weekDisabled ? undefined : 'pointer',
                         font: 'inherit',
-                        borderRight: `1px solid ${gray}`,
+                        borderRight:
+                          '1px solid var(--date-picker-separator, var(--table-border, #bdbdbd))',
+                        color: 'inherit',
                       }}
                       onClick={() => {
                         if (weekDisabled) {

src/components/numberField.tsx

@@ -52,6 +52,12 @@ export function NumberField({
         setValue(undefined);
       }}
       {...textFieldProps}
+      css={{
+        input: {
+          backgroundColor: 'inherit',
+          color: 'inherit',
+        },
+      }}
     />
   );
 }

src/components/selectFilter.tsx

@@ -129,7 +129,12 @@ export function SelectFilter<T, V, F extends SerializableValue>({
           disabled={value.size === 0}
           onClick={() => onChange(new Set())}
           variant="outlined"
-          css={{ justifyContent: 'center', width: '100%', marginBottom: 'var(--spacing)' }}
+          css={{
+            justifyContent: 'center',
+            width: '100%',
+            marginBottom: 'var(--spacing)',
+            color: 'inherit',
+          }}
         >
           {deselectAll}
         </Button>

src/theme/defaultTheme/button.tsx

@@ -1,5 +1,4 @@
 import type { TableTheme } from '../../types';
-import { darkGray, lightGray } from './defaultClasses';
 
 export const Button: TableTheme['components']['Button'] = ({
   startIcon,
@@ -30,10 +29,10 @@ export const Button: TableTheme['components']['Button'] = ({
           },
         },
         variant === 'outlined' && {
-          border: `1px solid ${darkGray}`,
+          border: '1px solid var(--table-button-border, var(--table-border, #777777))',
 
           '&:disabled': {
-            borderColor: lightGray,
+            borderColor: 'var(--table-button-border-disabled, #eeeeee)',
           },
         },
         variant === 'contained' && {

src/theme/defaultTheme/defaultClasses.ts

@@ -1,17 +1,12 @@
 import { css } from '@emotion/react';
 
-export const white = '#ffffff';
-export const lightGray = '#eeeeee';
-export const gray = '#bdbdbd';
-export const darkGray = '#777';
-
 const cell = css({
   display: 'flex',
   alignItems: 'center',
-  borderBottom: `1px solid #dfe2e9`,
+  borderBottom: '1px solid var(--table-border-light-color)',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
-  background: 'white',
+  background: 'var(--table-background-color)',
 
   '&:not(:empty)': {
     padding: `calc(var(--spacing) * 0.1) calc(2 * var(--spacing))`,
@@ -22,16 +17,18 @@ export const defaultClasses = {
   table: css({
     position: 'relative',
     display: 'grid',
+    color: 'var(--table-text-color)',
   }),
 
   cell,
 
   cellFill: css({
-    borderBottom: `1px solid ${lightGray}`,
+    borderBottom: '1px solid var(--table-border-light-color)',
+    background: 'var(--table-background-color)',
   }),
 
   headerCell: css(cell, {
-    borderBottom: `1px solid #c9cfda`,
+    borderBottom: '1px solid var(--table-border-color)',
 
     '&:not(:empty)': {
       padding: `var(--spacing) 0 var(--spacing) calc(2 * var(--spacing))`,
@@ -40,7 +37,7 @@ export const defaultClasses = {
 
   footerCell: css(cell, {
     padding: `var(--spacing) calc(2 * var(--spacing))`,
-    borderTop: `1px solid #c9cfda`,
+    borderTop: '1px solid var(--table-border-color)',
     borderBottom: 'none',
   }),
 
@@ -61,13 +58,13 @@ export const defaultClasses = {
   }),
 
   headerFill: css({
-    borderBottom: `1px solid #c9cfda`,
-    background: white,
+    borderBottom: '1px solid var(--table-border-color)',
+    background: 'var(--table-background-color)',
   }),
 
   footerFill: css({
-    borderTop: `1px solid #c9cfda`,
-    background: white,
+    borderTop: '1px solid var(--table-border-color)',
+    background: 'var(--table-background-color)',
   }),
 
   text: css({
@@ -79,7 +76,7 @@ export const defaultClasses = {
   card: css({
     borderRadius: 4,
     boxShadow: '0px 3px 14px 2px rgb(0 0 0 / 12%)',
-    background: 'white',
+    background: 'var(--table-background-color)',
   }),
 
   clearFiltersButton: css({

src/theme/defaultTheme/defaultColors.ts

@@ -4,4 +4,8 @@ export const defaultColors: TableTheme['colors'] = {
   primary: { main: '#1976d2', light: '#42a5f5', contrastText: '#fff' },
   secondary: { main: '#9c27b0', light: '#ba68c8', contrastText: '#fff' },
   blocked: { main: '#f44336', light: '#f26257', contrastText: '#fff' },
+  background: '#ffffff',
+  text: 'inherit',
+  border: '#777',
+  borderLight: '#eee',
 };

src/theme/defaultTheme/popover.tsx

@@ -132,6 +132,7 @@ export const Popover: TableTheme['components']['Popover'] = ({
                 ...position,
                 zIndex: zIndex + 1,
                 overflowY: 'auto',
+                color: 'var(--table-text-color)',
               },
               hidden && { display: 'none' },
               !position && { visibility: 'hidden' },

src/theme/defaultTheme/textField.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import type { TableTheme } from '../../types';
-import { darkGray } from './defaultClasses';
 
 export const TextField: TableTheme['components']['TextField'] = ({
   startIcon,
@@ -20,7 +19,7 @@ export const TextField: TableTheme['components']['TextField'] = ({
           flex: 1,
           display: 'flex',
           alignItems: 'center',
-          border: `1px solid ${darkGray}`,
+          border: '1px solid var(--table-textfield-border, var(--table-border, #777777))',
           borderRadius: 4,
         },
         focus && { border: '2px solid var(--primaryMain)', margin: -1 },

src/theme/mui4Theme/index.tsx

@@ -56,6 +56,10 @@ export function Mui4TableThemeProvider({
         colors: {
           primary: muiTheme.palette.primary,
           secondary: muiTheme.palette.secondary,
+          background: muiTheme.palette.background.default,
+          text: muiTheme.palette.text.primary,
+          border: muiTheme.palette.divider,
+          borderLight: muiTheme.palette.divider,
         },
       },
       mui4Theme,

src/theme/mui5Theme/index.tsx

@@ -57,6 +57,10 @@ export function Mui5TableThemeProvider({
         colors: {
           primary: muiTheme.palette.primary,
           secondary: muiTheme.palette.secondary,
+          background: muiTheme.palette.background.default,
+          text: muiTheme.palette.text.primary,
+          border: muiTheme.palette.divider,
+          borderLight: muiTheme.palette.divider,
         },
       },
       mui5Theme,

src/theme/tableTheme.tsx

@@ -18,6 +18,22 @@ export function mergeThemes<T>(...themes: PartialTableTheme<T>[]): PartialTableT
       primary: Object.assign({}, ...themes.map((theme) => theme.colors?.primary)),
       secondary: Object.assign({}, ...themes.map((theme) => theme.colors?.secondary)),
       blocked: Object.assign({}, ...themes.map((theme) => theme.colors?.blocked)),
+      background: themes
+        .map((theme) => theme.colors?.background)
+        .reverse()
+        .find((x) => x !== undefined),
+      text: themes
+        .map((theme) => theme.colors?.text)
+        .reverse()
+        .find((x) => x !== undefined),
+      border: themes
+        .map((theme) => theme.colors?.border)
+        .reverse()
+        .find((x) => x !== undefined),
+      borderLight: themes
+        .map((theme) => theme.colors?.borderLight)
+        .reverse()
+        .find((x) => x !== undefined),
     },
     spacing: themes
       .map((theme) => theme.spacing)

src/theme/useCssVariables.ts

@@ -13,6 +13,10 @@ export function useCssVariables() {
       '--blockedMain': colors.blocked.main,
       '--blockedLight': colors.blocked.light,
       '--blockedContrastText': colors.blocked.contrastText,
+      '--table-background-color': colors.background,
+      '--table-text-color': colors.text,
+      '--table-border-color': colors.border,
+      '--table-border-light-color': colors.borderLight,
     };
   });
 }

src/types.ts

@@ -135,6 +135,10 @@ export interface TableTheme<T = unknown> {
     primary: { main: string; light: string; contrastText: string };
     secondary: { main: string; light: string; contrastText: string };
     blocked: { main: string; light: string; contrastText: string };
+    background: string;
+    text: string;
+    border: string;
+    borderLight: string;
   };
   /** Spacing. */
   spacing: string | number;