Theming System
Relevant source files
The following files were used as context for generating this wiki page:
The Theming System in Writer is a decoupled architecture responsible for managing the visual presentation of both the live editor and the rendered output. It bridges the gap between raw Markdown content and styled visual components, providing consistent typography and color schemes across the application's interface, web-based previews, and exported documents.
The system is built on top of the Swift Observation framework, allowing for real-time updates across the UI when a user modifies theme settings such as font size or font family. It specifically manages the conversion of theme properties into CSS for web rendering and NSAttributedString attributes for native macOS text views.
Core Architecture
The system's architecture is centered around a state management layer that distributes theme data to various rendering engines. It separates native editor styling from HTML-based preview styling.
The diagram above shows the flow of theme data from the central store to the editor and rendering components.
Sources: Writer/ThemeStore.swift, Writer/PreviewTheme.swift, Writer/WebView.swift
ThemeStore
The ThemeStore is the central @Observable class that manages the active theme state. It persists user preferences and provides a unified interface for the rest of the application to access current typography and theme presets.
- Key Properties:
previewTheme: The currentPreviewThemeobject used for HTML rendering.baseFontSize: A Double representing the primary font size (default 16).preset: An enumeration for high-level theme categories (e.g.,.default,.gitHub).
Sources: Writer/ThemeStore.swift:15-46
PreviewTheme Data Model
The PreviewTheme struct serves as the data contract for all visual styling. It contains properties for typography families and a neutral color palette.
| Field | Type | Description |
|---|---|---|
name | String | Display name of the theme |
bodyFontFamily | String | CSS-compatible font stack for body text |
headingFontFamily | String | CSS-compatible font stack for headings |
baseFontSize | Int | Base size in pixels for typography |
lineHeight | Double | Multiplier for line spacing |
backgroundColor | String | Hex code for the document background |
textColor | String | Hex code for primary text |
codeBackgroundColor | String | Hex code for code block/inline code backgrounds |
| Sources: Writer/PreviewTheme.swift:5-18 |
Web-Based Styling (CSS Generation)
A primary function of the theming system is generating dynamic CSS strings from the PreviewTheme model. This CSS is injected into the WebView for the live preview and included in standalone exports.
CSS Injection Flow
The PreviewTheme calculates a cssStyles property that formats the theme's colors and fonts into standard CSS rules. The MarkdownRenderer then wraps the HTML body content with these styles.
Built-in Presets
The system provides two primary static presets:
- Sans Serif: Uses a system font stack (
-apple-system,BlinkMacSystemFont) with a clean, modern appearance. - Serif: Uses traditional serif fonts (
Georgia,Times New Roman).
Sources: Writer/PreviewTheme.swift:21-50
Native Editor Styling
Unlike the web-based preview, the MarkdownTextView (the primary editor) uses native macOS typography. It consumes settings from the ThemeStore to apply syntax highlighting and basic layout.
Editor Typography Logic
The MarkdownTextView reacts to changes in ThemeStore.baseFontSize. When the size changes, the internal NSTextView updates its typingAttributes and re-triggers the syntax highlighting pass to ensure all headers and body text scale proportionally.
- Font Application: The editor uses
NSFont.monospacedSystemFontfor the editing environment. - Header Scaling: Heading levels (H1-H6) are styled with bold weights but maintain consistency with the base font size.
Sources: Writer/MarkdownTextView.swift:34-62, Writer/MarkdownTextView.swift:129-145
Theme Interaction and UI
Users interact with the theming system through the ThemeEditorView and a theme picker overlay in the WebView.
Configuration Options
| Component | Control Type | Target Property | Default |
|---|---|---|---|
| Typography Picker | Picker | ThemeStore.previewTheme | Sans Serif |
| Base Font Size | TextField | ThemeStore.baseFontSize | 16 |
| Paintbrush Icon | Menu | ThemeStore.previewTheme | N/A |
| Sources: Writer/ThemeEditorView.swift:17-36, Writer/WebView.swift:23-34 |
Summary
The Writer Theming System facilitates a unified visual experience by abstracting style definitions into the PreviewTheme and ThemeStore. By leveraging CSS for web rendering and NSFont attributes for native editing, the system ensures that distraction-free writing remains visually consistent across the application's editor, preview pane, and final exported documents (HTML, PDF, and RTF).