feat(themes): add 12 new themes (Catppuccin, One Light, Tokyo Night Storm, Synthwave, Outrun, Winter, Solarized HC, Spring)

Amit Haridas

src/styles/themes/catppuccin-frappe.css

@@ -0,0 +1,37 @@
+/* Theme: Catppuccin Frappe — id=catppuccin-frappe — category=dark */
+
+body.theme-catppuccin-frappe {
+  --bg: #303446;
+  --fg: #c6d0f5;
+  --accent: #8caaee;
+  --link: #f4b8e4;
+  --code-bg: #414559;
+  --border: #626880;
+  --muted: #838ba7;
+}
+
+body.theme-catppuccin-frappe .app-header,
+body.theme-catppuccin-frappe .toolbar,
+body.theme-catppuccin-frappe #editor,
+body.theme-catppuccin-frappe #preview,
+body.theme-catppuccin-frappe .preview-content,
+body.theme-catppuccin-frappe .status-bar,
+body.theme-catppuccin-frappe .tab-bar,
+body.theme-catppuccin-frappe .tab,
+body.theme-catppuccin-frappe .modal-content {
+  background: var(--bg);
+  color: var(--fg);
+  border-color: var(--border);
+}
+
+body.theme-catppuccin-frappe a,
+body.theme-catppuccin-frappe .preview-content a {
+  color: var(--link);
+}
+
+body.theme-catppuccin-frappe #preview code,
+body.theme-catppuccin-frappe .preview-content code,
+body.theme-catppuccin-frappe #preview pre,
+body.theme-catppuccin-frappe .preview-content pre {
+  background: var(--code-bg);
+}

src/styles/themes/catppuccin-latte.css

@@ -0,0 +1,37 @@
+/* Theme: Catppuccin Latte — id=catppuccin-latte — category=light */
+
+body.theme-catppuccin-latte {
+  --bg: #eff1f5;
+  --fg: #4c4f69;
+  --accent: #1e66f5;
+  --link: #fe640b;
+  --code-bg: #e6e9ef;
+  --border: #bcc0cc;
+  --muted: #9ca0b0;
+}
+
+body.theme-catppuccin-latte .app-header,
+body.theme-catppuccin-latte .toolbar,
+body.theme-catppuccin-latte #editor,
+body.theme-catppuccin-latte #preview,
+body.theme-catppuccin-latte .preview-content,
+body.theme-catppuccin-latte .status-bar,
+body.theme-catppuccin-latte .tab-bar,
+body.theme-catppuccin-latte .tab,
+body.theme-catppuccin-latte .modal-content {
+  background: var(--bg);
+  color: var(--fg);
+  border-color: var(--border);
+}
+
+body.theme-catppuccin-latte a,
+body.theme-catppuccin-latte .preview-content a {
+  color: var(--link);
+}
+
+body.theme-catppuccin-latte #preview code,
+body.theme-catppuccin-latte .preview-content code,
+body.theme-catppuccin-latte #preview pre,
+body.theme-catppuccin-latte .preview-content pre {
+  background: var(--code-bg);
+}

src/styles/themes/catppuccin-macchiato.css

@@ -0,0 +1,37 @@
+/* Theme: Catppuccin Macchiato — id=catppuccin-macchiato — category=dark */
+
+body.theme-catppuccin-macchiato {
+  --bg: #24273a;
+  --fg: #cad3f5;
+  --accent: #8aadf4;
+  --link: #f5bde6;
+  --code-bg: #363a4f;
+  --border: #5b6078;
+  --muted: #8087a2;
+}
+
+body.theme-catppuccin-macchiato .app-header,
+body.theme-catppuccin-macchiato .toolbar,
+body.theme-catppuccin-macchiato #editor,
+body.theme-catppuccin-macchiato #preview,
+body.theme-catppuccin-macchiato .preview-content,
+body.theme-catppuccin-macchiato .status-bar,
+body.theme-catppuccin-macchiato .tab-bar,
+body.theme-catppuccin-macchiato .tab,
+body.theme-catppuccin-macchiato .modal-content {
+  background: var(--bg);
+  color: var(--fg);
+  border-color: var(--border);
+}
+
+body.theme-catppuccin-macchiato a,
+body.theme-catppuccin-macchiato .preview-content a {
+  color: var(--link);
+}
+
+body.theme-catppuccin-macchiato #preview code,
+body.theme-catppuccin-macchiato .preview-content code,
+body.theme-catppuccin-macchiato #preview pre,
+body.theme-catppuccin-macchiato .preview-content pre {
+  background: var(--code-bg);
+}

src/styles/themes/catppuccin-mocha.css

@@ -0,0 +1,37 @@
+/* Theme: Catppuccin Mocha — id=catppuccin-mocha — category=dark */
+
+body.theme-catppuccin-mocha {
+  --bg: #1e1e2e;
+  --fg: #cdd6f4;
+  --accent: #89b4fa;
+  --link: #f5c2e7;
+  --code-bg: #313244;
+  --border: #585b70;
+  --muted: #7f849c;
+}
+
+body.theme-catppuccin-mocha .app-header,
+body.theme-catppuccin-mocha .toolbar,
+body.theme-catppuccin-mocha #editor,
+body.theme-catppuccin-mocha #preview,
+body.theme-catppuccin-mocha .preview-content,
+body.theme-catppuccin-mocha .status-bar,
+body.theme-catppuccin-mocha .tab-bar,
+body.theme-catppuccin-mocha .tab,
+body.theme-catppuccin-mocha .modal-content {
+  background: var(--bg);
+  color: var(--fg);
+  border-color: var(--border);
+}
+
+body.theme-catppuccin-mocha a,
+body.theme-catppuccin-mocha .preview-content a {
+  color: var(--link);
+}
+
+body.theme-catppuccin-mocha #preview code,
+body.theme-catppuccin-mocha .preview-content code,
+body.theme-catppuccin-mocha #preview pre,
+body.theme-catppuccin-mocha .preview-content pre {
+  background: var(--code-bg);
+}

src/styles/themes/one-light.css

@@ -0,0 +1,37 @@
+/* Theme: One Light — id=one-light — category=light */
+
+body.theme-one-light {
+  --bg: #fafafa;
+  --fg: #383a42;
+  --accent: #4078f2;
+  --link: #e45649;
+  --code-bg: #f0f0f0;
+  --border: #d3d3d3;
+  --muted: #a0a1a7;
+}
+
+body.theme-one-light .app-header,
+body.theme-one-light .toolbar,
+body.theme-one-light #editor,
+body.theme-one-light #preview,
+body.theme-one-light .preview-content,
+body.theme-one-light .status-bar,
+body.theme-one-light .tab-bar,
+body.theme-one-light .tab,
+body.theme-one-light .modal-content {
+  background: var(--bg);
+  color: var(--fg);
+  border-color: var(--border);
+}
+
+body.theme-one-light a,
+body.theme-one-light .preview-content a {
+  color: var(--link);
+}
+
+body.theme-one-light #preview code,
+body.theme-one-light .preview-content code,
+body.theme-one-light #preview pre,
+body.theme-one-light .preview-content pre {
+  background: var(--code-bg);
+}

src/styles/themes/outrun.css

@@ -0,0 +1,40 @@
+/* Theme: Outrun — id=outrun — category=dark */
+/* Note: brief palette omits --border. Chosen --border: #1a0626 as a deeper purple
+   that sits between the very dark --bg #0d0221 and the mid --muted #3a1453,
+   giving structural separation without colliding with the magenta accent. */
+
+body.theme-outrun {
+  --bg: #0d0221;
+  --fg: #f0eff0;
+  --accent: #ff0080;
+  --link: #00f9ff;
+  --code-bg: #240b36;
+  --border: #1a0626;
+  --muted: #3a1453;
+}
+
+body.theme-outrun .app-header,
+body.theme-outrun .toolbar,
+body.theme-outrun #editor,
+body.theme-outrun #preview,
+body.theme-outrun .preview-content,
+body.theme-outrun .status-bar,
+body.theme-outrun .tab-bar,
+body.theme-outrun .tab,
+body.theme-outrun .modal-content {
+  background: var(--bg);
+  color: var(--fg);
+  border-color: var(--border);
+}
+
+body.theme-outrun a,
+body.theme-outrun .preview-content a {
+  color: var(--link);
+}
+
+body.theme-outrun #preview code,
+body.theme-outrun .preview-content code,
+body.theme-outrun #preview pre,
+body.theme-outrun .preview-content pre {
+  background: var(--code-bg);
+}

src/styles/themes/solarized-dark-hc.css

@@ -0,0 +1,37 @@
+/* Theme: Solarized Dark (High Contrast) — id=solarized-dark-hc — category=high-contrast */
+
+body.theme-solarized-dark-hc {
+  --bg: #001f29;
+  --fg: #fdf6e3;
+  --accent: #b58900;
+  --link: #268bd2;
+  --code-bg: #002b36;
+  --border: #586e75;
+  --muted: #93a1a1;
+}
+
+body.theme-solarized-dark-hc .app-header,
+body.theme-solarized-dark-hc .toolbar,
+body.theme-solarized-dark-hc #editor,
+body.theme-solarized-dark-hc #preview,
+body.theme-solarized-dark-hc .preview-content,
+body.theme-solarized-dark-hc .status-bar,
+body.theme-solarized-dark-hc .tab-bar,
+body.theme-solarized-dark-hc .tab,
+body.theme-solarized-dark-hc .modal-content {
+  background: var(--bg);
+  color: var(--fg);
+  border-color: var(--border);
+}
+
+body.theme-solarized-dark-hc a,
+body.theme-solarized-dark-hc .preview-content a {
+  color: var(--link);
+}
+
+body.theme-solarized-dark-hc #preview code,
+body.theme-solarized-dark-hc .preview-content code,
+body.theme-solarized-dark-hc #preview pre,
+body.theme-solarized-dark-hc .preview-content pre {
+  background: var(--code-bg);
+}

src/styles/themes/spring-light.css

@@ -0,0 +1,37 @@
+/* Theme: Spring Light — id=spring-light — category=seasonal */
+
+body.theme-spring-light {
+  --bg: #fdf6e3;
+  --fg: #586e75;
+  --accent: #859900;
+  --link: #2aa198;
+  --code-bg: #eee8d5;
+  --border: #d8d1bd;
+  --muted: #93a1a1;
+}
+
+body.theme-spring-light .app-header,
+body.theme-spring-light .toolbar,
+body.theme-spring-light #editor,
+body.theme-spring-light #preview,
+body.theme-spring-light .preview-content,
+body.theme-spring-light .status-bar,
+body.theme-spring-light .tab-bar,
+body.theme-spring-light .tab,
+body.theme-spring-light .modal-content {
+  background: var(--bg);
+  color: var(--fg);
+  border-color: var(--border);
+}
+
+body.theme-spring-light a,
+body.theme-spring-light .preview-content a {
+  color: var(--link);
+}
+
+body.theme-spring-light #preview code,
+body.theme-spring-light .preview-content code,
+body.theme-spring-light #preview pre,
+body.theme-spring-light .preview-content pre {
+  background: var(--code-bg);
+}

src/styles/themes/synthwave-84.css

@@ -0,0 +1,37 @@
+/* Theme: Synthwave '84 — id=synthwave-84 — category=dark */
+
+body.theme-synthwave-84 {
+  --bg: #262335;
+  --fg: #ffffff;
+  --accent: #ff7edb;
+  --link: #36f9f6;
+  --code-bg: #2b213a;
+  --border: #495495;
+  --muted: #848bbd;
+}
+
+body.theme-synthwave-84 .app-header,
+body.theme-synthwave-84 .toolbar,
+body.theme-synthwave-84 #editor,
+body.theme-synthwave-84 #preview,
+body.theme-synthwave-84 .preview-content,
+body.theme-synthwave-84 .status-bar,
+body.theme-synthwave-84 .tab-bar,
+body.theme-synthwave-84 .tab,
+body.theme-synthwave-84 .modal-content {
+  background: var(--bg);
+  color: var(--fg);
+  border-color: var(--border);
+}
+
+body.theme-synthwave-84 a,
+body.theme-synthwave-84 .preview-content a {
+  color: var(--link);
+}
+
+body.theme-synthwave-84 #preview code,
+body.theme-synthwave-84 .preview-content code,
+body.theme-synthwave-84 #preview pre,
+body.theme-synthwave-84 .preview-content pre {
+  background: var(--code-bg);
+}

src/styles/themes/tokyo-night-storm.css

@@ -0,0 +1,37 @@
+/* Theme: Tokyo Night Storm — id=tokyo-night-storm — category=dark */
+
+body.theme-tokyo-night-storm {
+  --bg: #24283b;
+  --fg: #c0caf5;
+  --accent: #7aa2f7;
+  --link: #bb9af7;
+  --code-bg: #1f2335;
+  --border: #3b4261;
+  --muted: #565f89;
+}
+
+body.theme-tokyo-night-storm .app-header,
+body.theme-tokyo-night-storm .toolbar,
+body.theme-tokyo-night-storm #editor,
+body.theme-tokyo-night-storm #preview,
+body.theme-tokyo-night-storm .preview-content,
+body.theme-tokyo-night-storm .status-bar,
+body.theme-tokyo-night-storm .tab-bar,
+body.theme-tokyo-night-storm .tab,
+body.theme-tokyo-night-storm .modal-content {
+  background: var(--bg);
+  color: var(--fg);
+  border-color: var(--border);
+}
+
+body.theme-tokyo-night-storm a,
+body.theme-tokyo-night-storm .preview-content a {
+  color: var(--link);
+}
+
+body.theme-tokyo-night-storm #preview code,
+body.theme-tokyo-night-storm .preview-content code,
+body.theme-tokyo-night-storm #preview pre,
+body.theme-tokyo-night-storm .preview-content pre {
+  background: var(--code-bg);
+}

src/styles/themes/winter-is-coming-dark.css

@@ -0,0 +1,37 @@
+/* Theme: Winter is Coming (Dark) — id=winter-is-coming-dark — category=dark */
+
+body.theme-winter-is-coming-dark {
+  --bg: #011627;
+  --fg: #d6deeb;
+  --accent: #7fdbca;
+  --link: #ff5874;
+  --code-bg: #0b2942;
+  --border: #1d3b53;
+  --muted: #5f7e97;
+}
+
+body.theme-winter-is-coming-dark .app-header,
+body.theme-winter-is-coming-dark .toolbar,
+body.theme-winter-is-coming-dark #editor,
+body.theme-winter-is-coming-dark #preview,
+body.theme-winter-is-coming-dark .preview-content,
+body.theme-winter-is-coming-dark .status-bar,
+body.theme-winter-is-coming-dark .tab-bar,
+body.theme-winter-is-coming-dark .tab,
+body.theme-winter-is-coming-dark .modal-content {
+  background: var(--bg);
+  color: var(--fg);
+  border-color: var(--border);
+}
+
+body.theme-winter-is-coming-dark a,
+body.theme-winter-is-coming-dark .preview-content a {
+  color: var(--link);
+}
+
+body.theme-winter-is-coming-dark #preview code,
+body.theme-winter-is-coming-dark .preview-content code,
+body.theme-winter-is-coming-dark #preview pre,
+body.theme-winter-is-coming-dark .preview-content pre {
+  background: var(--code-bg);
+}

src/styles/themes/winter-is-coming-light.css

@@ -0,0 +1,37 @@
+/* Theme: Winter is Coming (Light) — id=winter-is-coming-light — category=light */
+
+body.theme-winter-is-coming-light {
+  --bg: #f4f4f4;
+  --fg: #20313a;
+  --accent: #5d879b;
+  --link: #a47298;
+  --code-bg: #e9ecef;
+  --border: #cfd8dc;
+  --muted: #7b8a92;
+}
+
+body.theme-winter-is-coming-light .app-header,
+body.theme-winter-is-coming-light .toolbar,
+body.theme-winter-is-coming-light #editor,
+body.theme-winter-is-coming-light #preview,
+body.theme-winter-is-coming-light .preview-content,
+body.theme-winter-is-coming-light .status-bar,
+body.theme-winter-is-coming-light .tab-bar,
+body.theme-winter-is-coming-light .tab,
+body.theme-winter-is-coming-light .modal-content {
+  background: var(--bg);
+  color: var(--fg);
+  border-color: var(--border);
+}
+
+body.theme-winter-is-coming-light a,
+body.theme-winter-is-coming-light .preview-content a {
+  color: var(--link);
+}
+
+body.theme-winter-is-coming-light #preview code,
+body.theme-winter-is-coming-light .preview-content code,
+body.theme-winter-is-coming-light #preview pre,
+body.theme-winter-is-coming-light .preview-content pre {
+  background: var(--code-bg);
+}