feat: Add the option to toggle the dark/light color-scheme (#7662)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue

@@ -60,6 +60,17 @@
             </a>
           </router-link>
         </woot-dropdown-item>
+        <woot-dropdown-item>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="appearance"
+            @click="openAppearanceOptions"
+          >
+            {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
+          </woot-button>
+        </woot-dropdown-item>
         <woot-dropdown-item v-if="currentUser.type === 'SuperAdmin'">
           <a
             href="/super_admin"
@@ -145,6 +156,10 @@ export default {
     onClickAway() {
       if (this.show) this.$emit('close');
     },
+    openAppearanceOptions() {
+      const ninja = document.querySelector('ninja-keys');
+      ninja.open({ parent: 'appearance_settings' });
+    },
   },
 };
 </script>