Add Markdown preview theme controls#64
Conversation
There was a problem hiding this comment.
Pull request overview
Adds independent, persisted theme controls for Markdown previews so preview rendering can be toggled between Auto/Light/Dark without changing the app/editor theme.
Changes:
- Introduces a persisted
markdownPreviewThemePreferencesetting (TS + Rust) with sanitization/defaulting. - Adds a compact light/dark toggle UI to the Markdown preview and applies theme-specific CSS variables via
data-preview-theme. - Extends frontend + backend tests to cover preference sanitization, UI behavior, and persistence wiring.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/tauri.ts | Adds MarkdownPreviewThemePreference, default, sanitization, and persists it in PersistedViewSettings defaults. |
| src/tauri.test.ts | Updates UI snapshot expectations and adds sanitization tests for the new preference. |
| src/MarkdownPreview.tsx | Adds the toggle UI and applies data-preview-theme for theming the preview surface. |
| src/MarkdownPreview.test.tsx | Tests the resolved theme indicator and direct switching behavior via the toggle. |
| src/MarkdownPreview.css | Defines light/dark theme variable sets and styles the floating toggle control. |
| src/App.tsx | Wires preference state, resolves Auto to the effective app theme, persists updates, and exposes the setting in “Preview Features”. |
| src/App.test.tsx | Verifies inline Auto resolution and persistence of light/dark selection through UI interactions. |
| src-tauri/src/lib.rs | Persists the new field in Rust UI state with serde defaults and sanitization + tests. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new markdown_preview_theme_preference setting, allowing users to configure the Markdown preview theme to "auto", "light", or "dark". The setting is integrated into the Tauri backend and the React frontend, complete with UI controls in the settings dialog, an inline theme toggle on the preview itself, and corresponding CSS theme variables. Feedback on the changes suggests refactoring the hardcoded hex values in the dark theme CSS to use established design tokens, and defining a constant for the allowed theme preferences in the Rust backend to maintain consistency with other settings.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 486e59f3dc
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds persisted Auto/Light/Dark Markdown preview theming, inline theme controls, Settings integration, separate view-state persistence, theme-specific CSS, sanitization, and tests covering persistence, resolution, accessibility state, and diagram preservation. ChangesMarkdown preview theme
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Settings
participant App
participant MarkdownPreview
participant UIState
Settings->>App: Select Auto, Light, or Dark
App->>MarkdownPreview: Pass resolved preview theme
MarkdownPreview->>App: Report inline theme selection
App->>UIState: Persist markdownPreviewThemePreference
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
|
@codex review |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/App.test.tsx`:
- Around line 1412-1416: Update the assertion around tauriMocks.updateUiState to
inspect the last call directly and assert its second argument with
toBe(savedWorkspace), while retaining the existing
markdownPreviewThemePreference check for the first argument.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 0ee1906c-d6a6-411c-8d76-6858b240ecc3
📒 Files selected for processing (2)
src/App.test.tsxsrc/App.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/App.tsx
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0a9e249b40
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d26851311d
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
@codex review |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src-tauri/src/lib.rs (1)
3643-3670: 🗄️ Data Integrity & Integration | 🔵 Trivial | ⚡ Quick winExercise
update_view_settingsin the persistence regression.This test calls
apply_view_runtime_settings, manually assignsui_state.view, and persists it, so a brokenupdate_view_settingsimplementation could still pass. Invoke the command itself (or add a focused command test) and retain the workspace-preservation assertions.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src-tauri/src/lib.rs` around lines 3643 - 3670, The test view_settings_updates_preserve_workspace_state currently bypasses update_view_settings by calling apply_view_runtime_settings and assigning ui_state.view directly. Exercise update_view_settings itself (or add a focused command test), then persist and retain assertions verifying the existing workspace state remains unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src-tauri/src/lib.rs`:
- Around line 1414-1421: Update update_view_settings and update_ui_state so each
mutation, snapshot, and persist_ui_state call occurs while holding the same
ui_state write lock, preventing an older snapshot from being written after a
newer update. Adjust the regression test to invoke the actual command path and
verify concurrent updates are persisted without stale overwrites.
---
Nitpick comments:
In `@src-tauri/src/lib.rs`:
- Around line 3643-3670: The test view_settings_updates_preserve_workspace_state
currently bypasses update_view_settings by calling apply_view_runtime_settings
and assigning ui_state.view directly. Exercise update_view_settings itself (or
add a focused command test), then persist and retain assertions verifying the
existing workspace state remains unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 2cfe2efd-b397-4510-9bed-d9222bd7b3b5
📒 Files selected for processing (7)
src-tauri/src/lib.rssrc/App.test.tsxsrc/App.tsxsrc/MarkdownPreview.test.tsxsrc/MarkdownPreview.tsxsrc/tauri.test.tssrc/tauri.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- src/tauri.ts
- src/MarkdownPreview.tsx
- src/App.tsx
|
Codex Review: Didn't find any major issues. 🎉 Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
|
@codex review |
|
Codex Review: Didn't find any major issues. 🚀 Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
|
@codex review |
|
Codex Review: Didn't find any major issues. 🎉 Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
| fn default_markdown_preview_theme_preference() -> String { | ||
| "auto".to_string() | ||
| } |
| let (_persist_guard, path) = lock_ui_state_store(state)?; | ||
| let view = apply_view_runtime_settings(state, view)?; | ||
| let ui_state = { | ||
| let mut ui_state = state | ||
| .ui_state | ||
| .write() | ||
| .map_err(|_| CommandError::UiState("ui state lock poisoned".to_string()))?; | ||
| ui_state.view = view; | ||
| ui_state.clone() | ||
| }; | ||
| persist_ui_state_value(&path, &ui_state) |
| #[tauri::command] | ||
| fn update_view_settings( | ||
| state: State<'_, AppState>, | ||
| view: PersistedViewSettings, | ||
| ) -> Result<(), CommandError> { | ||
| update_view_settings_state(&state, view) | ||
| } |
Why
Markdown and Mermaid content can be authored for a different colour scheme than the app. Preview themes should be independently adjustable without changing the editor or requiring an intermediate Auto selection.
User impact
The preview now has a compact sun/moon control in its top-right corner. Settings > Preview Features provides Auto, Light, and Dark; the choice persists across sessions.
Validation
./run-tests.shSummary by CodeRabbit