Having issue with the theme

[ramiy]

Having issues with the dark theme (vs-dark). Empty and small files are loaded with the dark them, large files loaded with the default white theme.

This is <TheEditor> component. I removed lots of code from the original component for demonstration purpose. Note that it does not uses v-model, instead it uses value and @change to interact with VueX store:

<template>
  <div class="the-editor">
    <MonacoEditor
      class="editor"
      :theme="codeEditor.theme"
      :language="codeEditor.language"
      :options="codeEditor.options"
      :value="codeEditor.content"
      @change="updateFile"
    />
  </div>
</template>

<script>
import MonacoEditor from 'vue-monaco';

export default {
  name: 'TheEditor',
  components: { MonacoEditor },
  computed: {
    code() {
      return this.$store.getters.code;
    },
    isEditMode() {
      return this.$store.getters.isEditMode;
    },
    codeEditor() {
      return {
        theme: 'vs-dark',
        language: this.code.language,
        content: this.code.content || '',
        options: {
          automaticLayout: true,
          readOnly: !this.isEditMode,
        },
      };
    },
  },
  methods: {
    updateFile(newVal) {
      const newFile = { ...this.code, content: newVal || '' };
      this.$store.commit({ type: 'updateFile', file: newFile });
    },
  },
};
</script>

<style lang="scss">
.the-editor{

  .editor {
    width: 100%;
    height: 100%;
  }
}
</style>

With the following vue.config.js file:

module.exports = {
  productionSourceMap: false,
  lintOnSave: false,
  configureWebpack: {
    node: {
      process: false, // Fix copy & paste bug
      module: 'empty', // Fix build warning
      fs: 'empty', // Fix build warning
    },
    plugins: [
      new MonocoEditorPlugin(),
    ],
  },
};

In any case, the dark theme CSS is not always loaded. Do you see why it happens?

[LiamKarlMitchell]

My theme won't load at all, not sure if I am doing this right.

<monaco-editor class="editor" v-model="grammar" language="javascript" :options="editorOptions">
</monaco-editor>

  data() {
    return {
      editorOptions: {
        selectOnLineNumbers: true,
        theme: 'vs-dark'
      },
      grammar: `grammar:
  }

It does work when I set the attribute theme="vs-dark"

But was hoping to do it from options.