Switch theme from Obsidian purple to Tokyo Night (LazyVim default)

Applies tokyonight-night color palette:
- Background: #1a1b26 (deep navy-black)
- Text: #c0caf5 (soft blue-white)
- Accent: #7aa2f7 (blue), #bb9af7 (magenta), #7dcfff (cyan)
- Headings use graduated Tokyo Night colors (blue -> cyan -> magenta)
- Bold: orange (#ff9e64), Italic: magenta (#bb9af7)
- Code: green (#9ece6a), Links: blue (#7aa2f7)
- Selection: #283457 (muted blue)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: kestermcullough

src/editor/theme.ts

@@ -2,24 +2,25 @@ import { EditorView } from "@codemirror/view";
 import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { tags } from "@lezer/highlight";
 
-const obsidianDarkTheme = EditorView.theme(
+// Tokyo Night - Night variant
+const tokyoNightTheme = EditorView.theme(
   {
     "&": {
       backgroundColor: "var(--bg-primary)",
       color: "var(--text-primary)",
     },
     ".cm-content": {
-      caretColor: "var(--accent)",
+      caretColor: "var(--text-primary)",
     },
     ".cm-cursor, .cm-dropCursor": {
-      borderLeftColor: "var(--accent)",
+      borderLeftColor: "var(--text-primary)",
     },
     "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
       {
-        backgroundColor: "rgba(127, 109, 242, 0.2)",
+        backgroundColor: "#283457",
       },
     ".cm-activeLine": {
-      backgroundColor: "rgba(255, 255, 255, 0.03)",
+      backgroundColor: "rgba(192, 202, 245, 0.03)",
     },
     ".cm-gutters": {
       backgroundColor: "var(--bg-primary)",
@@ -34,31 +35,32 @@ const obsidianDarkTheme = EditorView.theme(
   { dark: true }
 );
 
-const obsidianHighlight = HighlightStyle.define([
-  { tag: tags.heading1, fontWeight: "700", fontSize: "2em" },
-  { tag: tags.heading2, fontWeight: "700", fontSize: "1.6em" },
-  { tag: tags.heading3, fontWeight: "600", fontSize: "1.3em" },
-  { tag: tags.heading4, fontWeight: "600", fontSize: "1.1em" },
-  { tag: tags.heading5, fontWeight: "600" },
+const tokyoNightHighlight = HighlightStyle.define([
+  { tag: tags.heading1, fontWeight: "700", fontSize: "2em", color: "#7aa2f7" },
+  { tag: tags.heading2, fontWeight: "700", fontSize: "1.6em", color: "#7dcfff" },
+  { tag: tags.heading3, fontWeight: "600", fontSize: "1.3em", color: "#bb9af7" },
+  { tag: tags.heading4, fontWeight: "600", fontSize: "1.1em", color: "#9d7cd8" },
+  { tag: tags.heading5, fontWeight: "600", color: "#73daca" },
   { tag: tags.heading6, fontWeight: "600", color: "var(--text-muted)" },
-  { tag: tags.strong, fontWeight: "700" },
-  { tag: tags.emphasis, fontStyle: "italic" },
-  { tag: tags.strikethrough, textDecoration: "line-through" },
-  { tag: tags.link, color: "var(--link-color)", textDecoration: "underline" },
-  { tag: tags.url, color: "var(--text-muted)" },
+  { tag: tags.strong, fontWeight: "700", color: "#ff9e64" },
+  { tag: tags.emphasis, fontStyle: "italic", color: "#bb9af7" },
+  { tag: tags.strikethrough, textDecoration: "line-through", color: "var(--text-muted)" },
+  { tag: tags.link, color: "#7aa2f7", textDecoration: "underline" },
+  { tag: tags.url, color: "#565f89" },
   {
     tag: tags.monospace,
     fontFamily: "var(--font-mono)",
     fontSize: "0.9em",
     backgroundColor: "var(--code-bg)",
     borderRadius: "3px",
+    color: "#9ece6a",
   },
   { tag: tags.quote, color: "var(--text-secondary)" },
-  { tag: tags.meta, color: "var(--text-muted)" },
-  { tag: tags.processingInstruction, color: "var(--text-muted)" },
+  { tag: tags.meta, color: "#565f89" },
+  { tag: tags.processingInstruction, color: "#565f89" },
 ]);
 
 export const obsidianTheme = [
-  obsidianDarkTheme,
-  syntaxHighlighting(obsidianHighlight),
+  tokyoNightTheme,
+  syntaxHighlighting(tokyoNightHighlight),
 ];

src/styles/editor.css

@@ -20,60 +20,61 @@
 }
 
 .editor-area .cm-activeLine {
-  background: rgba(255, 255, 255, 0.03);
+  background: rgba(192, 202, 245, 0.03);
 }
 
 .editor-area .cm-selectionBackground {
-  background: rgba(127, 109, 242, 0.2) !important;
+  background: #283457 !important;
 }
 
 .editor-area .cm-cursor {
-  border-left-color: var(--accent);
+  border-left-color: var(--text-primary);
 }
 
 .editor-area .cm-gutters {
   display: none;
 }
 
-/* Markdown inline rendering styles */
-.cm-md-heading1 { font-size: 2em; font-weight: 700; line-height: 1.2; }
-.cm-md-heading2 { font-size: 1.6em; font-weight: 700; line-height: 1.3; }
-.cm-md-heading3 { font-size: 1.3em; font-weight: 600; line-height: 1.4; }
-.cm-md-heading4 { font-size: 1.1em; font-weight: 600; }
-.cm-md-heading5 { font-size: 1em; font-weight: 600; }
+/* Markdown inline rendering styles - Tokyo Night colors */
+.cm-md-heading1 { font-size: 2em; font-weight: 700; line-height: 1.2; color: var(--tn-blue); }
+.cm-md-heading2 { font-size: 1.6em; font-weight: 700; line-height: 1.3; color: var(--tn-cyan); }
+.cm-md-heading3 { font-size: 1.3em; font-weight: 600; line-height: 1.4; color: var(--tn-magenta); }
+.cm-md-heading4 { font-size: 1.1em; font-weight: 600; color: var(--tn-purple); }
+.cm-md-heading5 { font-size: 1em; font-weight: 600; color: var(--tn-teal); }
 .cm-md-heading6 { font-size: 0.9em; font-weight: 600; color: var(--text-muted); }
 
-.cm-md-bold { font-weight: 700; }
-.cm-md-italic { font-style: italic; }
+.cm-md-bold { font-weight: 700; color: var(--tn-orange); }
+.cm-md-italic { font-style: italic; color: var(--tn-magenta); }
 
 .cm-md-inline-code {
   background: var(--code-bg);
   border-radius: 3px;
   padding: 1px 4px;
   font-family: var(--font-mono);
   font-size: 0.9em;
+  color: var(--tn-green);
 }
 
 .cm-md-link {
-  color: var(--link-color);
+  color: var(--tn-blue);
   text-decoration: underline;
   text-decoration-color: var(--link-color-faded);
   cursor: pointer;
 }
 
 .cm-md-bullet {
-  color: var(--accent);
+  color: var(--tn-cyan);
   font-size: 1.2em;
 }
 
 .cm-md-blockquote {
-  border-left: 3px solid var(--blockquote-border);
+  border-left: 3px solid var(--tn-blue);
   padding-left: 12px;
   color: var(--text-secondary);
 }
 
 .cm-md-hr {
   border: none;
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--text-faint);
   margin: 8px 0;
 }

src/styles/variables.css

@@ -1,32 +1,34 @@
 :root {
+  /* Tokyo Night - Night variant */
+
   /* Background colors */
-  --bg-primary: #1e1e1e;
-  --bg-secondary: #252525;
-  --bg-tertiary: #2d2d2d;
-  --bg-hover: #353535;
-  --bg-active: #3e3e3e;
+  --bg-primary: #1a1b26;
+  --bg-secondary: #16161e;
+  --bg-tertiary: #1f2335;
+  --bg-hover: #283457;
+  --bg-active: #3d59a1;
 
   /* Text colors */
-  --text-primary: #dcddde;
-  --text-secondary: #a0a0a0;
-  --text-muted: #777;
-  --text-faint: #555;
+  --text-primary: #c0caf5;
+  --text-secondary: #a9b1d6;
+  --text-muted: #565f89;
+  --text-faint: #3b4261;
 
-  /* Accent */
-  --accent: #7f6df2;
-  --accent-hover: #8b7cf3;
-  --link-color: #7f6df2;
-  --link-color-faded: rgba(127, 109, 242, 0.4);
+  /* Accent - Tokyo Night blue */
+  --accent: #7aa2f7;
+  --accent-hover: #89b4fa;
+  --link-color: #7aa2f7;
+  --link-color-faded: rgba(122, 162, 247, 0.4);
 
   /* Borders */
-  --border-color: #333;
-  --divider-color: #2a2a2a;
+  --border-color: #1f2335;
+  --divider-color: #16161e;
 
   /* Code */
-  --code-bg: rgba(255, 255, 255, 0.06);
+  --code-bg: rgba(122, 162, 247, 0.1);
 
   /* Blockquote */
-  --blockquote-border: #555;
+  --blockquote-border: #3d59a1;
 
   /* Fonts */
   --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -38,4 +40,15 @@
   --sidebar-width: 250px;
   --tab-height: 36px;
   --status-height: 24px;
+
+  /* Extra Tokyo Night colors for markdown elements */
+  --tn-blue: #7aa2f7;
+  --tn-purple: #9d7cd8;
+  --tn-cyan: #7dcfff;
+  --tn-green: #9ece6a;
+  --tn-red: #f7768e;
+  --tn-yellow: #e0af68;
+  --tn-orange: #ff9e64;
+  --tn-magenta: #bb9af7;
+  --tn-teal: #73daca;
 }