mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-10-01 09:19:34 +05:30
feat(themes): add 12 new themes (Catppuccin, One Light, Tokyo Night Storm, Synthwave, Outrun, Winter, Solarized HC, Spring)
Amit Haridas
This commit is contained in:
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user