Theming

The editor UI (toolbar, dialogs, etc) colors and fonts are defined as CSS variables attached to the editor root element. The color variables follow the Radix semantic aliasing convention.

The example below swaps the editor gray/blue colors with tomato/mauve. In addition, assigning the dark-theme class to the editor also flips it to dark mode (this is a feature of the Radix colors).

@import url('@radix-ui/colors/tomatoDark.css');
@import url('@radix-ui/colors/mauveDark.css');

.dark-editor {
  --accentBase: var(--tomato1);
  --accentBgSubtle: var(--tomato2);
  --accentBg: var(--tomato3);
  --accentBgHover: var(--tomato4);
  --accentBgActive: var(--tomato5);
  --accentLine: var(--tomato6);
  --accentBorder: var(--tomato7);
  --accentBorderHover: var(--tomato8);
  --accentSolid: var(--tomato9);
  --accentSolidHover: var(--tomato10);
  --accentText: var(--tomato11);
  --accentTextContrast: var(--tomato12);

  --basePageBg: white;
  --baseBase: var(--mauve1);
  --baseBgSubtle: var(--mauve2);
  --baseBg: var(--mauve3);
  --baseBgHover: var(--mauve4);
  --baseBgActive: var(--mauve5);
  --baseLine: var(--mauve6);
  --baseBorder: var(--mauve7);
  --baseBorderHover: var(--mauve8);
  --baseSolid: var(--mauve9);
  --baseSolidHover: var(--mauve10);
  --baseText: var(--mauve11);
  --baseTextContrast: var(--mauve12);

  color: var(--baseText);
  background: var(--basePageBg);
}

export function CustomTheming() {
  return (
    <MDXEditor 
      className="dark-theme dark-editor" 
      markdown={kitchenSinkMarkdown} 
      plugins={[
        toolbarPlugin({ toolbarContents: () => <KitchenSinkToolbar /> }),
        listsPlugin(),
        quotePlugin(),
        headingsPlugin(),
        linkPlugin(),
        linkDialogPlugin(),
        imagePlugin(),
        tablePlugin(),
        thematicBreakPlugin(),
        frontmatterPlugin(),
        codeBlockPlugin({ defaultCodeBlockLanguage: 'txt' }),
        sandpackPlugin({ sandpackConfig: virtuosoSampleSandpackConfig }),
        codeMirrorPlugin({ codeBlockLanguages: { js: 'JavaScript', css: 'CSS', txt: 'text', tsx: 'TypeScript' } }),
        directivesPlugin({ directiveDescriptors: [YoutubeDirectiveDescriptor, AdmonitionDirectiveDescriptor] }),
        diffSourcePlugin({ viewMode: 'rich-text', diffMarkdown: 'boo' }),
        markdownShortcutPlugin()
      ]} 
    />
  )
}