Customizing the theme

A theme consists of two parts:

• editor theme - styles for the editor content like heading, paragraph, table, etc.
• shell theme - styles for the editor shell like toolbar, dialog, etc.

To understand how a custom theme is created, you can refer to the playground and the source code for the same.

Following files in the playground project define the custom theme:

• svelte.config.js
• package.json
• Directorysrc

  • index.css shell theme
  • Directorythemes

    • PlaygroundEditorTheme.css editor theme styles
    • PlaygroundEditorTheme.ts editor theme class names mapping
• static