dark mode

SenseNet · Nov 16, 2023 · a22b804 · a22b804
1 parent 2219aef
commit a22b804
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/apps/sensenet/src/components/field-controls/html-editor.tsx b/apps/sensenet/src/components/field-controls/html-editor.tsx
@@ -1,7 +1,7 @@
 /**
  * @module FieldControls
  */
-import { InputLabel } from '@material-ui/core'
+import { InputLabel, useTheme } from '@material-ui/core'
 import { changeTemplatedValue, ReactClientFieldSetting } from '@sensenet/controls-react'
 import React, { useState } from 'react'
 import MonacoEditor from 'react-monaco-editor'
@@ -14,6 +14,7 @@ export const HtmlEditor: React.FC<ReactClientFieldSetting> = (props) => {
   const initialState =
     props.fieldValue || (props.actionName === 'new' && changeTemplatedValue(props.settings.DefaultValue)) || ''
   const [value, setValue] = useState(initialState)
+  const theme = useTheme()
 
   const readonly = props.actionName === 'browse' || props.settings.ReadOnly
 
@@ -69,6 +70,17 @@ export const HtmlEditor: React.FC<ReactClientFieldSetting> = (props) => {
             showWords: true,
           },
         }}
+        theme={theme.palette.type === 'dark' ? 'admin-ui-dark' : 'vs-light'}
+        editorWillMount={(monaco) => {
+          monaco.editor.defineTheme('admin-ui-dark', {
+            base: 'vs-dark',
+            inherit: true,
+            rules: [],
+            colors: {
+              'editor.background': '#121212',
+            },
+          })
+        }}
       />
     </>
   )