diff --git a/src/component/MonacoEditor/index.tsx b/src/component/MonacoEditor/index.tsx
index 44b039504..45c3e4971 100644
--- a/src/component/MonacoEditor/index.tsx
+++ b/src/component/MonacoEditor/index.tsx
@@ -30,6 +30,7 @@ import { apply as markerPluginApply } from './plugins/marker';
 import { getModelService } from './plugins/ob-language/service';
 import logger from '@/util/logger';
 import { getFontSize } from './config';
+import { apply as themeApply } from './plugins/theme';
 export interface IEditor extends monaco.editor.IStandaloneCodeEditor {
   doFormat: () => void;
   getSelectionContent: () => string;
@@ -154,6 +155,7 @@ const MonacoEditor: React.FC<IProps> = function (props) {
       ),
     );
     markerPluginApply(editorRef.current.getModel());
+    themeApply();
     logger.debug('init plugin done');
   }
 
diff --git a/src/component/MonacoEditor/plugins/theme/github.ts b/src/component/MonacoEditor/plugins/theme/github.ts
new file mode 100644
index 000000000..d82fab4da
--- /dev/null
+++ b/src/component/MonacoEditor/plugins/theme/github.ts
@@ -0,0 +1,697 @@
+export const github = {
+  base: 'vs',
+  inherit: true,
+  rules: [
+    {
+      background: 'ffffff',
+      token: '',
+    },
+    {
+      foreground: '6a737d',
+      token: 'comment',
+    },
+    {
+      foreground: '6a737d',
+      token: 'punctuation.definition.comment',
+    },
+    {
+      foreground: '6a737d',
+      token: 'string.comment',
+    },
+    {
+      foreground: '005cc5',
+      token: 'constant',
+    },
+    {
+      foreground: '005cc5',
+      token: 'entity.name.constant',
+    },
+    {
+      foreground: '005cc5',
+      token: 'variable.other.constant',
+    },
+    {
+      foreground: '005cc5',
+      token: 'variable.language',
+    },
+    {
+      foreground: '6f42c1',
+      token: 'entity',
+    },
+    {
+      foreground: '6f42c1',
+      token: 'entity.name',
+    },
+    {
+      foreground: '24292e',
+      token: 'variable.parameter.function',
+    },
+    {
+      foreground: '22863a',
+      token: 'entity.name.tag',
+    },
+    {
+      foreground: 'd73a49',
+      token: 'keyword',
+    },
+    {
+      foreground: 'd73a49',
+      token: 'storage',
+    },
+    {
+      foreground: 'd73a49',
+      token: 'storage.type',
+    },
+    {
+      foreground: '24292e',
+      token: 'storage.modifier.package',
+    },
+    {
+      foreground: '24292e',
+      token: 'storage.modifier.import',
+    },
+    {
+      foreground: '24292e',
+      token: 'storage.type.java',
+    },
+    {
+      foreground: '032f62',
+      token: 'string',
+    },
+    {
+      foreground: '032f62',
+      token: 'punctuation.definition.string',
+    },
+    {
+      foreground: '032f62',
+      token: 'string punctuation.section.embedded source',
+    },
+    {
+      foreground: '005cc5',
+      token: 'support',
+    },
+    {
+      foreground: '005cc5',
+      token: 'meta.property-name',
+    },
+    {
+      foreground: 'e36209',
+      token: 'variable',
+    },
+    {
+      foreground: '24292e',
+      token: 'variable.other',
+    },
+    {
+      foreground: 'b31d28',
+      fontStyle: 'bold italic underline',
+      token: 'invalid.broken',
+    },
+    {
+      foreground: 'b31d28',
+      fontStyle: 'bold italic underline',
+      token: 'invalid.deprecated',
+    },
+    {
+      foreground: 'fafbfc',
+      background: 'b31d28',
+      fontStyle: 'italic underline',
+      token: 'invalid.illegal',
+    },
+    {
+      foreground: 'fafbfc',
+      background: 'd73a49',
+      fontStyle: 'italic underline',
+      token: 'carriage-return',
+    },
+    {
+      foreground: 'b31d28',
+      fontStyle: 'bold italic underline',
+      token: 'invalid.unimplemented',
+    },
+    {
+      foreground: 'b31d28',
+      token: 'message.error',
+    },
+    {
+      foreground: '24292e',
+      token: 'string source',
+    },
+    {
+      foreground: '005cc5',
+      token: 'string variable',
+    },
+    {
+      foreground: '032f62',
+      token: 'source.regexp',
+    },
+    {
+      foreground: '032f62',
+      token: 'string.regexp',
+    },
+    {
+      foreground: '032f62',
+      token: 'string.regexp.character-class',
+    },
+    {
+      foreground: '032f62',
+      token: 'string.regexp constant.character.escape',
+    },
+    {
+      foreground: '032f62',
+      token: 'string.regexp source.ruby.embedded',
+    },
+    {
+      foreground: '032f62',
+      token: 'string.regexp string.regexp.arbitrary-repitition',
+    },
+    {
+      foreground: '22863a',
+      fontStyle: 'bold',
+      token: 'string.regexp constant.character.escape',
+    },
+    {
+      foreground: '005cc5',
+      token: 'support.constant',
+    },
+    {
+      foreground: '005cc5',
+      token: 'support.variable',
+    },
+    {
+      foreground: '005cc5',
+      token: 'meta.module-reference',
+    },
+    {
+      foreground: '735c0f',
+      token: 'markup.list',
+    },
+    {
+      foreground: '005cc5',
+      fontStyle: 'bold',
+      token: 'markup.heading',
+    },
+    {
+      foreground: '005cc5',
+      fontStyle: 'bold',
+      token: 'markup.heading entity.name',
+    },
+    {
+      foreground: '22863a',
+      token: 'markup.quote',
+    },
+    {
+      foreground: '24292e',
+      fontStyle: 'italic',
+      token: 'markup.italic',
+    },
+    {
+      foreground: '24292e',
+      fontStyle: 'bold',
+      token: 'markup.bold',
+    },
+    {
+      foreground: '005cc5',
+      token: 'markup.raw',
+    },
+    {
+      foreground: 'b31d28',
+      background: 'ffeef0',
+      token: 'markup.deleted',
+    },
+    {
+      foreground: 'b31d28',
+      background: 'ffeef0',
+      token: 'meta.diff.header.from-file',
+    },
+    {
+      foreground: 'b31d28',
+      background: 'ffeef0',
+      token: 'punctuation.definition.deleted',
+    },
+    {
+      foreground: '22863a',
+      background: 'f0fff4',
+      token: 'markup.inserted',
+    },
+    {
+      foreground: '22863a',
+      background: 'f0fff4',
+      token: 'meta.diff.header.to-file',
+    },
+    {
+      foreground: '22863a',
+      background: 'f0fff4',
+      token: 'punctuation.definition.inserted',
+    },
+    {
+      foreground: 'e36209',
+      background: 'ffebda',
+      token: 'markup.changed',
+    },
+    {
+      foreground: 'e36209',
+      background: 'ffebda',
+      token: 'punctuation.definition.changed',
+    },
+    {
+      foreground: 'f6f8fa',
+      background: '005cc5',
+      token: 'markup.ignored',
+    },
+    {
+      foreground: 'f6f8fa',
+      background: '005cc5',
+      token: 'markup.untracked',
+    },
+    {
+      foreground: '6f42c1',
+      fontStyle: 'bold',
+      token: 'meta.diff.range',
+    },
+    {
+      foreground: '005cc5',
+      token: 'meta.diff.header',
+    },
+    {
+      foreground: '005cc5',
+      fontStyle: 'bold',
+      token: 'meta.separator',
+    },
+    {
+      foreground: '005cc5',
+      token: 'meta.output',
+    },
+    {
+      foreground: '586069',
+      token: 'brackethighlighter.tag',
+    },
+    {
+      foreground: '586069',
+      token: 'brackethighlighter.curly',
+    },
+    {
+      foreground: '586069',
+      token: 'brackethighlighter.round',
+    },
+    {
+      foreground: '586069',
+      token: 'brackethighlighter.square',
+    },
+    {
+      foreground: '586069',
+      token: 'brackethighlighter.angle',
+    },
+    {
+      foreground: '586069',
+      token: 'brackethighlighter.quote',
+    },
+    {
+      foreground: 'b31d28',
+      token: 'brackethighlighter.unmatched',
+    },
+    {
+      foreground: 'b31d28',
+      token: 'sublimelinter.mark.error',
+    },
+    {
+      foreground: 'e36209',
+      token: 'sublimelinter.mark.warning',
+    },
+    {
+      foreground: '959da5',
+      token: 'sublimelinter.gutter-mark',
+    },
+    {
+      foreground: '032f62',
+      fontStyle: 'underline',
+      token: 'constant.other.reference.link',
+    },
+    {
+      foreground: '032f62',
+      fontStyle: 'underline',
+      token: 'string.other.link',
+    },
+  ],
+  colors: {
+    'editor.foreground': '#24292e',
+    'editor.background': '#ffffff',
+    'editor.selectionBackground': '#c8c8fa',
+    'editor.inactiveSelectionBackground': '#fafbfc',
+    'editor.lineHighlightBackground': '#fafbfc',
+    'editorCursor.foreground': '#24292e',
+    'editorWhitespace.foreground': '#959da5',
+    'editorIndentGuide.background': '#959da5',
+    'editorIndentGuide.activeBackground': '#24292e',
+    'editor.selectionHighlightBorder': '#fafbfc',
+  },
+};
+
+export const githubDark = {
+  base: 'vs',
+  inherit: true,
+  rules: [
+    {
+      background: 'ffffff',
+      token: '',
+    },
+    {
+      foreground: '6a737d',
+      token: 'comment',
+    },
+    {
+      foreground: '6a737d',
+      token: 'punctuation.definition.comment',
+    },
+    {
+      foreground: '6a737d',
+      token: 'string.comment',
+    },
+    {
+      foreground: '005cc5',
+      token: 'constant',
+    },
+    {
+      foreground: '005cc5',
+      token: 'entity.name.constant',
+    },
+    {
+      foreground: '005cc5',
+      token: 'variable.other.constant',
+    },
+    {
+      foreground: '005cc5',
+      token: 'variable.language',
+    },
+    {
+      foreground: '6f42c1',
+      token: 'entity',
+    },
+    {
+      foreground: '6f42c1',
+      token: 'entity.name',
+    },
+    {
+      foreground: '24292e',
+      token: 'variable.parameter.function',
+    },
+    {
+      foreground: '22863a',
+      token: 'entity.name.tag',
+    },
+    {
+      foreground: 'd73a49',
+      token: 'keyword',
+    },
+    {
+      foreground: 'd73a49',
+      token: 'storage',
+    },
+    {
+      foreground: 'd73a49',
+      token: 'storage.type',
+    },
+    {
+      foreground: '24292e',
+      token: 'storage.modifier.package',
+    },
+    {
+      foreground: '24292e',
+      token: 'storage.modifier.import',
+    },
+    {
+      foreground: '24292e',
+      token: 'storage.type.java',
+    },
+    {
+      foreground: '032f62',
+      token: 'string',
+    },
+    {
+      foreground: '032f62',
+      token: 'punctuation.definition.string',
+    },
+    {
+      foreground: '032f62',
+      token: 'string punctuation.section.embedded source',
+    },
+    {
+      foreground: '005cc5',
+      token: 'support',
+    },
+    {
+      foreground: '005cc5',
+      token: 'meta.property-name',
+    },
+    {
+      foreground: 'e36209',
+      token: 'variable',
+    },
+    {
+      foreground: '24292e',
+      token: 'variable.other',
+    },
+    {
+      foreground: 'b31d28',
+      fontStyle: 'bold italic underline',
+      token: 'invalid.broken',
+    },
+    {
+      foreground: 'b31d28',
+      fontStyle: 'bold italic underline',
+      token: 'invalid.deprecated',
+    },
+    {
+      foreground: 'fafbfc',
+      background: 'b31d28',
+      fontStyle: 'italic underline',
+      token: 'invalid.illegal',
+    },
+    {
+      foreground: 'fafbfc',
+      background: 'd73a49',
+      fontStyle: 'italic underline',
+      token: 'carriage-return',
+    },
+    {
+      foreground: 'b31d28',
+      fontStyle: 'bold italic underline',
+      token: 'invalid.unimplemented',
+    },
+    {
+      foreground: 'b31d28',
+      token: 'message.error',
+    },
+    {
+      foreground: '24292e',
+      token: 'string source',
+    },
+    {
+      foreground: '005cc5',
+      token: 'string variable',
+    },
+    {
+      foreground: '032f62',
+      token: 'source.regexp',
+    },
+    {
+      foreground: '032f62',
+      token: 'string.regexp',
+    },
+    {
+      foreground: '032f62',
+      token: 'string.regexp.character-class',
+    },
+    {
+      foreground: '032f62',
+      token: 'string.regexp constant.character.escape',
+    },
+    {
+      foreground: '032f62',
+      token: 'string.regexp source.ruby.embedded',
+    },
+    {
+      foreground: '032f62',
+      token: 'string.regexp string.regexp.arbitrary-repitition',
+    },
+    {
+      foreground: '22863a',
+      fontStyle: 'bold',
+      token: 'string.regexp constant.character.escape',
+    },
+    {
+      foreground: '005cc5',
+      token: 'support.constant',
+    },
+    {
+      foreground: '005cc5',
+      token: 'support.variable',
+    },
+    {
+      foreground: '005cc5',
+      token: 'meta.module-reference',
+    },
+    {
+      foreground: '735c0f',
+      token: 'markup.list',
+    },
+    {
+      foreground: '005cc5',
+      fontStyle: 'bold',
+      token: 'markup.heading',
+    },
+    {
+      foreground: '005cc5',
+      fontStyle: 'bold',
+      token: 'markup.heading entity.name',
+    },
+    {
+      foreground: '22863a',
+      token: 'markup.quote',
+    },
+    {
+      foreground: '24292e',
+      fontStyle: 'italic',
+      token: 'markup.italic',
+    },
+    {
+      foreground: '24292e',
+      fontStyle: 'bold',
+      token: 'markup.bold',
+    },
+    {
+      foreground: '005cc5',
+      token: 'markup.raw',
+    },
+    {
+      foreground: 'b31d28',
+      background: 'ffeef0',
+      token: 'markup.deleted',
+    },
+    {
+      foreground: 'b31d28',
+      background: 'ffeef0',
+      token: 'meta.diff.header.from-file',
+    },
+    {
+      foreground: 'b31d28',
+      background: 'ffeef0',
+      token: 'punctuation.definition.deleted',
+    },
+    {
+      foreground: '22863a',
+      background: 'f0fff4',
+      token: 'markup.inserted',
+    },
+    {
+      foreground: '22863a',
+      background: 'f0fff4',
+      token: 'meta.diff.header.to-file',
+    },
+    {
+      foreground: '22863a',
+      background: 'f0fff4',
+      token: 'punctuation.definition.inserted',
+    },
+    {
+      foreground: 'e36209',
+      background: 'ffebda',
+      token: 'markup.changed',
+    },
+    {
+      foreground: 'e36209',
+      background: 'ffebda',
+      token: 'punctuation.definition.changed',
+    },
+    {
+      foreground: 'f6f8fa',
+      background: '005cc5',
+      token: 'markup.ignored',
+    },
+    {
+      foreground: 'f6f8fa',
+      background: '005cc5',
+      token: 'markup.untracked',
+    },
+    {
+      foreground: '6f42c1',
+      fontStyle: 'bold',
+      token: 'meta.diff.range',
+    },
+    {
+      foreground: '005cc5',
+      token: 'meta.diff.header',
+    },
+    {
+      foreground: '005cc5',
+      fontStyle: 'bold',
+      token: 'meta.separator',
+    },
+    {
+      foreground: '005cc5',
+      token: 'meta.output',
+    },
+    {
+      foreground: '586069',
+      token: 'brackethighlighter.tag',
+    },
+    {
+      foreground: '586069',
+      token: 'brackethighlighter.curly',
+    },
+    {
+      foreground: '586069',
+      token: 'brackethighlighter.round',
+    },
+    {
+      foreground: '586069',
+      token: 'brackethighlighter.square',
+    },
+    {
+      foreground: '586069',
+      token: 'brackethighlighter.angle',
+    },
+    {
+      foreground: '586069',
+      token: 'brackethighlighter.quote',
+    },
+    {
+      foreground: 'b31d28',
+      token: 'brackethighlighter.unmatched',
+    },
+    {
+      foreground: 'b31d28',
+      token: 'sublimelinter.mark.error',
+    },
+    {
+      foreground: 'e36209',
+      token: 'sublimelinter.mark.warning',
+    },
+    {
+      foreground: '959da5',
+      token: 'sublimelinter.gutter-mark',
+    },
+    {
+      foreground: '032f62',
+      fontStyle: 'underline',
+      token: 'constant.other.reference.link',
+    },
+    {
+      foreground: '032f62',
+      fontStyle: 'underline',
+      token: 'string.other.link',
+    },
+  ],
+  colors: {
+    'editor.foreground': '#24292e',
+    'editor.background': '#ffffff',
+    'editor.selectionBackground': '#c8c8fa',
+    'editor.inactiveSelectionBackground': '#fafbfc',
+    'editor.lineHighlightBackground': '#fafbfc',
+    'editorCursor.foreground': '#24292e',
+    'editorWhitespace.foreground': '#959da5',
+    'editorIndentGuide.background': '#959da5',
+    'editorIndentGuide.activeBackground': '#24292e',
+    'editor.selectionHighlightBorder': '#fafbfc',
+  },
+};
diff --git a/src/component/MonacoEditor/plugins/theme/index.ts b/src/component/MonacoEditor/plugins/theme/index.ts
new file mode 100644
index 000000000..f30aaea7f
--- /dev/null
+++ b/src/component/MonacoEditor/plugins/theme/index.ts
@@ -0,0 +1,15 @@
+import * as monaco from 'monaco-editor';
+
+import { github, githubDark } from './github';
+import { monokai } from './monokai';
+
+let loaded = false;
+export function apply() {
+  if (loaded) {
+    return;
+  }
+  monaco.editor.defineTheme('github', github as any);
+  monaco.editor.defineTheme('githubDark', githubDark as any);
+  monaco.editor.defineTheme('monokai', monokai as any);
+  loaded = true;
+}
diff --git a/src/component/MonacoEditor/plugins/theme/monokai.ts b/src/component/MonacoEditor/plugins/theme/monokai.ts
new file mode 100644
index 000000000..16346c47b
--- /dev/null
+++ b/src/component/MonacoEditor/plugins/theme/monokai.ts
@@ -0,0 +1,145 @@
+export const monokai = {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+    {
+      background: '272822',
+      token: '',
+    },
+    {
+      foreground: '75715e',
+      token: 'comment',
+    },
+    {
+      foreground: 'e6db74',
+      token: 'string',
+    },
+    {
+      foreground: 'ae81ff',
+      token: 'constant.numeric',
+    },
+    {
+      foreground: 'ae81ff',
+      token: 'constant.language',
+    },
+    {
+      foreground: 'ae81ff',
+      token: 'constant.character',
+    },
+    {
+      foreground: 'ae81ff',
+      token: 'constant.other',
+    },
+    {
+      foreground: 'f92672',
+      token: 'keyword',
+    },
+    {
+      foreground: 'f92672',
+      token: 'storage',
+    },
+    {
+      foreground: '66d9ef',
+      fontStyle: 'italic',
+      token: 'storage.type',
+    },
+    {
+      foreground: 'a6e22e',
+      fontStyle: 'underline',
+      token: 'entity.name.class',
+    },
+    {
+      foreground: 'a6e22e',
+      fontStyle: 'italic underline',
+      token: 'entity.other.inherited-class',
+    },
+    {
+      foreground: 'a6e22e',
+      token: 'entity.name.function',
+    },
+    {
+      foreground: 'fd971f',
+      fontStyle: 'italic',
+      token: 'variable.parameter',
+    },
+    {
+      foreground: 'f92672',
+      token: 'entity.name.tag',
+    },
+    {
+      foreground: 'a6e22e',
+      token: 'entity.other.attribute-name',
+    },
+    {
+      foreground: '66d9ef',
+      token: 'support.function',
+    },
+    {
+      foreground: '66d9ef',
+      token: 'support.constant',
+    },
+    {
+      foreground: '66d9ef',
+      fontStyle: 'italic',
+      token: 'support.type',
+    },
+    {
+      foreground: '66d9ef',
+      fontStyle: 'italic',
+      token: 'support.class',
+    },
+    {
+      foreground: 'f8f8f0',
+      background: 'f92672',
+      token: 'invalid',
+    },
+    {
+      foreground: 'f8f8f0',
+      background: 'ae81ff',
+      token: 'invalid.deprecated',
+    },
+    {
+      foreground: 'cfcfc2',
+      token: 'meta.structure.dictionary.json string.quoted.double.json',
+    },
+    {
+      foreground: '75715e',
+      token: 'meta.diff',
+    },
+    {
+      foreground: '75715e',
+      token: 'meta.diff.header',
+    },
+    {
+      foreground: 'f92672',
+      token: 'markup.deleted',
+    },
+    {
+      foreground: 'a6e22e',
+      token: 'markup.inserted',
+    },
+    {
+      foreground: 'e6db74',
+      token: 'markup.changed',
+    },
+    {
+      foreground: 'ae81ffa0',
+      token: 'constant.numeric.line-number.find-in-files - match',
+    },
+    {
+      foreground: 'e6db74',
+      token: 'entity.name.filename.find-in-files',
+    },
+  ],
+  colors: {
+    'editor.foreground': '#F8F8F2',
+    'editor.background': '#272822',
+    'editor.selectionBackground': '#49483E',
+    'editor.lineHighlightBackground': '#3E3D32',
+    'editorCursor.foreground': '#F8F8F0',
+    'editorWhitespace.foreground': '#3B3A32',
+    'editorIndentGuide.activeBackground': '#9D550FB0',
+    'editor.selectionHighlightBorder': '#222218',
+  },
+};
+export const monokaiDark = monokai;
diff --git a/src/component/ODCSetting/config/editor.tsx b/src/component/ODCSetting/config/editor.tsx
index 73707b810..0ec8d8a38 100644
--- a/src/component/ODCSetting/config/editor.tsx
+++ b/src/component/ODCSetting/config/editor.tsx
@@ -2,6 +2,7 @@ import RadioItem from '../Item/RadioItem';
 import { IODCSetting, ODCSettingGroup } from '../config';
 import InputItem from '../Item/InputItem';
 import KeymapInput from '@/component/Input/Keymap';
+import SelectItem from '../Item/SelectItem';
 
 const editorGroup: ODCSettingGroup = {
   label: '编辑器',
@@ -25,7 +26,7 @@ const editorSettings: IODCSetting[] = [
     storeType: 'server',
     render: (value, onChange) => {
       return (
-        <RadioItem
+        <SelectItem
           options={[
             {
               label: 'OceanBase',
@@ -35,6 +36,18 @@ const editorSettings: IODCSetting[] = [
               label: 'VSCode',
               value: 'VSCode',
             },
+            {
+              label: 'VSCode-HC',
+              value: 'VSCode-HC',
+            },
+            {
+              label: 'GitHub',
+              value: 'GitHub',
+            },
+            {
+              label: 'Monokai',
+              value: 'Monokai',
+            },
           ]}
           value={value}
           onChange={onChange}
diff --git a/src/store/setting.ts b/src/store/setting.ts
index c14f34aa5..366deb862 100644
--- a/src/store/setting.ts
+++ b/src/store/setting.ts
@@ -52,6 +52,9 @@ const themeConfig: { [key: string]: IThemeConfig } = {
     editorTheme: {
       VSCode: 'vs',
       OceanBase: 'obwhite',
+      'VSCode-HC': 'hc-light',
+      GitHub: 'github',
+      Monokai: 'vs',
     },
     className: 'odc-white',
     sheetTheme: 'white',
@@ -64,6 +67,9 @@ const themeConfig: { [key: string]: IThemeConfig } = {
     editorTheme: {
       VSCode: 'vs-dark',
       OceanBase: 'obdark',
+      'VSCode-HC': 'hc-dark',
+      GitHub: 'githubDark',
+      Monokai: 'monokai',
     },
     className: 'odc-dark',
     sheetTheme: 'dark',