How to use the @zendeskgarden/react-theming.DEFAULT_THEME.colors function in @zendeskgarden/react-theming

it('renders a dark foreground on a light background', () => {
      const { container } = render();
      const color = DEFAULT_THEME.colors.foreground;

      expect(container.firstChild).toHaveStyleRule('color', color);
    });

it('renders a light foreground on a dark background', () => {
      const { container } = render();
      const color = DEFAULT_THEME.colors.background;

      expect(container.firstChild).toHaveStyleRule('color', color);
    });
  });

const CodeExample = ({ children, code }) => {
  const [isDark, setIsDark] = useState(false);
  const [isRtl, setIsRtl] = useState(false);
  const [showCode, setShowCode] = useState(false);

  let coloredTheme = { ...DEFAULT_THEME };

  if (isDark) {
    coloredTheme = {
      ...DEFAULT_THEME,
      colors: {
        ...DEFAULT_THEME.colors,
        foreground: '#f3f0ee',
        background: PALETTE.kale[700]
      },
      palette: {
        ...DEFAULT_THEME.palette,
        blue: {
          100: '#0f3554',
          200: '#144a75',
          300: '#1f73b7',
          400: '#337fbd',
          500: '#5293c7',
          600: '#adcce4',
          700: '#cee2f2',
          800: '#edf7ff'
        }
      }