feat(palette): add Obsidian and Typora as consumers

Both expose a first-class, update-safe theming hook, which is what separates
them from the Electron apps that cannot be consumers: Signal, Discord and
Spotify ship closed bundles whose only theming route is patching a signed
asar that every update reverts.

Obsidian gets a CSS snippet rather than a theme, so it layers over whatever
theme a vault already uses instead of replacing the user's choice. Enabling it
means appending to enabledCssSnippets in each vault's appearance.json, which
bin/udt-appthemes does by reading the list and adding to it: rewriting the file
would have switched off the layout snippet one vault was already using.

Typora's theme is derived from the Dracula theme installed here, whose 350
rules all resolve through :root variables, so only that block is templated and
none of the layout is touched.

Verified across six vaults, nested ones included: the vault with an existing
snippet kept it, a vault with no appearance.json got a valid one, and three
consecutive installs leave exactly one udt entry.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015gbjA2bmswN8jyPDKzrvqe

6 files changed, 2060 insertions, 0 deletions

diff --git a/.gitignore b/.gitignore
index 6a1e992..d1bff7b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,3 +12,5 @@ __pycache__/
 /bin/udt_colors.py
 /templates/kvantum/theme.kvconfig
 /templates/kvantum/theme.svg
+/templates/obsidian/udt.css
+/templates/typora/udt.css
diff --git a/AGENTS.md b/AGENTS.md
index 412fe41..d205bcd 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -54,6 +54,18 @@ desktop was already running by hand.
 **Qt apps only read a theme at startup**, so a running one keeps the old
 colours until restarted. `install.sh` cannot signal them and does not try.
 
+Obsidian and Typora are installed by `bin/udt-appthemes`, not by a copy.
+Obsidian gets a **snippet**, not a theme, so it layers over whatever theme a
+vault uses; enabling it means appending to `enabledCssSnippets` in that vault's
+`appearance.json`, never rewriting the list, or the vault loses the snippets it
+already had. Every vault under `~/Documents/Obsidian` is found by looking for
+`.obsidian` directories, nested ones included. Typora's theme is derived from
+its Dracula theme, whose 350 rules all route through `:root` variables, so only
+that block is templated.
+
+Signal, Discord and Spotify cannot be consumers: they ship closed bundles with
+no user-CSS hook, and patching a signed app bundle breaks on every update.
+
 The homepage stylesheet is the one output that leaves this machine.
 `install.sh` scp's it to `homepage:hp-stage/`, with a five second timeout and a
 warning rather than a failure when the host is down, so installing the local
diff --git a/bin/udt-appthemes b/bin/udt-appthemes
new file mode 100755
index 0000000..eedc144
--- /dev/null
+++ b/bin/udt-appthemes
@@ -0,0 +1,88 @@
+#!/usr/bin/env python3
+# udt-appthemes: install the generated app themes that need more than a copy.
+# Copyright (C) 2026 Danilo M. <danix@danix.xyz>
+# Licensed under the GNU General Public License v2 only.
+"""Install the Obsidian snippet into every vault, and the Typora theme.
+
+Separate from install.sh because enabling an Obsidian snippet means editing
+JSON that the user also owns: appearance.json lists every enabled snippet, so
+the entry has to be appended rather than the file rewritten, or a vault loses
+whatever layout snippets it had.
+"""
+
+import json
+import shutil
+import sys
+from pathlib import Path
+
+REPO = Path(__file__).resolve().parent.parent
+SNIPPET = "udt"
+VAULT_ROOT = Path.home() / "Documents" / "Obsidian"
+TYPORA_THEMES = Path.home() / ".config" / "Typora" / "themes"
+
+
+def vaults():
+    """Every Obsidian vault under the vault root.
+
+    A vault is any directory holding a .obsidian config dir. Nested vaults are
+    real: a vault inside another vault's folder is still its own vault.
+    """
+    if not VAULT_ROOT.is_dir():
+        return []
+    return sorted(p for p in VAULT_ROOT.rglob(".obsidian") if p.is_dir())
+
+
+def install_obsidian(source):
+    """Copy the snippet into each vault and enable it, preserving the rest."""
+    done = []
+    for config in vaults():
+        snippets = config / "snippets"
+        snippets.mkdir(exist_ok=True)
+        shutil.copyfile(source, snippets / f"{SNIPPET}.css")
+
+        appearance = config / "appearance.json"
+        try:
+            data = json.loads(appearance.read_text())
+        except (OSError, json.JSONDecodeError):
+            data = {}
+
+        enabled = data.get("enabledCssSnippets", [])
+        if SNIPPET not in enabled:
+            # Append: a vault may already have snippets on, and replacing the
+            # list would silently switch them off.
+            enabled.append(SNIPPET)
+            data["enabledCssSnippets"] = enabled
+            appearance.write_text(json.dumps(data, indent=2) + "\n")
+
+        done.append(config.parent.name or str(config.parent))
+    return done
+
+
+def install_typora(source):
+    """Drop the theme in. Typora picks it from Themes once the file exists."""
+    if not TYPORA_THEMES.is_dir():
+        return False
+    shutil.copyfile(source, TYPORA_THEMES / "udt.css")
+    return True
+
+
+def main():
+    obsidian = REPO / "templates" / "obsidian" / "udt.css"
+    typora = REPO / "templates" / "typora" / "udt.css"
+
+    if not obsidian.exists() or not typora.exists():
+        print("udt-appthemes: run udt-palette first", file=sys.stderr)
+        return 1
+
+    names = install_obsidian(obsidian)
+    if names:
+        print(f"obsidian: {len(names)} vaults ({', '.join(names)})")
+
+    if install_typora(typora):
+        print("typora: udt.css installed (select it in Themes)")
+
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/bin/udt-palette b/bin/udt-palette
index edde7f3..f2807af 100755
--- a/bin/udt-palette
+++ b/bin/udt-palette
@@ -223,6 +223,89 @@ def gen_kitty(res, scheme, palette):
     return "\n".join(lines) + "\n"
 
 
+def gen_obsidian(res, scheme, palette):
+    """Obsidian: a CSS snippet overriding the theme variables.
+
+    A snippet rather than a theme, because a theme replaces the user's choice
+    outright while a snippet layers over whatever they have enabled. Obsidian
+    loads snippets after the theme, so these win without the theme having to go.
+
+    The variables are Obsidian's documented public API for this. Only colour is
+    set: spacing and typography belong to whatever theme the vault uses.
+    """
+    def c(role):
+        return hex6(res[role])
+
+    return f"""/* {BANNER.format(scheme=scheme)}
+ *
+ * Enabled per vault in Appearance > CSS snippets. install.sh writes this into
+ * every vault it finds and enables it without disturbing the snippets already
+ * on, so a vault keeps its layout snippets and gains these colours.
+ */
+
+.theme-dark {{
+  --background-primary:         {c('bg')};
+  --background-primary-alt:     {c('bg_alt')};
+  --background-secondary:       {c('bg_alt')};
+  --background-secondary-alt:   {c('bg_deep')};
+  --background-modifier-border: {c('border')};
+  --background-modifier-hover:  {c('surface')};
+  --background-modifier-error:  {c('critical')};
+  --background-modifier-success:{c('success')};
+
+  --text-normal:      {c('fg')};
+  --text-muted:       {c('fg_dim')};
+  --text-faint:       {c('fg_faint')};
+  --text-error:       {c('critical')};
+  --text-success:     {c('success')};
+  --text-accent:      {c('accent')};
+  --text-accent-hover:{c('accent_bright')};
+  --text-on-accent:   {c('bg')};
+  --text-selection:   {hex8((*res['accent'][:3], 30))};
+  --text-highlight-bg:{hex8((*res['warning'][:3], 40))};
+
+  --interactive-normal:   {c('surface')};
+  --interactive-hover:    {c('surface_alt')};
+  --interactive-accent:   {c('accent')};
+  --interactive-accent-hover: {c('accent_bright')};
+
+  --h1-color: {c('accent')};
+  --h2-color: {c('accent')};
+  --h3-color: {c('info')};
+  --h4-color: {c('info')};
+  --h5-color: {c('fg_dim')};
+  --h6-color: {c('fg_dim')};
+
+  --code-normal:     {c('warning')};
+  --code-background: {c('bg_alt')};
+  --blockquote-border-color: {c('accent')};
+  --hr-color:        {c('border')};
+  --checkbox-color:  {c('accent')};
+  --tag-color:       {c('info')};
+  --tag-background:  {hex8((*res['info'][:3], 20))};
+}}
+"""
+
+
+def gen_typora(res, scheme, palette, template):
+    """Typora: substitute the palette into the theme's :root block.
+
+    Typora themes are one self-contained stylesheet, but this one routes all
+    350 of its rules through variables in :root, so only that block is a
+    template. Derived from the dracula theme already installed here.
+    """
+    out = template
+    for role in TYPORA_ROLES:
+        out = out.replace(f"@{role.upper()}@", hex6(res[role]))
+    return out
+
+
+# Exactly the placeholders templates/typora/udt.css.in carries.
+TYPORA_ROLES = ["bg", "bg_deep", "surface_alt", "fg", "fg_dim", "fg_faint",
+                "accent", "accent_bright", "critical", "warning", "success",
+                "info", "highlight"]
+
+
 KVANTUM_ROLES = ["bg", "bg_alt", "surface", "surface_alt", "surface_high",
                  "fg", "fg_dim", "fg_faint", "mid_high", "accent",
                  "accent_dim", "accent_bright", "highlight", "critical"]
@@ -436,6 +519,8 @@ TARGETS = [
     ("templates/conky.conf", gen_conky, "templates/conky.conf.in"),
     ("bin/udt_colors.py", gen_accent_py, None),
     ("templates/homepage/custom.css", gen_homepage, None),
+    ("templates/obsidian/udt.css", gen_obsidian, None),
+    ("templates/typora/udt.css", gen_typora, "templates/typora/udt.css.in"),
     ("templates/kvantum/theme.kvconfig", gen_kvantum, "templates/kvantum/theme.kvconfig.in"),
     ("templates/kvantum/theme.svg", gen_kvantum, "templates/kvantum/theme.svg.in"),
 ]
diff --git a/install.sh b/install.sh
index e7e2177..292f00a 100755
--- a/install.sh
+++ b/install.sh
@@ -70,6 +70,11 @@ install -Dm644 "$repo/templates/kvantum/theme.kvconfig" "$kv/udt.kvconfig"
 install -Dm644 "$repo/templates/kvantum/theme.svg"      "$kv/udt.svg"
 printf '[General]\ntheme=udt\n' > "$HOME/.config/Kvantum/kvantum.kvconfig"
 
+# Obsidian and Typora need more than a copy: the Obsidian snippet has to be
+# enabled in each vault's appearance.json without disturbing the snippets
+# already listed there. Skipped silently when neither app is installed.
+"$repo/bin/udt-appthemes" || true
+
 # Stage the homepage stylesheet on the dashboard host. Staged, not installed:
 # /opt/homepage/config is root-owned and this script does not hold root there.
 # Never fatal, and never slow: a laptop away from that network must still be
diff --git a/templates/typora/udt.css.in b/templates/typora/udt.css.in
new file mode 100644
index 0000000..0744d77
--- /dev/null
+++ b/templates/typora/udt.css.in
@@ -0,0 +1,1868 @@
+/* Generated from templates/typora/udt.css.in by udt-palette.
+ * Derived from the Dracula theme for Typora; the :root scheme colours
+ * are placeholders and the 350 rules below them are untouched. */
+:root {
+  /*dracula official spec colors */
+  --dracula-background: @BG@;
+  --dracula-current-line: @SURFACE_ALT@;
+  --dracula-foreground: @FG@;
+  --dracula-comment: @FG_FAINT@;
+  --dracula-cyan: @INFO@;
+  --dracula-green: @SUCCESS@;
+  --dracula-orange: @WARNING@;
+  --dracula-pink: @HIGHLIGHT@;
+  --dracula-purple: @ACCENT@;
+  --dracula-red: @CRITICAL@;
+  --dracula-yellow: @ACCENT_BRIGHT@;
+
+  /* dracula custom colors for typora */
+  --dracula-foreground-fade: @FG_DIM@;
+  --dracula-background-dark: @BG_DEEP@;
+
+  /* dark color for background*/
+  /* default color */
+  --bg-color1: var(--dracula-background);
+  /* for most panel, context, header, etc */
+  --bg-color2: var(--dracula-background-dark);
+  /* for toc and table edit panel */
+  --bg-color3: var(--dracula-background-dark);
+  /* for tips */
+  --bg-color4: var(--dracula-current-line);
+  
+  /* for blockquote, codeblock, input, etc */
+  --bg-color5: var(--dracula-background-dark);
+  /* light color for text and icon*/
+  /* default color */
+  --text-color1: var(--dracula-foreground);
+  /* for text on panel */
+  --text-color2: var(--dracula-foreground);
+  /* for checkbox and radio */
+  --text-color3: var(--dracula-current-line);
+  
+  /* for tips */
+  --text-color4: var(--dracula-foreground);
+  /* for focus mode */
+  --text-color5: var(--dracula-foreground-fade);
+  /* link color */
+  --link-color: var(--dracula-cyan);
+  /* table color */
+  --table-border-color: var(--dracula-foreground);
+  --table-thead-color: var(--dracula-current-line);
+  --table-bg-color: var(--dracula-background);
+  --table-bg-darker-color: var(--dracula-background-dark);
+  /* hover color */
+  /* default hover background color */
+  --hover-bg-color1: var(--dracula-current-line);
+  /* for input item */
+  --hover-bg-color2: var(--dracula-current-line);
+  /* for button on toc and table edit panel */
+  --hover-bg-color3: var(--dracula-current-line);
+  /* default hover text color */
+  --hover-text-color: var(--dracula-pink);
+  /* active color */
+  --active-color: var(--hover-bg-color1);
+  /* input color */
+  --input-color: var(--dracula-current-line);
+  /* menu divider color */
+  --menu-divider-color: var(--dracula-foreground);
+  /* scrollbar color */
+  --scrollbar-thumb-color: var(--menu-divider-color);
+  --scrollbar-track-color: var(--dracula-background);
+  /* theme select color */
+  --theme-select-color: var(--dracula-current-line);
+  --button-color: var(--dracula-comment);
+  --select-color: var(--dracula-background);
+  /* focus color */
+  --focus-color: var(--dracula-cyan);
+  --focus-ring-color: var(--focus-color);
+  /* codeblock color */
+  --code-red-color: var(--dracula-pink);
+  --code-yellow-color: var(--dracula-yellow);
+  --code-cyan-color: var(--dracula-cyan);
+  --code-blue-color: var(--dracula-cyan);
+  --code-purple-color: var(--dracula-purple);
+  --code-orange-color: var(--dracula-yellow);
+  --code-green-color: var(--dracula-green);
+  --code-grey-color: var(--dracula-comment);
+
+  --code-select-bg-color: var(--dracula-comment);
+  --code-cursor-color: var(--dracula-current-line);
+  /* implicit selection text bg color */
+  --select-text-bg-color: var(--dracula-comment);
+  /* implicit button color */
+  --primary-color: var(--button-color);
+  --primary-btn-border-color: transparent;
+  --primary-btn-text-color: var(--text-color2);
+  /* implicit sidebar color */
+  --side-bar-bg-color: var(--bg-color1);
+  --control-text-color: var(--text-color2);
+  /* implicit text color */
+  --text-color: var(--text-color1);
+  /* implicit background color for setting menu */
+  --bg-color: var(--bg-color1);
+  /* implicit hover color */
+  --item-hover-bg-color: var(--hover-bg-color1);
+  --item-hover-text-color: var(--hover-text-color);
+  /* implicit active color */
+  --active-file-bg-color: var(--hover-bg-color);
+  /* implicit mathjax edit panel background color */
+  --rawblock-edit-panel-bd: var(--bg-color5);
+  /* implicit focus mode color */
+  --blur-text-color: var(--text-color5);
+  /* implicit search result select color */
+  --search-select-bg-color: var(--select-text-bg-color);
+  --search-select-bg-color: var(--dracula-comment);
+
+  --control-text-hover-color: var(--dracula-current-line);
+  /* implicit active file color in sidebar file menu tree view */
+  --active-file-text-color: var(--text-color1);
+  --active-file-border-color: var(--dracula-pink);
+
+  --node-border: var(--menu-divider-color);
+  --node-fill: var(--bg-color2);
+
+  --monospace: Menlo, Monaco, 'Courier New', monospace;
+}
+
+/* font */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: normal;
+  src: local("Open Sans Regular"), url("./dracula/400.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: italic;
+  font-weight: normal;
+  src: local("Open Sans Italic"), url("./dracula/400i.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: bold;
+  src: local("Open Sans Bold"), url("./dracula/700.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: italic;
+  font-weight: bold;
+  src: local("Open Sans Bold Italic"), url("./dracula/700i.woff") format("woff");
+}
+
+/* basic style */
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial,
+    sans-serif;
+  color: var(--text-color1);
+  background: var(--bg-color1);
+  line-height: 1.6;
+}
+
+a {
+  color: var(--dracula-cyan);
+}
+
+a:hover {
+  color: var(--dracula-pink);
+}
+
+/* text selection background color */
+.in-text-selection {
+  background-color: var(--dracula-current-line);
+}
+
+/* link */
+#write a:not([role="menuitem"]) {
+  color: var(--link-color) !important;
+}
+
+#write a:not([role="menuitem"]):hover {
+  color: var(--hover-text-color) !important;
+}
+
+/* h1-h6 */
+#write h1,
+#write h2,
+#write h3,
+#write h4,
+#write h5,
+#write h6 {
+  margin-top: 0.5em;
+  margin-bottom: 0em;
+  line-height: 1em;
+  padding-top: 0.3em;
+}
+
+#write h1 {
+  font-size: 2em;
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid var(--text-color3);
+
+}
+
+#write h2 {
+  font-size: 1.5em;
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid var(--text-color3);
+}
+
+#write h3 {
+  font-size: 1.25em;
+}
+
+#write h4 {
+  font-size: 1em;
+}
+
+#write h5 {
+  font-size: .875em;
+}
+
+#write h6 {
+  font-size: .85em;
+}
+
+/* horizontal divider */
+hr {
+  height: 1px;
+  background-color: var(--text-color5);
+  border: 0px;
+}
+
+/* list */
+ul,
+ol {
+  padding-left: 30px;
+}
+
+/* blockquote */
+blockquote {
+  border-left: 4px solid var(--text-color1);
+  padding: 4px 15px;
+  color: var(--text-color1);
+  background-color: var(--bg-color5);
+}
+
+blockquote blockquote {
+  padding-right: 0em;
+}
+
+table thead tr {
+  background-color: var(--table-thead-color);
+}
+
+table tr th {
+  font-weight: bold;
+  border-left: 1px solid var(--table-border-color);
+  border-right: 1px solid var(--table-border-color);
+  text-align: left;
+  margin: 0;
+  padding: 6px 13px;
+}
+
+table tbody tr {
+  border-top: 1px solid var(--table-border-color);
+  margin: 0;
+  padding: 0;
+}
+
+table tbody tr:nth-child(2n) {
+  background-color: var(--table-bg-darker-color);
+}
+
+table tbody tr:nth-child(2n + 1) {
+  background-color: var(--table-bg-color);
+}
+
+table tr td {
+  border-left: 1px solid var(--table-border-color);
+  border-right: 1px solid var(--table-border-color);
+  text-align: left;
+  margin: 0;
+  padding: 6px 13px;
+}
+
+table tr th:first-child,
+table tr td:first-child {
+  border-left-width: 0px;
+}
+
+table tr th:last-child,
+table tr td:last-child {
+  border-right-width: 0px;
+}
+
+/* table edit panel */
+.ty-table-edit {
+  background-color: var(--bg-color3);
+  border: 0px;
+  border-radius: 6px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-left: 6px;
+  padding-right: 6px;
+  margin-top: -29px !important;
+}
+
+/* button on table edit panel */
+.ty-table-edit button {
+  background-color: transparent;
+  color: var(--text-color2);
+  border: 0px;
+  margin-left: 0px !important;
+}
+
+/* button hover on table edit panel */
+.ty-table-edit button:hover {
+  background-color: var(--hover-bg-color3);
+  color: var(--hover-text-color);
+}
+
+/* adjusting table panel */
+.popover {
+  background-color: var(--bg-color2);
+}
+
+/* arrow of adjusting table panel */
+.popover.bottom>.arrow:after {
+  border-bottom-color: var(--bg-color2);
+}
+
+/* divider in adjust table panel */
+.md-grid-board-wrap .popover-title {
+  border-top-color: var(--menu-divider-color);
+}
+
+/* grid size */
+.md-grid-board a {
+  width: 15px;
+  height: 15px;
+}
+
+/* existing thread grid */
+.md-grid-board tr[row="1"] .md-grid-ext {
+  background-color: var(--dracula-current-line);
+}
+
+/* not existing thread grid */
+.md-grid-board tr[row="1"] {
+  background-color: var(--dracula-current-line);
+}
+
+/* existing grid */
+.md-grid-board .md-grid-ext {
+  background-color: var(--dracula-current-line);
+}
+
+/* selected thread grid */
+.md-grid-board tr[row="1"] a.md-active,
+.md-grid-board tr[row="1"] a:hover {
+  background-color: var(--dracula-current-line);
+}
+
+/* selected grid */
+.md-grid-board a.md-active,
+.md-grid-board a:hover {
+  border-color: var(--menu-divider-color);
+  background-color: var(--dracula-current-line);
+}
+
+/* task */
+.md-task-list-item>input {
+  margin-left: -1.3em;
+}
+
+/* footnote */
+sup.md-footnote {
+  color: var(--text-color1);
+  background-color: var(--bg-color2);
+}
+
+/* mathjax */
+.md-inline-math script {
+  color: var(--text-color1);
+}
+
+.on-focus-mode #write svg {
+  opacity: 1;
+}
+
+.md-rawblock>.md-rawblock-container {
+  transition: 0.5s;
+}
+
+.md-rawblock>.md-rawblock-tooltip {
+  transition: 0.5s;
+  display: block;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.md-rawblock:hover>.md-rawblock-tooltip {
+  transition: 0.5s;
+  visibility: visible;
+  opacity: 1;
+  animation: none;
+}
+
+/* meta information of image */
+.md-image>.md-meta {
+  border: 0px;
+  padding: 2px 0px 0px 4px;
+  font-size: 0.9em;
+  color: var(--text-color1);
+}
+
+/* input */
+input {
+  background-color: var(--input-color) !important;
+  border: 0px !important;
+}
+
+/* checkbox */
+input[type="checkbox"]:before {
+  content: "";
+  display: inline-block;
+  width: 1.2rem;
+  height: 1.2rem;
+  vertical-align: middle;
+  text-align: center;
+  border: 0px;
+  border-radius: 3px;
+  background-color: var(--input-color);
+  margin-top: -0.5rem;
+  margin-left: -0.2rem;
+}
+
+/* checkbox hover */
+input[type="checkbox"]:not([disabled]):not(:checked):hover:before {
+  content: "\2713";
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+  color: var(--text-color3);
+}
+
+/* checkbox checked*/
+input[type="checkbox"]:checked:before {
+  content: "\2713";
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+  color: var(--text-color2);
+}
+
+/* checkbox checked hover*/
+input[type="checkbox"]:checked:hover:before {
+  content: "\2713";
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+  color: var(--hover-text-color);
+}
+
+/* radio */
+input[type="radio"]:before {
+  content: "";
+  display: inline-block;
+  width: 1.2rem;
+  height: 1.2rem;
+  vertical-align: middle;
+  text-align: center;
+  border: 0px;
+  border-radius: 0.55rem;
+  background-color: var(--input-color);
+  margin-top: -0.4rem;
+  margin-left: -0.1rem;
+}
+
+/* radio hover */
+input[type="radio"]:not([disabled]):not(:checked):hover:before {
+  content: "\25CF";
+  font-size: 1rem;
+  line-height: 1rem;
+  color: var(--text-color3);
+}
+
+/* radio checked */
+input[type="radio"]:checked:before {
+  content: "\25CF";
+  font-size: 1rem;
+  line-height: 1rem;
+  color: var(--text-color2);
+}
+
+/* radio checked hover*/
+input[type="radio"]:checked:before {
+  content: "\25CF";
+  font-size: 1rem;
+  line-height: 1rem;
+  color: var(--hover-text-color);
+}
+
+/* default focus style */
+:focus {
+  outline-color: var(--focus-color);
+}
+
+/* exit source view button */
+.typora-sourceview-on #toggle-sourceview-btn {
+  background-color: var(--bg-color2);
+}
+
+.typora-sourceview-on #toggle-sourceview-btn:hover {
+  background-color: var(--hover-bg-color1);
+}
+
+/* toc */
+.md-toc {
+  background-color: var(--bg-color3);
+  border-radius: 6px;
+  padding: 0px 0px 0px 0px;
+  margin: 0px 0px 0px 0px;
+  border: 0px;
+}
+
+/* toc content */
+.md-toc-content {
+  padding-top: 5px;
+  padding-bottom: 8px;
+  margin-top: 15px;
+  margin-bottom: 0px;
+}
+
+/* remove outline when toc is selected */
+.md-toc:focus .md-toc-content {
+  border: 0px;
+  margin: 0px;
+}
+
+/* toc item */
+.md-toc-item {
+  margin: 2px;
+}
+
+/* toc edit panel */
+#write div.md-toc-tooltip {
+  border: 0px;
+  padding-left: 10px;
+  padding-right: 10px;
+  background-color: var(--bg-color3);
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  opacity: 0;
+  visibility: hidden;
+  display: block !important;
+  transition: 0.3s;
+}
+
+#write .md-toc:focus div.md-toc-tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+#write .md-toc:focus {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
+/* toc delete button */
+.md-delete-toc {
+  background-color: transparent;
+}
+
+/* html block */
+.md-htmlblock:hover .md-htmlblock-container {
+  border-radius: 6px;
+  border-top-right-radius: 0px;
+}
+
+/* search panel */
+#md-searchpanel {
+  background-color: var(--bg-color2);
+  color: var(--text-color2);
+}
+
+/* ignore case button and find whole word button */
+.searchpanel-search-option-btn {
+  border: 0px;
+}
+
+/* button on search panel */
+#md-searchpanel .btn:hover {
+  color: var(--hover-text-color);
+  background-color: var(--hover-bg-color1) !important;
+}
+
+/* search option button hover */
+.searchpanel-search-option-btn:not(.active):hover {
+  color: var(--hover-text-color);
+  background-color: var(--hover-bg-color1);
+}
+
+/* close button in search panel */
+#md-searchpanel .input-group-addon.close-btn {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+/* replaceall button */
+.ty-replace-panel-row #search-panel-replaceall-btn {
+  padding-left: 8px;
+  padding-right: 6px !important;
+}
+
+/* replace button */
+.ty-replace-panel-row #search-panel-replace-btn {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+/* sidebar */
+.sidebar-menu {
+  color: var(--text-color2);
+}
+
+/* divider between file item and search */
+.ty-sidebar-search-panel {
+  border-color: var(--menu-divider-color);
+}
+
+/* file item in sidebar */
+#file-library .file-list-item {
+  border-bottom: 0px;
+  opacity: 1;
+  border-left: 4px solid;
+  border-color: var(--bg-color2);
+}
+
+/* file item hover */
+#file-library .file-list-item:hover {
+  background-color: var(--hover-bg-color1);
+  color: var(--text-color1);
+  border-color: var(--hover-bg-color1);
+}
+
+/* file item active */
+#file-library .file-list-item.active {
+  background-color: var(--hover-bg-color1);
+  color: var(--text-color1);
+  border-color: var(--dracula-pink);
+}
+
+/* suffix of file item*/
+.file-list-item-file-ext-part {
+  opacity: 0.8;
+}
+
+/* sidebar file menu */
+#sidebar-files-menu {
+  border: 0px;
+}
+
+/* sidebar file menu item */
+.dropdown-menu>li>a {
+  color: var(--text-color2);
+}
+
+.dropdown-menu>li>a:hover {
+  color: var(--hover-text-color);
+}
+
+/* sidebar file menu close button */
+#close-sidebar-menu-btn:hover {
+  color: var(--hover-text-color);
+}
+
+/* sidebar file menu divider */
+#sidebar-files-menu>.show+.menuitem-group-label.show {
+  border-color: var(--menu-divider-color);
+}
+
+/* sidebar osx tab */
+.html-for-mac .sidebar-osx-tab>.sidebar-tabs {
+  border: 0px;
+}
+
+/* sidebar footer */
+.sidebar-footer {
+  border: 0px;
+}
+
+/* remove outline when file item in treeview is selected*/
+.file-library-node:not(.file-node-root):focus>.file-node-content {
+  outline: none;
+}
+
+/* sort button on sidebar file menu */
+.ty-side-sort-btn.active,
+.ty-side-sort-btn:hover {
+  color: var(--hover-text-color);
+}
+
+/* sidebar in setting */
+.sidebar {
+  background-color: var(--bg-color2) !important;
+}
+
+.list-group-content {
+  margin-left: 10px !important;
+}
+
+/* sidebar button in setting menu */
+.nav-group-item {
+  color: var(--text-color2) !important;
+  border-top-left-radius: 6px !important;
+  border-bottom-left-radius: 6px !important;
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
+
+/* sidebar button hover in setting menu */
+.nav-group-item:hover,
+.nav-group-item:active,
+.nav-group-item.active {
+  background-color: var(--hover-bg-color1) !important;
+  color: var(--hover-text-color) !important;
+}
+
+/* remove up and down button from number type input*/
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+}
+
+/* the indent example in setting.editor */
+div[data-index="2"] .label-input-group td:last-child div {
+  border: 0px !important;
+  border-radius: 6px;
+  background-color: var(--bg-color5);
+  margin: 10px !important;
+}
+
+/* button in setting menu */
+.ty-preferences button.btn-default {
+  border: 0px;
+  background-color: var(--bg-color5);
+  border-radius: 6px;
+}
+
+/* button hover in setting menu */
+.ty-preferences .btn-default:not([disabled]):hover {
+  background-color: var(--hover-bg-color1) !important;
+}
+
+/* return button in setting menu */
+.window-header button:hover {
+  color: var(--text-color2) !important;
+}
+
+/* search input in setting menu */
+.search-input {
+  border-top-left-radius: 6px !important;
+  border-bottom-left-radius: 6px !important;
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+  margin-top: 10px !important;
+  margin-bottom: 10px !important;
+  margin-left: 10px !important;
+}
+
+.search-input:focus {
+  border: none !important;
+}
+
+/* select item (mostly in setting menu) */
+select {
+  border: 0px;
+  border-radius: 6px;
+  background-color: var(--input-color) !important;
+  padding-top: 5px !important;
+  padding-bottom: 5px !important;
+}
+
+/* enabled select item hover */
+select:not([disabled]):hover {
+  color: var(--text-color2);
+  opacity: 1;
+}
+
+/* disabled select item hover */
+select[disabled]:hover {
+  opacity: 0.5;
+}
+
+/* mega menu */
+.megamenu-content,
+.megamenu-opened header {
+  background: var(--bg-color1);
+}
+
+.megamenu-content {
+  display: block;
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.3s;
+}
+
+.megamenu-opened .megamenu-content {
+  visibility: visible;
+  opacity: 1;
+  animation: none;
+}
+
+/* mega menu sidebar*/
+.megamenu-menu {
+  background-color: var(--bg-color2);
+}
+
+/* return button in mega menu */
+#megamenu-menu-sidebar .menu-style-btn {
+  border: 0px;
+}
+
+.megamenu-menu-panel table td:nth-child(1) {
+  color: var(--dracula-foreground);
+}
+
+.megamenu-menu-panel tbody tr:hover td:nth-child(1) {
+  color: var(--dracula-foreground-fade)
+}
+
+/* remove divider in mega menu */
+.megamenu-menu-header {
+  border-color: var(--menu-divider-color);
+}
+
+/* return button color in mega menu */
+.megamenu-menu-header #megamenu-menu-header-title {
+  color: var(--text-color2);
+}
+
+/* return button hover in mega menu */
+.megamenu-menu-header:hover {
+  background-color: var(--hover-bg-color1);
+}
+
+/* return button hover in mega menu */
+.megamenu-menu-header:hover #megamenu-menu-header-title {
+  color: var(--hover-text-color);
+}
+
+/* long button in mega menu */
+.long-btn {
+  border: 0px;
+  background-color: var(--bg-color5);
+  color: var(--text-color1);
+  margin-bottom: 10px;
+  margin-left: 10px;
+}
+
+/* recent file in mega menu */
+#recent-file-panel {
+  padding: 10px;
+}
+
+#recent-file-panel-action-btn {
+  background: var(--bg-color5);
+  border: 0px;
+}
+
+#recent-file-panel thead tr {
+  background-color: var(--table-thead-color);
+}
+
+#recent-file-panel tbody tr:nth-child(2n) {
+  background-color: var(--table-bg-darker-color);
+}
+
+#recent-file-panel tbody tr:nth-child(2n + 1) {
+  background-color: var(--table-bg-color);
+}
+
+#recent-file-panel-action-btn:hover {
+  background-color: var(--hover-bg-color1);
+  color: var(--text-color2);
+}
+
+/* theme preview hover */
+.theme-preview-div:hover {
+  border-color: var(--theme-select-color);
+}
+
+/* context menu and spell check panel */
+.dropdown-menu:not(.megamenu-menu-list) {
+  background-color: var(--bg-color2);
+  color: var(--text-color2);
+}
+
+/* divider in context menu and spell check panel */
+.dropdown-menu .divider {
+  border-color: var(--menu-divider-color);
+}
+
+/* remove divider outline */
+.dropdown-menu {
+  border: 0px;
+}
+
+/* footer */
+footer.ty-footer {
+  border-top: 0px !important;
+  background-color: var(--bg-color2) !important;
+}
+
+/* footer item */
+.footer-item,
+#outline-btn,
+#footer-word-count {
+  color: var(--text-color2);
+  opacity: 1;
+}
+
+/* footer item hover */
+.footer-item:hover,
+#outline-btn:hover {
+  background-color: var(--hover-bg-color1);
+  color: var(--hover-text-color);
+}
+
+/* button on some panel */
+.btn {
+  border: 0px;
+  outline-width: 0px !important;
+}
+
+.btn:hover {
+  background-color: var(--hover-bg-color1);
+  color: var(--hover-text-color);
+}
+
+/* traffic button hover */
+#top-titlebar .toolbar-icon.btn:hover {
+  color: var(--text-color2);
+  background-color: var(--hover-bg-color1);
+}
+
+/* traffic button hover */
+#top-titlebar #w-close:hover {
+  background-color: #e81123 !important;
+}
+
+/* adjust maxmize restore button height */
+.typora-maxmized #w-restore {
+  height: 24px;
+}
+
+/* left upper button hover */
+.ty-menu-btn-area:hover .ty-menu-btn-area-sub {
+  color: var(--text-color2) !important;
+}
+
+/* scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  padding-right: 10px;
+  background-color: var(--scrollbar-track-color);
+}
+
+/* scrollbar track */
+::-webkit-scrollbar-track:hover {
+  background-color: var(--scrollbar-track-color) !important;
+  border-radius: 4px;
+}
+
+/* scrollbar thumb */
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-thumb:active {
+  background-color: var(--scrollbar-thumb-color) !important;
+  border-radius: 4px;
+}
+
+/* tip when hover on a button */
+#ty-tooltip {
+  background-color: var(--bg-color4);
+  color: var(--text-color4);
+}
+
+/* item container hover in context menu */
+.menu-item-container:hover {
+  background-color: var(--bg-color2);
+}
+
+/* item in context menu */
+.menu-item-container .menu-style-btn {
+  border-color: var(--menu-divider-color);
+}
+
+/* mathjax edit panel*/
+.md-rawblock-before {
+  border-top-left-radius: 6px;
+}
+
+.md-rawblock-after {
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+/* mathjax focus */
+.MathJax_SVG:focus {
+  outline: none;
+  background-color: transparent;
+}
+
+/* notification panel */
+#md-notification {
+  background-color: var(--dracula-red) !important;
+  color: var(--text-color2);
+}
+
+#ty-surpress-mode-warning-close-btn {
+  float: unset !important;
+  margin: 0px !important;
+}
+
+.unibody-window #md-notification p {
+  bottom: -4px !important;
+}
+
+/* inline codeblock */
+code {
+  font-size: 0.9em;
+  background-color: var(--bg-color5);
+  border-radius: 6px;
+  padding: 4px 4px 4px 4px;
+  margin: 0px 0px 0px 0px;
+}
+
+/* codeblock */
+.md-fences,
+.md-fences:active {
+  background-color: var(--bg-color5);
+  border-radius: 6px;
+  padding: 8px 4px 8px 4px !important;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.md-fences .code-tooltip {
+  display: block !important;
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.3s;
+  background-color: var(--bg-color3);
+}
+
+.md-fences.md-focus .code-tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+
+.CodeMirror-lines {
+  padding-left: 4px;
+}
+
+/* selected text and cursor */
+.CodeMirror-selected,
+.CodeMirror-selectedtext {
+  background: var(--code-select-bg-color) !important;
+}
+
+.CodeMirror div.CodeMirror-cursor {
+  border-left: 2px solid var(--code-cursor-color);
+  z-index: 3;
+}
+
+.CodeMirror.cm-s-typora-default div.CodeMirror-cursor {
+  border-left: 3px solid var(--code-cursor-color);
+}
+
+/* highlight */
+.cm-s-inner .cm-property {
+  color: var(--code-blue-color) !important;
+}
+
+.cm-s-inner .cm-operator {
+  color: var(--code-cyan-color) !important;
+}
+
+.cm-s-inner .cm-keyword {
+  color: var(--code-purple-color) !important;
+}
+
+.cm-s-inner .cm-tag {
+  color: var(--code-red-color) !important;
+}
+
+.cm-s-inner .cm-attribute {
+  color: var(--code-orange-color) !important;
+}
+
+.cm-s-inner .cm-string {
+  color: var(--code-green-color) !important;
+}
+
+.cm-s-inner .cm-comment,
+.cm-s-inner.cm-comment {
+  color: var(--code-grey-color) !important;
+  font-style: italic;
+}
+
+.cm-s-inner .cm-header,
+.cm-s-inner .cm-def,
+.cm-s-inner.cm-header,
+.cm-s-inner.cm-def {
+  color: var(--code-blue-color) !important;
+}
+
+.cm-s-inner .cm-meta,
+.cm-s-inner .cm-qualifier {
+  color: var(--code-red-color) !important;
+}
+
+.cm-s-inner .cm-builtin {
+  color: var(--code-cyan-color) !important;
+}
+
+.cm-s-inner .cm-bracket {
+  color: var(--text-color1) !important;
+}
+
+.cm-s-inner .cm-number {
+  color: var(--code-orange-color) !important;
+}
+
+.cm-s-inner .cm-variable {
+  color: var(--text-color1) !important;
+}
+
+.cm-s-inner .cm-variable-2 {
+  color: var(--code-yellow-color) !important;
+}
+
+.cm-s-typora-default .cm-header,
+.cm-s-typora-default .cm-property {
+  color: var(--code-red-color) !important;
+}
+
+.cm-s-typora-default .cm-string {
+  color: var(--code-purple-color);
+}
+
+.cm-s-typora-default .cm-atom {
+  color: var(--code-grey-color);
+  font-style: italic;
+}
+
+.cm-s-typora-default .cm-number {
+  color: var(--code-orange-color);
+  font-style: normal !important;
+}
+
+.cm-s-typora-default .cm-link {
+  color: var(--code-blue-color);
+}
+
+.cm-s-typora-default .CodeMirror-activeline-background {
+  background: var(--hover-bg-color1);
+}
+
+.cm-s-typora-default .cm-comment,
+.cm-s-typora-default .cm-code {
+  color: var(--code-purple-color);
+}
+
+.cm-s-typora-default .cm-tag {
+  color: var(--code-blue-color);
+}
+
+.cm-s-typora-default .cm-strong,
+.cm-s-typora-default .cm-em,
+.cm-s-typora-default .cm-del {
+  color: var(--code-orange-color);
+}
+
+.cm-s-typora-default .cm-block-start.cm-variable-2 {
+  color: var(--code-red-color);
+}
+
+.cm-formatting-task .cm-formatting-task {
+  color: var(--code-red-color);
+}
+
+/* math formula tag */
+.cm-s-inner .cm-atom,
+.cm-s-inner.cm-atom {
+  color: var(--code-blue-color);
+}
+
+/* inline codeblock in source mode */
+.cm-s-typora-default .cm-comment {
+  color: var(--code-green-color);
+}
+
+/* horizontal divider when language is markdown */
+.cm-s-inner .cm-hr {
+  color: var(--text-color1);
+}
+
+/* variable type when language is c/cpp */
+.cm-s-inner .cm-variable-3 {
+  color: var(--code-purple-color);
+}
+
+/* in pie chart and flowchart */
+.cm-s-inner .cm-quote,
+.cm-s-inner.cm-quote {
+  color: var(--code-green-color);
+}
+
+/* unknown highlight keyword */
+.cm-s-inner .cm-link {
+  color: var(--code-blue-color);
+}
+
+.cm-s-inner .cm-negative {
+  color: var(--dracula-red);
+}
+
+.cm-s-inner .cm-positive {
+  color: var(--dracula-green);
+}
+
+.cm-s-inner .cm-string-2 {
+  color: var(--dracula-orange);
+}
+
+.CodeMirror-gutters {
+  border-right: none;
+}
+
+/* focus mode */
+.on-focus-mode .md-end-block:not(.md-focus) .md-toc-item {
+  opacity: 0.5;
+}
+
+.on-focus-mode #write h1:not(.md-focus):before {
+  opacity: 0.5;
+}
+
+.on-focus-mode #write h2:not(.md-focus):before {
+  opacity: 0.5;
+}
+
+.on-focus-mode #write h1:not(.md-focus) {
+  border-color: var(--text-color5);
+}
+
+.on-focus-mode #write h2:not(.md-focus) {
+  border-color: var(--text-color5);
+}
+
+.on-focus-mode #write h3:not(.md-focus) {
+  border-color: var(--text-color5);
+}
+
+/* YAML block */
+pre.md-meta-block,
+pre.md-meta-block:active {
+  background-color: var(--bg-color5);
+  border-radius: 6px;
+  padding: 10px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+/* switch between different mode */
+#typora-source {
+  display: block !important;
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.3s;
+}
+
+.typora-sourceview-on #typora-source {
+  visibility: visible;
+  opacity: 1;
+}
+
+#typora-source .CodeMirror-lines {
+  max-width: 1200px;
+  padding-left: 70px;
+  padding-right: 70px;
+}
+
+#write {
+  display: block !important;
+  visibility: visible;
+  opacity: 1;
+  transition: 0.3s;
+  max-width: 1200px;
+  padding-left: 70px;
+  padding-right: 70px;
+}
+
+.typora-sourceview-on #write {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.uni-preference-panel {
+  display: block;
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.3s;
+}
+
+.show-preference-panel .uni-preference-panel {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* quick open menu */
+.typora-quick-open-item:hover {
+  background-color: var(--hover-bg-color1);
+  color: var(--hover-text-color);
+}
+
+/* insert table panel */
+.modal-content {
+  border: 0px;
+  border-radius: 6px;
+}
+
+.modal-content .btn-primary {
+  background-color: var(--hover-bg-color1);
+  color: var(--text-color1);
+  outline-width: 0px;
+}
+
+.modal-content .btn-primary:hover {
+  color: var(--hover-text-color);
+}
+
+.modal-backdrop {
+  background-color: black;
+  opacity: 0.3 !important;
+}
+
+/* zoom  */
+#zoom-hint #zoom-hint-reset {
+  color: var(--text-color1);
+}
+
+#zoom-hint .zoom-hint-button:hover {
+  color: var(--hover-text-color) !important;
+}
+
+/* word count */
+#footer-word-count-info {
+  display: block;
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.3s;
+}
+
+.ty-show-word-count #footer-word-count-info {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* spell check */
+#spell-check-panel {
+  display: block;
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.3s;
+}
+
+.ty-show-spell-check #spell-check-panel {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* search result */
+.md-search-select {
+  border: 2px solid var(--dracula-cyan);
+  box-sizing: content-box;
+  color: var(--text-color1) !important;
+}
+
+.md-search-hit {
+  background-color: var(--search-select-bg-color);
+}
+
+/* search panel message */
+#searchpanel-msg {
+  background-color: var(--bg-color2);
+  color: var(--text-color2);
+}
+
+.searchpanel-msg-btn:hover {
+  background-color: var(--hover-bg-color1);
+  color: var(--hover-text-color);
+}
+
+/* language selection for codeblock */
+.auto-suggest-container {
+  border: 0px;
+  background-color: var(--bg-color2);
+}
+
+/* sidebar outline item hover and active */
+.outline-item:hover {
+  color: var(--hover-text-color);
+}
+
+.outline-label:hover {
+  text-decoration: none;
+}
+
+.pin-outline .outline-active {
+  color: var(--hover-text-color);
+}
+
+/* sidebar title hover */
+.info-panel-tab:hover {
+  color: var(--hover-text-color) !important;
+}
+
+/* active file in sidebar file menu tree view */
+.file-tree-node.active>.file-node-background {
+  background-color: var(--hover-bg-color1);
+}
+
+/* hover file in sidebar file menu tree view */
+.file-node-content:hover {
+  cursor: pointer;
+}
+
+/* saved button in megamenu */
+#m-saved:hover {
+  background-color: var(--bg-color2);
+  color: var(--text-color2);
+  cursor: default;
+}
+
+/* mermaid flowchart */
+.node rect,
+.node circle,
+.node ellipse,
+.node polygon,
+.node path {
+  fill: var(--bg-color2) !important;
+  stroke: var(--menu-divider-color) !important;
+}
+
+.edgePath .path {
+  stroke: var(--menu-divider-color) !important;
+}
+
+.label {
+  color: var(--text-color1) !important;
+}
+
+.edgeLabel rect {
+  fill: transparent !important;
+}
+
+.cluster rect {
+  fill: var(--bg-color5) !important;
+  stroke: var(--menu-divider-color) !important;
+}
+
+/* mermaid sequence*/
+text.actor {
+  fill: var(--text-color1) !important;
+}
+
+.messageLine0,
+.messageLine1 {
+  stroke: var(--menu-divider-color) !important;
+}
+
+rect[class*="activation"] {
+  fill: var(--bg-color2) !important;
+}
+
+.actor-line {
+  stroke-width: 1px !important;
+}
+
+.labelBox {
+  stroke: var(--dracula-current-line) !important;
+}
+
+.labelText {
+  fill: var(--text-color1) !important;
+}
+
+.loopText {
+  fill: var(--text-color1) !important;
+}
+
+.loopLine {
+  stroke: var(--dracula-current-line) !important;
+}
+
+.note {
+  fill: var(--bg-color2) !important;
+  stroke: var(--menu-divider-color) !important;
+}
+
+.noteText {
+  fill: var(--text-color1) !important;
+}
+
+/* mermaid class */
+g.classGroup text {
+  fill: var(--text-color) !important;
+}
+
+g.classGroup rect {
+  stroke: var(--menu-divider-color) !important;
+  fill: var(--bg-color2) !important;
+}
+
+g.classGroup line {
+  stroke: var(--menu-divider-color) !important;
+}
+
+.classLabel .label {
+  fill: var(--text-color1) !important;
+}
+
+.relation {
+  stroke: var(--menu-divider-color) !important;
+}
+
+#compositionStart,
+#compositionEnd,
+#aggregationStart,
+#aggregationEnd,
+#dependencyStart,
+#dependencyStart,
+#extensionStart,
+#extensionEnd {
+  fill: var(--menu-divider-color) !important;
+  stroke: var(--menu-divider-color) !important;
+}
+
+.cardinality text {
+  fill: var(--text-color) !important;
+}
+
+/* mermaid state v1 */
+.stateGroup rect,
+.stateGroup line {
+  fill: var(--bg-color2) !important;
+  stroke: var(--menu-divider-color) !important;
+}
+
+.stateGroup text {
+  fill: var(--text-color) !important;
+}
+
+.stateGroup circle {
+  fill: var(--bg-color4) !important;
+  stroke: var(--menu-divider-color) !important;
+}
+
+.stateGroup .composit {
+  fill: var(--dracula-background-dark) !important;
+}
+
+.stateGroup .alt-composit {
+  fill: var(--dracula-background-dark) !important;
+}
+
+.state-note rect {
+  fill: var(--bg-color2) !important;
+  stroke: var(--menu-divider-color) !important;
+}
+
+.state-note text {
+  fill: var(--text-color) !important;
+}
+
+.stateLabel text {
+  fill: var(--text-color) !important;
+}
+
+#dependencyEnd {
+  fill: var(--menu-divider-color) !important;
+  stroke: var(--menu-divider-color) !important;
+}
+
+/* mermaid state v2*/
+.state-start {
+  fill: var(--bg-color4) !important;
+  stroke: var(--menu-divider-color) !important;
+}
+
+.state-end {
+  stroke: var(--menu-divider-color) !important;
+  fill: var(--bg-color4) !important;
+}
+
+.divider {
+  stroke: var(--menu-divider-color) !important;
+  fill: var(--bg-color5) !important;
+  fill: var(--dracula-background-dark) !important;
+}
+
+.fork-join {
+  fill: var(--bg-color2) !important;
+  stroke: var(--menu-divider-color) !important;
+}
+
+.title-state {
+  fill: var(--bg-color2) !important;
+}
+
+.statediagram-cluster .outer {
+  stroke: var(--menu-divider-color) !important;
+}
+
+.statediagram-cluster .inner {
+  fill: var(--dracula-background-dark) !important;
+  stroke: var(--menu-divider-color) !important;
+}
+
+.statediagram-cluster-alt .inner {
+  fill: var(--dracula-background-dark) !important;
+  stroke: var(--menu-divider-color) !important;
+}
+
+.transition {
+  stroke: var(--menu-divider-color) !important;
+}
+
+#statediagram-barbEnd {
+  fill: var(--menu-divider-color) !important;
+}
+
+/* mermaid journey */
+.journey-section {
+  fill: var(--bg-color5) !important;
+  stroke: var(--menu-divider-color) !important;
+}
+
+.journey-section div {
+  color: var(--text-color) !important;
+}
+
+.task {
+  fill: var(--bg-color2) !important;
+  stroke: var(--menu-divider-color) !important;
+  stroke-width: 1px !important;
+}
+
+.task div {
+  color: var(--text-color) !important;
+}
+
+#arrowhead {
+  fill: var(--menu-divider-color) !important;
+  stroke: var(--menu-divider-color) !important;
+  stroke-width: 0.3px !important;
+}
+
+pre[mermaid-type="journey"] line {
+  stroke: var(--menu-divider-color) !important;
+  stroke-width: 2px !important;
+}
+
+pre[mermaid-type="journey"] text {
+  fill: var(--text-color1) !important;
+}
+
+pre[mermaid-type="journey"] g path,
+pre[mermaid-type="journey"] g line {
+  fill: var(--dracula-comment) !important;
+  stroke: var(--text-color) !important;
+}
+
+.task-line {
+  stroke: var(--menu-divider-color) !important;
+}
+
+/* mermaid erDiagram */
+pre[mermaid-type="erDiagram"] rect {
+  fill: var(--bg-color2) !important;
+}
+
+pre[mermaid-type="erDiagram"] text {
+  fill: var(--text-color) !important;
+}
+
+pre[mermaid-type="erDiagram"] path {
+  stroke: var(--menu-divider-color) !important;
+}
+
+#ZERO_OR_ONE_START circle,
+#ZERO_OR_ONE_END circle,
+#ZERO_OR_MORE_START circle,
+#ZERO_OR_MORE_END circle {
+  fill: var(--bg-color) !important;
+}
+
+/* mermaid gantt */
+.titleText {
+  fill: var(--text-color1) !important;
+}
+
+.section0,
+.section2 {
+  fill: var(--table-thread-color) !important;
+}
+
+.section1,
+.section3 {
+  fill: var(--table-bg-color) !important;
+}
+
+.task0,
+.task1,
+.task2,
+.task3 {
+  fill: var(--dracula-current-line) !important;
+  stroke: var(--dracula-current-line) !important;
+}
+
+.taskText0,
+.taskText1,
+.taskText2,
+.taskText3 {
+  fill: var(--text-color2) !important;
+}
+
+.active0,
+.active1,
+.active2,
+.active3 {
+  fill: var(--dracula-current-line) !important;
+  stroke: var(--dracula-current-line) !important;
+}
+
+.activeText0,
+.activeText1,
+.activeText2,
+.activeText3 {
+  fill: var(--text-color2) !important;
+}
+
+.done0,
+.done1,
+.done2,
+.done3 {
+  fill: var(--dracula-background-dark) !important;
+  stroke: var(--dracula-background-dark) !important;
+}
+
+.crit0,
+.crit1,
+.crit2,
+.crit3 {
+  fill: var(--dracula-current-line) !important;
+  stroke: var(--text-color1) !important;
+}
+
+.activeCrit0,
+.activeCrit1,
+.activeCrit2,
+.activeCrit3 {
+  fill: var(--dracula-current-line) !important;
+  stroke: var(--text-color1) !important;
+}
+
+.doneCrit0,
+.doneCrit1,
+.doneCrit2,
+.doneCrit3 {
+  fill: var(--dracula-background-dark) !important;
+  stroke: var(--text-color1) !important;
+}
+
+.taskTextOutside0,
+.taskTextOutside2,
+.taskTextOutside1,
+.taskTextOutside3 {
+  fill: var(--text-color1) !important;
+}
+
+.grid text {
+  fill: var(--dracula-foreground) !important;
+}
+
+.today {
+  stroke: var(--text-color1) !important;
+}
+
+/* mermaid pie chart */
+g.legend>text {
+  fill: var(--text-color1) !important;
+}
+
+g.legend>rect {
+  stroke: var(--bg-color) !important;
+}
+
+g>path {
+  stroke: var(--bg-color) !important;
+}
+
+g>text.slice {
+  fill: var(--bg-color) !important;
+}
+
+/* flow diagram */
+.md-fences[lang="flow"] .md-diagram-panel-preview rect {
+  fill: var(--bg-color2) !important;
+  stroke: var(--menu-divider-color) !important;
+  stroke-width: 1.2 !important;
+}
+
+.md-fences[lang="flow"] .md-diagram-panel-preview path {
+  stroke: var(--menu-divider-color) !important;
+  stroke-width: 1.2 !important;
+}
+
+.md-fences[lang="flow"] #cond {
+  fill: var(--bg-color2) !important;
+}
+
+/* sequence diagram */
+.md-fences[lang="sequence"] .md-diagram-panel-preview rect:not([fill="none"]) {
+  fill: var(--bg-color2) !important;
+  stroke: var(--menu-divider-color) !important;
+  stroke-width: 1.2 !important;
+}
+
+.md-fences[lang="sequence"] .md-diagram-panel-preview path {
+  fill: var(--menu-divider-color) !important;
+  stroke: var(--menu-divider-color) !important;
+  stroke-width: 1.2 !important;
+}
+
+.md-fences[lang="sequence"] text,
+.md-fences[lang="flow"] text {
+  font-family: "Consolas" !important;
+}
+
+/* remove border when edit graph */
+.md-diagram-panel {
+  border: none !important;
+}
+
+kbd {
+  background: var(--bg-color5);
+  color: var(--text-color1);
+  font-family: "Lucida Console";
+  border-color: var(--menu-divider-color);
+}