How to use the @zendeskgarden/react-theming.PALETTE.kale function in @zendeskgarden/react-theming

To help you get started, we’ve selected a few @zendeskgarden/react-theming examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github zendeskgarden / react-components / docs / src / components / CodeExample.js View on Github external
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'
        }
      }
    };
  }