update editor background color on dark theme

Author: m-abdelwahab

package-lock.json

@@ -12,6 +12,7 @@
  "@codemirror/commands": "^6.2.4",
  "@codemirror/lang-sql": "^6.4.1",
  "@codemirror/view": "^6.11.1",
+ "@lezer/highlight": "^1.1.4",
  "@neondatabase/serverless": "^0.4.3",
  "@radix-ui/react-accordion": "^1.1.1",
  "@radix-ui/react-dialog": "^1.0.3",
@@ -20,6 +21,7 @@
  "@tanstack/react-query": "^4.29.5",
  "@tanstack/react-table": "^8.9.1",
  "@uiw/codemirror-theme-github": "^4.19.16",
+ "@uiw/codemirror-themes": "^4.20.2",
  "@uiw/react-codemirror": "^4.19.16",
  "@upstash/ratelimit": "^0.4.3",
  "@upstash/redis": "^1.20.6",

package.json

@@ -20,6 +20,45 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTheme } from 'next-themes';
 import { toast } from 'react-hot-toast';
 import { Icon } from './shared/icon';
+import createTheme from '@uiw/codemirror-themes';
+import { tags as t } from '@lezer/highlight';
+
+const myTheme = createTheme({
+ theme: 'dark',
+ settings: {
+ background: '#151718',
+ foreground: '#c9d1d9',
+ caret: '#c9d1d9',
+ selection: '#003d73',
+ selectionMatch: '#003d73',
+ lineHighlight: '#36334280',
+
+ gutterBackground: 'transparent',
+ gutterForeground: 'rgb(155, 161, 166,0.6)',
+ },
+ styles: [
+ { tag: [t.standard(t.tagName), t.tagName], color: '#7ee787' },
+ { tag: [t.comment, t.bracket], color: '#8b949e' },
+ { tag: [t.className, t.propertyName], color: '#d2a8ff' },
+ {
+ tag: [t.variableName, t.attributeName, t.number, t.operator],
+ color: '#79c0ff',
+ },
+ {
+ tag: [t.keyword, t.typeName, t.typeOperator, t.typeName],
+ color: '#ff7b72',
+ },
+ { tag: [t.string, t.meta, t.regexp], color: '#a5d6ff' },
+ { tag: [t.name, t.quote], color: '#7ee787' },
+ { tag: [t.heading], color: '#d2a8ff', fontWeight: 'bold' },
+ { tag: [t.emphasis], color: '#d2a8ff', fontStyle: 'italic' },
+ { tag: [t.deleted], color: '#ffdcd7', backgroundColor: 'ffeef0' },
+ { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#ffab70' },
+ { tag: t.link, textDecoration: 'underline' },
+ { tag: t.strikethrough, textDecoration: 'line-through' },
+ { tag: t.invalid, color: '#f97583' },
+ ],
+});
 
 export const Editor = () => {
  const { resolvedTheme } = useTheme();
@@ -59,7 +98,7 @@ export const Editor = () => {
  return (
  <>
  <CodeMirror
- theme={resolvedTheme === 'dark' ? githubDark : githubLight}
+ theme={resolvedTheme === 'dark' ? myTheme : githubLight}
  value={query}
  basicSetup={{
  defaultKeymap: false,