Theming

DocumentEditorTheme is the editor's one theme. It holds every colour and editor-owned size the editor paints. Document content keeps its own colours and fonts, so the screen, PDF and DOCX always agree.

What the theme covers, and what the document keeps

App-wide

Pass the light and dark themes to MaterialApp from package:material_ui, the Material library the editor is built on.

MaterialApp(
  theme: DocumentEditorTheme.light().materialTheme,
  darkTheme: DocumentEditorTheme.dark().materialTheme,
  home: DocumentEditor(controller: controller),
);

materialTheme styles the toolbars, menus and panels, and carries the editor theme for everything else.

Your colours

Start from	Use
A preset	DocumentEditorTheme.light() or .dark()
A few changes	.copyWith(selectionColor: brand)
Your Material colours	DocumentEditorTheme.fromColorScheme(scheme)

One editor

Set DocumentEditorConfiguration(theme: …) to style one editor differently from the rest of the app, toolbar and menus included.

How an editor finds its theme

import 'package:material_ui/material_ui.dart';
import 'package:vyuh_document_editor/vyuh_document_editor.dart';

// App-wide: one light and one dark editor theme. ThemeMode picks between them.
void main() => runApp(
  MaterialApp(
    theme: DocumentEditorTheme.light().materialTheme,
    darkTheme: DocumentEditorTheme.dark().materialTheme,
    themeMode: ThemeMode.system,
    home: const ThemedNotes(),
  ),
);

// A brand theme for each brightness, derived from one seed colour: the
// toolbar, hover and active tools, selection and caret all follow it.
DocumentEditorTheme brandTheme(Brightness brightness) {
  final scheme = ColorScheme.fromSeed(
    seedColor: const Color(0xFF7B1FA2),
    brightness: brightness,
    dynamicSchemeVariant: DynamicSchemeVariant.vibrant,
  );
  final theme = DocumentEditorTheme.fromColorScheme(
    scheme,
  ).copyWith(caretShape: DocumentCaretShape.thickLine);
  // A tinted writing canvas on light chrome; dark keeps the white canvas.
  return brightness == Brightness.light
      ? theme.copyWith(continuousCanvasColor: scheme.surfaceContainer)
      : theme;
}

final brand = brandTheme(Brightness.light);
final brandDark = brandTheme(Brightness.dark);

// Or adjust a preset: copyWith changes only the fields you name.
final tweaked = DocumentEditorTheme.light().copyWith(
  selectionColor: const Color(0xFF00695C),
);

class ThemedNotes extends StatefulWidget {
  const ThemedNotes({super.key});

  @override
  State<ThemedNotes> createState() => _ThemedNotesState();
}

class _ThemedNotesState extends State<ThemedNotes> {
  late final app = DocumentEditorController.richText(
    layoutMode: DocumentEditorLayoutMode.pageless,
    document: Document.empty(title: 'Follows the app theme'),
  );
  late final branded = DocumentEditorController.richText(
    layoutMode: DocumentEditorLayoutMode.pageless,
    document: Document.empty(title: 'Brand theme'),
  );

  @override
  void dispose() {
    app.dispose();
    branded.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
    body: Row(
      children: [
        // No theme: the editor reads the app's DocumentEditorTheme.
        Expanded(child: DocumentEditor(controller: app)),
        // A per-editor theme overrides the app's for this editor only.
        Expanded(
          child: DocumentEditor(
            controller: branded,
            configuration: DocumentEditorConfiguration.richText(
              theme: Theme.of(context).brightness == Brightness.dark
                  ? brandDark
                  : brand,
            ),
          ),
        ),
      ],
    ),
  );
}

What the document keeps

Page colour, text colours, highlights and fonts belong to the document. A dark editor shows dark chrome around white pages, the way they print.