styles update

Author: metaory

README.md

@@ -24,6 +24,7 @@
 - Collapsible nodes (synced between panels)
 - Diff indicators bubble up to parent nodes
 - Stats summary (added/removed/modified)
+- Show only changed filter toggle
 - Syntax highlighting
 - Zero dependencies
 - Shadow DOM encapsulation
@@ -153,6 +154,9 @@ json-diff-viewer {
   --txt: #fafafa; /* Primary text */
   --dim: #a1a1aa; /* Dimmed/secondary text */
 
+  /* Controls */
+  --slider: var(--bdr); /* Slider toggle active color */
+
   /* Syntax highlighting */
   --key: #38bdf8; /* Object keys */
   --str: #a78bfa; /* String values */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-diff-viewer-component",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "description": "Vanilla JS web component for side-by-side JSON diff visualization",
   "keywords": [

src/lib/styles.js

@@ -4,7 +4,7 @@ export default `
   --bg: #18181b; --bg2: #27272a; --bdr: #3f3f46;
   --txt: #fafafa; --dim: #a1a1aa;
   --key: #38bdf8; --str: #a78bfa; --num: #34d399; --bool: #fb923c; --nul: #f472b6; --br: #71717a;
-  --slider: var(--mod);
+  --slider: var(--bdr);
   display: flex; flex-direction: column; font: 13px 'JetBrains Mono', 'Fira Code', monospace;
   background: var(--bg); color: var(--txt); border-radius: 12px; overflow: hidden;
 }

src/main.js

@@ -9,13 +9,13 @@ const themes = {
   dark: {
     add: "#22c55e", rem: "#ef4444", mod: "#eab308",
     bg: "#18181b", bg2: "#27272a", bdr: "#3f3f46",
-    txt: "#fafafa", dim: "#a1a1aa",
+    txt: "#fafafa", dim: "#a1a1aa", slider: "#3f3f46",
     key: "#38bdf8", str: "#a78bfa", num: "#34d399", bool: "#fb923c", nul: "#f472b6", br: "#71717a"
   },
   light: {
     add: "#15803d", rem: "#b91c1c", mod: "#ca8a04",
     bg: "#ffffff", bg2: "#f9fafb", bdr: "#d1d5db",
-    txt: "#030712", dim: "#4b5563",
+    txt: "#030712", dim: "#4b5563", slider: "#d1d5db",
     key: "#075985", str: "#6d28d9", num: "#047857", bool: "#b45309", nul: "#a21caf", br: "#6b7280"
   }
 }

src/style.css

@@ -10,12 +10,12 @@ html, body {
   font-family: 'JetBrains Mono', monospace;
 }
 html[data-theme="dark"], html[data-theme="dark"] body {
-  background: linear-gradient(135deg, #0a0a0f 0%, #1a0f1a 50%, #0a0a0f 100%);
+  background: linear-gradient(135deg, #18181b 0%, #27272a 50%, #18181b 100%);
   background-size: 400% 400%;
   animation: gradientShift 20s ease infinite;
 }
 html[data-theme="light"], html[data-theme="light"] body {
-  background: linear-gradient(135deg, #f5f5f7 0%, #e8e8ed 50%, #f5f5f7 100%);
+  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 50%, #ffffff 100%);
   background-size: 400% 400%;
   animation: gradientShift 20s ease infinite;
 }
@@ -35,14 +35,19 @@ html[data-theme="light"], html[data-theme="light"] body {
 }
 
 h1 {
-  color: #886688;
   font-size: 1.25rem;
   font-weight: 600;
   font-family: Bungee, system-ui;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+html[data-theme="dark"] h1 {
+  color: #fafafa;
+}
+html[data-theme="light"] h1 {
+  color: #030712;
+}
 .header-controls {
   display: flex;
   gap: 2rem;
@@ -51,39 +56,61 @@ h1 {
 #theme-toggle {
   padding: 0.35rem 0.75rem;
   background: transparent;
-  border: 2px solid #44115588;
   border-radius: 6px;
-  color: inherit;
   font-family: inherit;
   font-size: 11px;
   cursor: pointer;
   transition: background .15s, border-color .15s;
 }
-#theme-toggle:hover {
-  background: white;
-  border-color: white;
+html[data-theme="dark"] #theme-toggle {
+  border: 2px solid #3f3f46;
+  color: #fafafa;
+}
+html[data-theme="dark"] #theme-toggle:hover {
+  background: #fafafa;
+  border-color: #fafafa;
+  color: #18181b;
+}
+html[data-theme="light"] #theme-toggle {
+  border: 2px solid #d1d5db;
+  color: #030712;
+}
+html[data-theme="light"] #theme-toggle:hover {
+  background: #030712;
+  border-color: #030712;
+  color: #ffffff;
 }
 .github-logo {
   width: 42px;
   height: 42px;
-  opacity: 0.8;
-  transition: opacity 0.2s;
+  transition: filter 0.2s;
+}
+html[data-theme="dark"] .github-logo {
+  filter: brightness(0) invert(0.63);
+}
+html[data-theme="light"] .github-logo {
+  filter: brightness(0) invert(0.3);
 }
 
 h1 a {
   display: inline-block;
 }
 
-h1 a:hover .github-logo {
-  opacity: 1;
+html[data-theme="dark"] h1 a:hover .github-logo {
+  filter: brightness(0) invert(0.98);
+}
+html[data-theme="light"] h1 a:hover .github-logo {
+  filter: brightness(0) invert(0.12);
 }
 
 json-diff-viewer {
   flex: 1;
   min-height: 0;
-  border: 2px solid #3f3f46;
   border-radius: 16px;
 }
+html[data-theme="dark"] json-diff-viewer {
+  border: 2px solid #3f3f46;
+}
 html[data-theme="light"] json-diff-viewer {
-  border-color: #e4e4e7;
+  border: 2px solid #d1d5db;
 }