add color highlighting to code editor

package.json

@@ -44,6 +44,7 @@
     "@types/react-dom": "^18.2.19",
     "@types/sortablejs": "^1.15.7",
     "@types/webextension-polyfill": "^0.10.7",
+    "@uiw/codemirror-extensions-color": "^4.21.25",
     "@uiw/codemirror-theme-github": "^4.21.25",
     "@uiw/react-codemirror": "^4.21.25",
     "@vitejs/plugin-react": "^4.2.1",

src/interface/components/CodeEditor.tsx

@@ -1,11 +1,12 @@
 import CodeMirror, { ViewUpdate } from '@uiw/react-codemirror'
 import { githubDark, githubLight } from '@uiw/codemirror-theme-github'
+import { color, colorView, colorTheme } from '@uiw/codemirror-extensions-color';
 import { less } from '@codemirror/lang-less'
 import { useCallback, useEffect, useState } from 'react';
 
 export default function CodeEditor({ callback, initialState }: { callback: (value: string) => void, initialState: string }) {
   const [value, setValue] = useState(initialState)
-  const [darkMode, setDarkMode] = useState(true)
+  const [darkMode, setDarkMode] = useState(false)
 
   useEffect(() => {
     if (document.body.classList.contains('dark')) {
@@ -25,6 +26,6 @@ export default function CodeEditor({ callback, initialState }: { callback: (valu
       foldGutter: false,
       dropCursor: true,
       tabSize: 2
-    }} theme={ darkMode ? githubDark : githubLight } placeholder={"It's time to dream up some code!"} value={value} height="200px" extensions={[less()]} onChange={onChange} />
+    }} theme={ darkMode ? githubDark : githubLight } placeholder={"It's time to dream up some code!"} value={value} height="200px" extensions={[less(), color]} onChange={onChange} />
   )
 }