fix(theme): changing monaco editor theme programatically on theme change

Author: technikhil314

components/v2/navbar.vue

@@ -176,9 +176,10 @@ export default Vue.extend({
   mounted() {
     if (darkMode === null) {
       this.darkMode = darkMode = this.$cookies.isDarkMode
-      if (this.$cookies.isDarkMode) {
+      if (darkMode) {
         document.documentElement.classList.add('dark')
         document.cookie = `darkMode=${darkMode}; Secure; max-age=31536000; path=/;`
+        this.$store.commit('theme/set', darkMode)
       }
     }
     document.documentElement.classList.remove('hidden')
@@ -190,6 +191,7 @@ export default Vue.extend({
         'dark'
       )
       document.cookie = `darkMode=${!currentDarkMode}; Secure; max-age=31536000; path=/;`
+      this.$store.commit('theme/set', !currentDarkMode)
       this.darkMode = !currentDarkMode
     },
   },

pages/v2/diff.vue

@@ -1,44 +1,21 @@
 <template>
   <div class="page-contents">
+    <!-- Following hidden input is hacky way to update monaco editor theme when user changes theme manually -->
+    <input type="hidden" inert :value="onThemeChange" />
     <Navbar :show-back-button="true" />
     <main class="outline-none" tabindex="0">
       <DiffActionBar :diff-navigator="diffNavigator" />
       <section
-        class="
-          flex
-          items-stretch
-          flex-wrap
-          w-full
-          gap-4
-          font-mono
-          text-gray-800
-          dark:text-gray-50
-        "
+        class="flex flex-wrap items-stretch w-full gap-4 font-mono text-gray-800  dark:text-gray-50"
       >
-        <div class="flex space-around w-full gap-4">
+        <div class="flex w-full gap-4 space-around">
           <p
-            class="
-              flex-grow-0 flex-shrink-0
-              w-1/2
-              text-lg
-              font-bold
-              text-center
-              capitalize
-              break-all
-            "
+            class="flex-grow-0 flex-shrink-0 w-1/2 text-lg font-bold text-center capitalize break-all "
           >
             <span class="inline-block w-4/5">{{ lhsLabel }}</span>
           </p>
           <p
-            class="
-              flex-grow-0 flex-shrink-0
-              w-1/2
-              text-lg
-              font-bold
-              text-center
-              capitalize
-              break-all
-            "
+            class="flex-grow-0 flex-shrink-0 w-1/2 text-lg font-bold text-center capitalize break-all "
           >
             <span class="inline-block w-4/5">{{ rhsLabel }}</span>
           </p>
@@ -76,6 +53,13 @@ export default Vue.extend({
       diffNavigator: {},
     }
   },
+  computed: {
+    onThemeChange() {
+      const theme = this.$store.state.theme.darkMode ? 'vs-dark' : 'light'
+      this.monacoDiffEditor?.updateOptions?.({ theme })
+      return this.$store.state.theme.darkMode
+    },
+  },
   beforeMount() {
     const _diff = this.$route.hash
     if (_diff) {

pages/v2/index.vue

@@ -1,6 +1,9 @@
+n
 <template>
   <div class="page-contents">
     <Navbar />
+    <!-- Following hidden input is hacky way to update monaco editor theme when user changes theme manually -->
+    <input type="hidden" inert :value="onThemeChange" />
     <main class="text-gray-800 outline-none dark:text-gray-50" tabindex="0">
       <section>
         <header>
@@ -54,23 +57,7 @@
         <div class="self-end flex-grow-0 w-full mt-4 text-center">
           <button
             id="submitButton"
-            class="
-              inline-flex
-              items-center
-              justify-center
-              w-48
-              px-4
-              py-2
-              transition-transform
-              transform
-              bg-blue-600
-              rounded-md
-              shadow-lg
-              outline-none
-              text-gray-50
-              focus:ring-4
-              active:scale-y-75
-            "
+            class="inline-flex items-center justify-center w-48 px-4 py-2 transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none  text-gray-50 focus:ring-4 active:scale-y-75"
             aria-label="Click here to compare the inputted text blocks"
           >
             Compare
@@ -101,6 +88,14 @@ export default Vue.extend({
       rhsEditor: null,
     }
   },
+  computed: {
+    onThemeChange() {
+      const theme = this.$store.state.theme.darkMode ? 'vs-dark' : 'light'
+      this.lhsEditor?.updateOptions({ theme })
+      this.rhsEditor?.updateOptions({ theme })
+      return this.$store.state.theme.darkMode
+    },
+  },
   mounted() {
     showTutorials(this.$cookies, this.$route.path, this.$cookies.isDarkMode)
     document.addEventListener('keydown', this.handleCtrlEnter)
@@ -121,7 +116,7 @@ export default Vue.extend({
         this.rhsEditor = monaco.editor.create(rhs, {
           ...monacoEditorOptions,
           value: this.rhs || '',
-          wordWrap: 'on'
+          wordWrap: 'on',
         })
       }
     })

store/theme.ts

@@ -0,0 +1,20 @@
+import { GetterTree, MutationTree } from 'vuex/types'
+
+export const state = () => ({
+  darkMode: false
+})
+
+export type themeStore = ReturnType<typeof state>
+
+export const getters: GetterTree<themeStore, themeStore> = {
+  isEnabled: (state) => state.darkMode,
+}
+
+export const mutations: MutationTree<themeStore> = {
+  toggle(state) {
+    state.darkMode = !state.darkMode
+  },
+  set(state, value) {
+    state.darkMode = value
+  }
+}