Set color mode colors via `theme.colors.modes`

Is it possible to use color mode like in theme-ui:

colors: {
    ...chakraTheme.colors,
    accent1: '#FAFAFA',
    accent2: '#EAEAEA',
    accent3: '#999',
    accent4: '#888',
    modes: {
      dark: {
        accent1: '#111',
        accent2: '#333',
        accent3: '#999',
        accent4: '#FAFAFA',
      },
    },
  },

_Originally posted by @arnaudjnn in https://github.com/chakra-ui/chakra-ui/issues/1147#issuecomment-656531188_

[jesstelford]

As a workaround for this kind of thing, I’ve created a Provider which sets the right colours directly onto the theme object by making a new .mode property available based on your theme config having a .modes.<light|dark> key:

// dynamic-color-mode.js
import React from 'react';
import { useTheme, useColorMode, ThemeProvider } from '@chakra-ui/core';

export const DynamicColorMode = (props) => {
  const { colorMode } = useColorMode();
  const theme = useTheme();

  return (
    <ThemeProvider
      {...props}
      theme={{
        // Chakra does a deep-merge of the theme objects
        colors: {
          mode: {
            // Retain access to all the default colours specified
            ...theme.colors,
            // Overwrite with mode-specific colors
            ...theme.colors.modes?.[colorMode],
          },
        },
      }}
    />
  );
};

Then use it like so:

import defaultTheme from '@chakra-ui/theme';
import { ChakraProvider, InitializeColorMode, Box } from '@chakra-ui/core';
import { DynamicColorMode } from './dynamic-color-mode';

const theme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    border: '#888',
    modes: {
      dark: {
        bg: '#333'
      },
      light: {
        bg: '#ddd'
      }
    }
  },
}

export default function App() {
  return (
    <ChakraProvider theme={theme}>
      <InitializeColorMode />
      <DynamicColorMode>
        <Box bg="mode.bg" border="1px solid" borderColor="mode.border" />
      </DynamicColorMode>
    </ChakraProvider>
  );
}

[arnaudjnn]

So we have to use a condition each time we use color?

<Text bg="accent2"/> is better than <Text bg={colorMode === "dark" ? "green.300" : "green.500"} />