Updates to theme and tutorials

components/v2/navbar.vue

@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="sticky top-0 left-0 right-0 z-10 text-gray-800 shadow-lg dark:shadow-dark bg-gray-50 dark:bg-gray-900 dark:text-gray-50"
+    class="sticky top-0 left-0 right-0 z-10 text-gray-800 shadow-lg  dark:shadow-dark bg-gray-50 dark:bg-gray-900 dark:text-gray-50"
   >
     <div class="container flex items-center py-4 m-auto">
       <div
@@ -66,8 +66,10 @@
           <slot name="right" />
           <button
             type="button"
-            class="inline-flex items-center justify-center ml-4 bg-transparent border-2 border-gray-700 rounded-full shadow-lg w-9 h-9 active:scale-y-75 hover:scale-105 hover:shadow-lg"
-            aria-label="Toggle Dark Mode"
+            class="inline-flex items-center justify-center ml-4 bg-transparent border-2 border-gray-700 rounded-full shadow-lg  w-9 h-9 active:scale-y-75 hover:scale-105 hover:shadow-lg"
+            :aria-label="
+              darkMode ? 'Switch to light theme' : 'Switch to dark theme'
+            "
             @click="toggleDarkMode"
           >
             <svg
@@ -173,19 +175,24 @@ export default Vue.extend({
   },
   mounted() {
     if (darkMode === null) {
-      darkMode = this.$cookies.isDarkMode
+      this.darkMode = darkMode = 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')
   },
   methods: {
     toggleDarkMode() {
-      darkMode = !darkMode
-      document.documentElement.classList[darkMode ? 'add' : 'remove']('dark')
-      document.cookie = `darkMode=${darkMode}; Secure; max-age=31536000; path=/;`
+      const currentDarkMode = this.darkMode
+      document.documentElement.classList[!currentDarkMode ? 'add' : 'remove'](
+        'dark'
+      )
+      document.cookie = `darkMode=${!currentDarkMode}; Secure; max-age=31536000; path=/;`
+      this.$store.commit('theme/set', !currentDarkMode)
+      this.darkMode = !currentDarkMode
     },
   },
 })

helpers/driverjsTutorials.ts

@@ -90,19 +90,22 @@ const diffTutorials: TutorialMetadata[] = [
   },
 ]
 
+const comparePageTutorials: TutorialMetadata[] = [
+  {
+    tutorial: labelsTutorial,
+    cookieName: 'isSkipTutorial',
+  },
+  {
+    tutorial: submitShortcutTutorial,
+    cookieName: 'isSkipSubmitKbdShortcutTutorial',
+  },
+]
+
 const tutorialsMetadata: TutorialsMetadata = {
   '/v1/diff': diffTutorials,
-  'v2/diff': diffTutorials,
-  '/': [
-    {
-      tutorial: labelsTutorial,
-      cookieName: 'isSkipTutorial',
-    },
-    {
-      tutorial: submitShortcutTutorial,
-      cookieName: 'isSkipSubmitKbdShortcutTutorial',
-    },
-  ],
+  '/v2/diff': diffTutorials,
+  '/': comparePageTutorials,
+  '/v2': comparePageTutorials,
 }
 
 export default async function showTutorials(

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
+  }
+}