fix: improve dark mode of json editor

felixmosh · Oct 21, 2024 · ca327b7 · ca327b7
1 parent e61f702
commit ca327b7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/packages/ui/src/components/JsonEditor/JsonEditor.tsx b/packages/ui/src/components/JsonEditor/JsonEditor.tsx
@@ -66,7 +66,22 @@ const theme = EditorView.theme({
   },
   '.cm-activeLineGutter': { backgroundColor: 'var(--json-edit-gutter-active-bg)' },
   '.cm-scroller': { overflow: 'auto' },
-  '.cm-tooltip': { padding: '0.25rem 0.5rem', borderRadius: '0.275rem' },
+  '.cm-tooltip': {
+    padding: '0.25rem 0.5rem',
+    borderRadius: '0.275rem',
+    backgroundColor: 'var(--json-edit-tooltip-bg)',
+    border: '1px solid var(--json-edit-tooltip-border-color)',
+  },
+  '.cm6-json-schema-hover--code > p': {
+    margin: '0.5em 0',
+  },
+  '.cm-tooltip-above .cm-tooltip-arrow:before': {
+    borderTop: '7px solid var(--json-edit-tooltip-border-color)',
+  },
+  '.cm-tooltip-above .cm-tooltip-arrow:after': {
+    borderTop: '7px solid var(--json-edit-tooltip-bg)',
+  },
+  '.cm-selectionBackground': { background: 'var(--json-edit-selection-bg)!important' },
 });
 
 const commonExtensions = [

diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
@@ -78,6 +78,9 @@
   --json-edit-gutter-border-color: #ddd;
   --json-edit-gutter-active-bg: hsl(0, 0%, 87%);
   --json-edit-cursor-color: rgba(45, 55, 72, 0.95);
+  --json-edit-selection-bg: var(--text-secondary-color);
+  --json-edit-tooltip-bg: #f5f5f5;
+  --json-edit-tooltip-border-color: #bbb;
 
   --hl-string: #d14;
   --hl-number: teal;
@@ -169,6 +172,9 @@
   --json-edit-gutter-border-color: transparent;
   --json-edit-gutter-active-bg: var(--input-bg);
   --json-edit-cursor-color: var(--accent-color-d1);
+  --json-edit-selection-bg: var(--accent-color);
+  --json-edit-tooltip-bg: var(--tooltip-bg);
+  --json-edit-tooltip-border-color: var(--input-focus-border);
 
   --hl-string: #ff6088;
   --hl-number: #00aaaa;