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
|
const { fontSize, fontFamily = undefined } = pref.generalFont
|
||||||
editorNode = monaco.editor.create(editorRef.value, {
|
editorNode = monaco.editor.create(editorRef.value, {
|
||||||
// value: props.content,
|
// value: props.content,
|
||||||
|
theme: pref.isDark ? 'rdm-dark' : 'rdm-light',
|
||||||
language: props.language,
|
language: props.language,
|
||||||
lineNumbers: props.showLineNum ? 'on' : 'off',
|
lineNumbers: props.showLineNum ? 'on' : 'off',
|
||||||
readOnly: readonlyValue.value,
|
readOnly: readonlyValue.value,
|
||||||
|
@ -133,7 +134,7 @@ watch(
|
||||||
(dark) => {
|
(dark) => {
|
||||||
if (editorNode != null) {
|
if (editorNode != null) {
|
||||||
editorNode.updateOptions({
|
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 { setupDiscreteApi } from '@/utils/discrete.js'
|
||||||
import usePreferencesStore from 'stores/preferences.js'
|
import usePreferencesStore from 'stores/preferences.js'
|
||||||
import { loadEnvironment } from '@/utils/platform.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(duration)
|
||||||
dayjs.extend(relativeTime)
|
dayjs.extend(relativeTime)
|
||||||
|
@ -20,7 +20,7 @@ async function setupApp() {
|
||||||
app.use(createPinia())
|
app.use(createPinia())
|
||||||
|
|
||||||
await loadEnvironment()
|
await loadEnvironment()
|
||||||
setupMonacoWorker()
|
setupMonaco()
|
||||||
const prefStore = usePreferencesStore()
|
const prefStore = usePreferencesStore()
|
||||||
await prefStore.loadPreferences()
|
await prefStore.loadPreferences()
|
||||||
await setupDiscreteApi()
|
await setupDiscreteApi()
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
|
import * as monaco from 'monaco-editor'
|
||||||
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
|
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
|
||||||
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.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 cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
|
||||||
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
|
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
|
||||||
|
|
||||||
export const setupMonacoWorker = () => {
|
export const setupMonaco = () => {
|
||||||
window.MonacoEnvironment = {
|
window.MonacoEnvironment = {
|
||||||
getWorker: (_, label) => {
|
getWorker: (_, label) => {
|
||||||
switch (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