feat: add interactive theme system with 11 pre-built color themes#42
Open
turkycat wants to merge 1 commit into
Open
feat: add interactive theme system with 11 pre-built color themes#42turkycat wants to merge 1 commit into
turkycat wants to merge 1 commit into
Conversation
Port the turkycat fork's theme system (11 pre-built color themes, interactive theme picker, font pair picker) onto upstream v0.6.3 which added slide decks, multi-diagram zoom/pan, anti-slop guardrails, class/C4 diagrams, share-to-Vercel, and plugin marketplace structure. Theme files moved into plugins/visual-explainer/themes/ to match upstream's plugin directory layout. Theme picker and font pair picker sections added to SKILL.md. Theme config note added to css-patterns.md. README updated with theme documentation. Backup of pre-rebase turkycat/main at origin/main-backup-2026-04-14. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a runtime theme switching system to visual-explainer:
<html>and re-render Mermaid diagrams live.claude/visual-explainer.local.mdtheme field sets the default selectionWhat's included
plugins/visual-explainer/themes/*.mdplugins/visual-explainer/SKILL.md(additive sections)plugins/visual-explainer/references/css-patterns.mdREADME.mdHow it works
Each theme file defines CSS custom properties and Mermaid themeVariables in a structured markdown format. The SKILL.md instructs the agent to:
./themes/to extract CSS variable valuesthemesJS object andapplyTheme()function in every generated pageThe font pair picker works similarly, swapping
--font-sansand--font-monoCSS variables and re-rendering Mermaid with the newfontFamily.Screenshots
Screenshots show the same demo page (3 Mermaid sequence diagrams with callouts) under different theme + font combinations:
Nord + IBM Plex Sans (default)
Dracula + Fraunces
GitHub Light + Space Grotesk
Synthwave '84 + Syne
Design decisions
--bg,--surface,--accent, etc. variable names that css-patterns.md already defines, so all existing patterns work without modificationdata-sourcepattern — Mermaid re-rendering reads fromel.dataset.source(saved before first render) to avoid the "SVG text ≠ diagram source" bug