Theme Editor UI
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Theme Editor UI is a specialized interface component within the Writer application responsible for managing the visual presentation of the Markdown preview and exported documents. It allows users to toggle between predefined typography presets and adjust base font sizes, which dynamically updates the rendering engine's output.
The system bridges SwiftUI-based user controls with a web-based rendering pipeline. Changes made in the Theme Editor influence the CSS generation handled by the PreviewTheme model, which is subsequently injected into the WebView for live previewing or used by export modules like HTMLExporter and PDFExporter.
Sources: Writer/ThemeEditorView.swift:14-41, CLAUDE.md:21-23, Writer/PreviewTheme.swift:49-51
Architecture and Data Flow
The theme management architecture follows a reactive pattern using Swift's Observation framework. The ThemeStore acts as the central state holder, while ThemeEditorView provides the control interface.
Component Relationship
The diagram above illustrates how the ThemeStore serves as the intermediary between the configuration UI and the rendering components.
Sources: CLAUDE.md:14-16, Writer/ThemeEditorView.swift:15-18, Writer/WebView.swift:20-22
Theme Configuration Data Model
The core styling logic is encapsulated in the PreviewTheme structure, which defines both typography and color palettes.
| Field | Type | Description |
|---|---|---|
name | String | The display name of the theme (e.g., "Sans Serif"). |
bodyFontFamily | String | CSS font-family string for body text. |
headingFontFamily | String | CSS font-family string for headings. |
codeFontFamily | String | CSS font-family string for code blocks and inline code. |
baseFontSize | Int | The root font size in pixels. |
lineHeight | Double | The vertical spacing between lines. |
backgroundColor | String | Hex code for the document background. |
textColor | String | Hex code for primary text. |
Sources: Writer/PreviewTheme.swift:5-20
Implementation Details
Theme Selection and Adjustment
The ThemeEditorView utilizes a Form structure to present configuration options. It includes a Picker for selecting between themes like "Sans Serif" and "Serif," and a TextField for numerical font size input.
Picker("Typography", selection: Bindable(themeStore).previewTheme) {
ForEach(PreviewTheme.allThemes, id: \.name) { theme in
Text(theme.name).tag(theme)
}
}
Sources: Writer/ThemeEditorView.swift:20-24
CSS Generation and Injection
The application converts the current theme state into a CSS string via the cssStyles computed property. This string is then wrapped into a full HTML document structure by the MarkdownRenderer.
The sequence diagram demonstrates the transformation of theme properties into rendered styles within the preview.
Sources: Writer/PreviewTheme.swift:49-148, Writer/MarkdownRenderer.swift:153-171, Writer/WebView.swift:50-54
Presets
The system provides two primary presets defined as static constants in the PreviewTheme extension:
- Sans Serif: Uses system font stacks (
-apple-system,BlinkMacSystemFont) for a modern, clean look. - Serif: Uses traditional typography (
Georgia,Times New Roman) for a classic reading experience.
Both themes share a neutral color palette with white backgrounds (#ffffff) and dark gray text (#24292e).
Sources: Writer/PreviewTheme.swift:23-47
Summary
The Theme Editor UI provides a centralized point for controlling the aesthetics of the Writer application. By leveraging the PreviewTheme model and ThemeStore, the UI ensures that typography and color changes are synchronized across the live preview and all export formats, maintaining visual consistency throughout the document lifecycle.
Sources: Writer/WriterApp.swift:17-19, Writer/WebView.swift:9-11