Skip to content

feat(export): add theme selection to PDF, HTML & Image exports and fix dark/light styling #253

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ThisIs-Developer merged 3 commits into from
Sep 1, 2026
Merged

feat(export): add theme selection to PDF, HTML & Image exports and fix dark/light styling #253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9fc46ac
feat(export): add theme selection to PDF/HTML/image export and improv…
ThisIs-Developer Aug 29, 2026
f4a77a0
Merge remote-tracking branch 'origin/main' into feat/export-theme-sel…
ThisIs-Developer Aug 29, 2026
a0a86c0
feat(export): modernize theme selector to compact segmented toggle an…
ThisIs-Developer Aug 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 79 additions & 1 deletion desktop-app/resources/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -698,7 +698,8 @@ <h2 id="document-sidebar-title">Explorer</h2>
</div>
<div class="modal-body">
<p class="share-modal-description">Choose how the PDF should be generated.</p>
<div class="share-mode-cards">
<div class="live-share-section-title mb-2">Generation Method</div>
<div class="share-mode-cards mb-3">
<label class="share-mode-card is-selected" id="pdf-export-card-vector" for="pdf-export-mode-vector">
<input type="radio" id="pdf-export-mode-vector" name="pdf-export-mode" value="vector" checked />
<span class="share-card-icon"><i class="lucide lucide-file-text"></i></span>
Expand All @@ -718,6 +719,19 @@ <h2 id="document-sidebar-title">Explorer</h2>
<span class="share-card-check"><i class="lucide lucide-check"></i></span>
</label>
</div>
<div class="live-share-section-title mb-2">Appearance</div>
<div class="export-theme-toggle segmented-control" role="radiogroup" aria-label="Export theme">
<label class="export-theme-option segmented-control-btn is-active is-selected" id="pdf-export-theme-card-light" for="pdf-export-theme-light">
<input type="radio" id="pdf-export-theme-light" name="pdf-export-theme" value="light" checked />
<i class="lucide lucide-sun"></i>
<span>Light</span>
</label>
<label class="export-theme-option segmented-control-btn" id="pdf-export-theme-card-dark" for="pdf-export-theme-dark">
<input type="radio" id="pdf-export-theme-dark" name="pdf-export-theme" value="dark" />
<i class="lucide lucide-moon"></i>
<span>Dark</span>
</label>
</div>
</div>
<div class="reset-modal-actions">
<button class="reset-modal-btn reset-modal-cancel" id="pdf-export-cancel">Cancel</button>
Expand All @@ -726,6 +740,70 @@ <h2 id="document-sidebar-title">Explorer</h2>
</div>
</div>

<!-- HTML Export Options Modal -->
<div id="html-export-modal" class="reset-modal-overlay modal-overlay" role="dialog" aria-modal="true" aria-labelledby="html-export-title" aria-hidden="true" style="display:none;">
<div class="reset-modal-box app-modal-box modal-box">
<div class="modal-header">
<p id="html-export-title" class="reset-modal-message">Export HTML Options</p>
<button type="button" class="modal-close-btn" id="html-export-close" aria-label="Close HTML export dialog">
<i class="lucide lucide-x"></i>
</button>
</div>
<div class="modal-body">
<p class="share-modal-description">Choose how the exported HTML document should be styled.</p>
<div class="live-share-section-title mb-2">Appearance</div>
<div class="export-theme-toggle segmented-control" role="radiogroup" aria-label="Export theme">
<label class="export-theme-option segmented-control-btn is-active is-selected" id="html-export-theme-card-light" for="html-export-theme-light">
<input type="radio" id="html-export-theme-light" name="html-export-theme" value="light" checked />
<i class="lucide lucide-sun"></i>
<span>Light</span>
</label>
<label class="export-theme-option segmented-control-btn" id="html-export-theme-card-dark" for="html-export-theme-dark">
<input type="radio" id="html-export-theme-dark" name="html-export-theme" value="dark" />
<i class="lucide lucide-moon"></i>
<span>Dark</span>
</label>
</div>
</div>
<div class="reset-modal-actions">
<button class="reset-modal-btn reset-modal-cancel" id="html-export-cancel">Cancel</button>
<button class="reset-modal-btn reset-modal-confirm" id="html-export-confirm">Export</button>
</div>
</div>
</div>

<!-- PNG Export Options Modal -->
<div id="png-export-modal" class="reset-modal-overlay modal-overlay" role="dialog" aria-modal="true" aria-labelledby="png-export-title" aria-hidden="true" style="display:none;">
<div class="reset-modal-box app-modal-box modal-box">
<div class="modal-header">
<p id="png-export-title" class="reset-modal-message">Export Image Options</p>
<button type="button" class="modal-close-btn" id="png-export-close" aria-label="Close Image export dialog">
<i class="lucide lucide-x"></i>
</button>
</div>
<div class="modal-body">
<p class="share-modal-description">Choose how the exported image should be styled.</p>
<div class="live-share-section-title mb-2">Appearance</div>
<div class="export-theme-toggle segmented-control" role="radiogroup" aria-label="Export theme">
<label class="export-theme-option segmented-control-btn is-active is-selected" id="png-export-theme-card-light" for="png-export-theme-light">
<input type="radio" id="png-export-theme-light" name="png-export-theme" value="light" checked />
<i class="lucide lucide-sun"></i>
<span>Light</span>
</label>
<label class="export-theme-option segmented-control-btn" id="png-export-theme-card-dark" for="png-export-theme-dark">
<input type="radio" id="png-export-theme-dark" name="png-export-theme" value="dark" />
<i class="lucide lucide-moon"></i>
<span>Dark</span>
</label>
</div>
</div>
<div class="reset-modal-actions">
<button class="reset-modal-btn reset-modal-cancel" id="png-export-cancel">Cancel</button>
<button class="reset-modal-btn reset-modal-confirm" id="png-export-confirm">Export</button>
</div>
</div>
</div>


<!-- Find & Replace Floating Panel -->
<div id="find-replace-modal" class="find-replace-panel" role="region" aria-label="Find and Replace" style="display:none;">
Expand Down
2 changes: 1 addition & 1 deletion desktop-app/resources/js/preview-worker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -776,7 +776,7 @@ function ensureLibraries(urls) {
}

function isSegmentedPreviewSafe(markdown) {
if (/^\s*---\r?\n[\s\S]*?\r?\n---(?:\r?\n|$)/.test(markdown)) return false;
if (typeof markdown === 'string' && markdown.startsWith('---') && /^---\r?\n[a-zA-Z0-9_-]+\s*:[\s\S]*?\r?\n---(?:\r?\n|$)/.test(markdown)) return false;
if (/^\[[^\]\n]+\]:\s+\S+/m.test(markdown)) return false;
if (/\[\^[^\]\n]+\]/.test(markdown)) return false;
if (/\n:[ \t]+/.test(markdown)) return false;
Expand Down
Loading
Loading