feat: add custom monaco editor theme

This commit is contained in:
Lykin 2023-11-29 01:12:23 +08:00
parent 6b1fcb3779
commit 379bb5e623
3 changed files with 25 additions and 4 deletions

View File

@ -57,6 +57,7 @@ onMounted(async () => {
const { fontSize, fontFamily = undefined } = pref.generalFont
editorNode = monaco.editor.create(editorRef.value, {
// value: props.content,
theme: pref.isDark ? 'rdm-dark' : 'rdm-light',
language: props.language,
lineNumbers: props.showLineNum ? 'on' : 'off',
readOnly: readonlyValue.value,
@ -133,7 +134,7 @@ watch(
(dark) => {
if (editorNode != null) {
editorNode.updateOptions({
theme: dark ? 'vs-dark' : 'vs',
theme: dark ? 'rdm-dark' : 'rdm-light',
})
}
},

View File

@ -9,7 +9,7 @@ import { i18n } from '@/utils/i18n.js'
import { setupDiscreteApi } from '@/utils/discrete.js'
import usePreferencesStore from 'stores/preferences.js'
import { loadEnvironment } from '@/utils/platform.js'
import { setupMonacoWorker } from '@/utils/monaco_worker.js'
import { setupMonaco } from '@/utils/monaco.js'
dayjs.extend(duration)
dayjs.extend(relativeTime)
@ -20,7 +20,7 @@ async function setupApp() {
app.use(createPinia())
await loadEnvironment()
setupMonacoWorker()
setupMonaco()
const prefStore = usePreferencesStore()
await prefStore.loadPreferences()
await setupDiscreteApi()

View File

@ -1,9 +1,10 @@
import * as monaco from 'monaco-editor'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
export const setupMonacoWorker = () => {
export const setupMonaco = () => {
window.MonacoEnvironment = {
getWorker: (_, label) => {
switch (label) {
@ -20,4 +21,23 @@ export const setupMonacoWorker = () => {
}
},
}
// setup light theme
monaco.editor.defineTheme('rdm-light', {
base: 'vs',
inherit: true,
rules: [],
colors: {
'editorLineNumber.foreground': '#BABBBD',
'editorLineNumber.activeForeground': '#777D83',
},
})
// setup dark theme
monaco.editor.defineTheme('rdm-dark', {
base: 'vs-dark',
inherit: true,
rules: [],
colors: {},
})
}