use xcode theme for light and add more coloring

package.json

@@ -41,6 +41,7 @@
         "@types/diff": "^5.0.2",
         "@uiw/codemirror-extensions-events": "^4.23.6",
         "@uiw/codemirror-theme-monokai": "^4.23.6",
+        "@uiw/codemirror-theme-xcode": "^4.23.6",
         "@uiw/codemirror-themes": "^4.23.5",
         "@uiw/react-codemirror": "^4.23.5",
         "@welldone-software/why-did-you-render": "^6.1.1",

querybook/webapp/components/QueryEditor/QueryEditor.tsx

@@ -35,7 +35,7 @@ import { TableToken } from 'lib/sql-helper/sql-lexer';
 import { navigateWithinEnv } from 'lib/utils/query-string';
 import { IconButton } from 'ui/Button/IconButton';
 
-import { CustomMonokaiDarkTheme } from './monokai';
+import { CustomMonokaiDarkTheme, CustomXcodeTheme } from './themes';
 
 import './QueryEditor.scss';
 
@@ -436,7 +436,11 @@ export const QueryEditor: React.FC<
                 {floatButtons}
                 <CodeMirror
                     ref={editorRef}
-                    theme={theme === 'dark' ? CustomMonokaiDarkTheme : 'light'}
+                    theme={
+                        theme === 'dark'
+                            ? CustomMonokaiDarkTheme
+                            : CustomXcodeTheme
+                    }
                     className="ReactCodeMirror"
                     value={value}
                     height="100%"

querybook/webapp/components/QueryEditor/themes.ts

@@ -0,0 +1,22 @@
+import { monokaiInit } from '@uiw/codemirror-theme-monokai';
+import { tags as t } from '@lezer/highlight';
+import { xcodeLightInit } from '@uiw/codemirror-theme-xcode';
+
+export const CustomMonokaiDarkTheme = monokaiInit({
+    settings: {},
+    styles: [
+        { tag: [t.name], color: 'var(--text-dark)' },
+        { tag: [t.constant(t.name), t.standard(t.name)], color: '#FD971F' },
+    ],
+});
+
+export const CustomXcodeTheme = xcodeLightInit({
+    settings: {
+        background: 'var(--bg-color)',
+        gutterBackground: 'var(--bg-color)',
+    },
+    styles: [
+        { tag: [t.special(t.propertyName)], color: '#327A9E' },
+        { tag: [t.constant(t.name), t.standard(t.name)], color: '#D23423' },
+    ],
+});