save codemirror theme preferences into localstorage

src/pages/oj/components/CodeMirror.vue

@@ -18,7 +18,7 @@
       <Col :span=12>
       <div class="fl-right">
         <span>Theme:</span>
-        <Select v-model="options.theme" @on-change="onThemeChange" class="adjust">
+        <Select :value="theme" @on-change="onThemeChange" class="adjust">
           <Option v-for="item in themes" :key="item.label" :value="item.value">{{item.label}}
           </Option>
         </Select>
@@ -70,6 +70,10 @@
       language: {
         type: String,
         default: 'C++'
+      },
+      theme: {
+        type: String,
+        default: 'material'
       }
     },
     data () {
@@ -120,6 +124,7 @@
       },
       onThemeChange (newTheme) {
         this.editor.setOption('theme', newTheme)
+        this.$emit('changeTheme', newTheme)
       },
       onResetClick () {
         this.$emit('resetCode')
@@ -130,6 +135,11 @@
         // get current editor object
         return this.$refs.myEditor.editor
       }
+    },
+    watch: {
+      'theme' (newVal, oldVal) {
+        this.editor.setOption('theme', newVal)
+      }
     }
   }
 </script>

src/pages/oj/views/problem/Problem.vue

@@ -53,7 +53,9 @@
         <CodeMirror :value.sync="code"
                     :languages="problem.languages"
                     :language="language"
+                    :theme="theme"
                     @resetCode="onResetToTemplate"
+                    @changeTheme="onChangeTheme"
                     @changeLang="onChangeLang"></CodeMirror>
         <Row type="flex" justify="space-between">
           <Col :span="10">
@@ -224,6 +226,7 @@
         submitting: false,
         code: '',
         language: 'C++',
+        theme: 'solarized',
         submissionId: '',
         result: {
           result: 9
@@ -255,6 +258,7 @@
         next(vm => {
           vm.language = problemCode.language
           vm.code = problemCode.code
+          vm.theme = problemCode.theme
         })
       } else {
         next()
@@ -343,6 +347,9 @@
         }
         this.language = newLang
       },
+      onChangeTheme (newTheme) {
+        this.theme = newTheme
+      },
       onResetToTemplate () {
         this.$Modal.confirm({
           content: 'Are you sure you want to reset your code?',
@@ -478,7 +485,8 @@
       this.$store.commit(types.CHANGE_CONTEST_ITEM_VISIBLE, {menu: true})
       storage.set(buildProblemCodeKey(this.problem._id, from.params.contestID), {
         code: this.code,
-        language: this.language
+        language: this.language,
+        theme: this.theme
       })
       next()
     },