Function DynamicColorTheme

docs/src/components/DynamicColorTheme.tsx:318–411

()

};

const DynamicColorTheme = () => {
  const [isDark, setIsDark] = useState(false);

  const [primary, setPrimary] = useState<string>(defaultColor);
  const [secondary, setSecondary] = useState<string | undefined>();
  const [tertiary, setTertiary] = useState<string | undefined>();
  const [customColors, setCustomColors] = useState<CustomColorEntry[]>([]);

  const darkMode = isDark ? 'dark' : 'light';
  const baseTheme = hexThemeFromColor(primary);
  const themes = prepareThemes({
    primary,
    secondary,
    tertiary,
    custom: customColors.map(({ name, hex }) => [name, hex]),
  });

  return (
    <div>
      <table className="color-picker">
        <tbody>
          <BaseColor color={primary} setColor={setPrimary} />
          <AdditionalColor
            color={secondary}
            setColor={setSecondary}
            base={baseTheme.secondary}
          >
            Secondary
          </AdditionalColor>
          <AdditionalColor
            color={tertiary}
            setColor={setTertiary}
            base={baseTheme.tertiary}
          >
            Tertiary
          </AdditionalColor>

          <CustomColors
            customColors={customColors}
            setCustomColors={setCustomColors}
          />
        </tbody>
      </table>

      <div
        className="color-picker-preview"
        style={{
          //@ts-ignore
          background: themes[darkMode].background,
          //@ts-ignore
          color: themes[darkMode].onBackground,
          //@ts-ignore
          borderColor: themes[darkMode].outlineVariant,
        }}
      >
        <div className="color-picker-preview-header">
          <h3>Preview</h3>
          <div>