feat: add custom monaco editor theme
This commit is contained in:
parent
6b1fcb3779
commit
379bb5e623
|
@ -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',
|
||||
})
|
||||
}
|
||||
},
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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: {},
|
||||
})
|
||||
}
|
Loading…
Reference in New Issue