Skip to main content

Color Theme Example

This example demonstrates how to customize the editor's color theme.

Overview​

The color theme example shows how to:

  • Switch between different color themes
  • Apply theme styles dynamically
  • Customize editor appearance

Code Example​

import { useState, useMemo } from "react";
import { EmailEditorProvider, EmailTemplate } from "easy-email-pro-editor";
import { Retro } from "easy-email-pro-theme";
import { Select } from "@arco-design/web-react";

import retroStyle from "@arco-themes/react-easy-email-pro/css/arco.css?inline";
import colorPurpleStyle from "@arco-themes/react-easy-email-pro-purple/css/arco.css?inline";
import colorRedStyle from "@arco-themes/react-easy-email-pro-red/css/arco.css?inline";
import colorBlueStyle from "@arco-themes/react-easy-email-pro-blue/css/arco.css?inline";
import colorGreenStyle from "@arco-themes/react-easy-email-pro-green/css/arco.css?inline";

export default function MyEditor() {
  const [theme, setTheme] = useState<string>("red");

  const matchThemeStyle = useMemo(() => {
    const themes = {
      retro: retroStyle,
      purple: colorPurpleStyle,
      green: colorGreenStyle,
      blue: colorBlueStyle,
      red: colorRedStyle,
    };
    return themes[theme] || "";
  }, [theme]);

  const config = Retro.useCreateConfig({
    // ... config
  });

  return (
    <>
      <style>{matchThemeStyle}</style>
      <EmailEditorProvider {...config}>
        <Select
          value={theme}
          onChange={setTheme}
          options={[
            { label: "Retro", value: "retro" },
            { label: "Purple", value: "purple" },
            { label: "Red", value: "red" },
            { label: "Blue", value: "blue" },
            { label: "Green", value: "green" },
          ]}
        />
        <Retro.Layout />
      </EmailEditorProvider>
    </>
  );
}

Available Themes​

  • Retro (default)
  • Purple
  • Red
  • Blue
  • Green

Key Points​

  • Import theme CSS files
  • Apply styles dynamically
  • Update theme on selection change