theme.js

import { mode } from '@chakra-ui/theme-tools';
import { extendTheme } from '@chakra-ui/core';

const styles = {
  global: props => ({
    ":root": {
      "--app-title-color": "#718096",
      "--card-minw": "160px",
      "--blackwhite": mode("black", "white")(props),
      "--whiteblack": mode("white", "black")(props),
      "--bg-color": mode(
        "var(--chakra-colors-gray-100)",
        "var(--chakra-colors-gray-800)"
      )(props),
    },
    body: {
      color: mode('gray.800', 'whiteAlpha.900')(props),
      bg: "var(--bg-color)",
    },
  }),
};

const components = {
  Drawer: {
    // setup light/dark mode component defaults
    baseStyle: props => ({
      dialog: {
        bg: mode('white', '#141214')(props),
      },
    }),
  },
};

const layerStyles: {
   base: {
       bg: "red.500",
       ".chakra-ui-dark &": {  bg: "red.300" }
  }
}

const fonts = {
    fira: "Fira Sans, sans-serif",
    mont: "Montserrat, sans-serif",
},

const theme = extendTheme({
  components,
  styles,
  layerStyles, // See also textStyles
  fonts
});

export default theme;