Theme selector for the viewer UI

ltouroumov · Oct 21, 2024 · bef4474 · bef4474
1 parent 5111748
commit bef4474
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 18 deletions.
diff --git a/components/viewer/utils/ViewerSettings.vue b/components/viewer/utils/ViewerSettings.vue
@@ -2,17 +2,35 @@
   <div>
     <h5 class="text-center">Viewer</h5>
     <ul class="list-group mb-5 shadow">
+      <li
+        class="list-group-item d-flex justify-content-between align-items-center"
+      >
+        <div class="form-check form-switch">
+          <input
+            id="lightThemeUI"
+            v-model="lightThemeUI"
+            class="form-check-input me-1"
+            type="checkbox"
+            role="switch"
+          />
+          <label class="form-check-label" for="lightThemeUI">
+            Light Theme UI
+            <small class="text-body-secondary ms-3">
+              When enabled, the viewer UI will use the light theme.
+            </small>
+          </label>
+        </div>
+      </li>
       <li
         class="list-group-item d-flex justify-content-between align-items-center"
       >
         <div class="form-check form-switch">
           <input
             id="hideDisabledAddons"
+            v-model="disabledAddons"
             class="form-check-input me-1"
             type="checkbox"
             role="switch"
-            :checked="disabledAddons"
-            @change="toggleHideDisabledAddons()"
           />
           <label class="form-check-label" for="hideDisabledAddons">
             Hide Disabled Addons
@@ -49,11 +67,10 @@
         <div class="form-check form-switch">
           <input
             id="showDisabledAddons"
+            v-model="disabledAddonsInBackpack"
             class="form-check-input me-1"
             type="checkbox"
             role="switch"
-            :checked="disabledAddonsInBackpack"
-            @change="toggleDisabledAddonsInBackpack()"
           />
           <label class="form-check-label">
             Show Disabled Addons
@@ -69,11 +86,10 @@
         <div class="form-check form-switch">
           <input
             id="lockBackpackObjects"
+            v-model="lockBackpackObjects"
             class="form-check-input me-1"
             type="checkbox"
             role="switch"
-            :checked="lockBackpackObjects"
-            @change="toggleLockBackpackObjects()"
           />
           <label class="form-check-label" for="lockBackpackObjects">
             Lock Objects in Backpack
@@ -85,7 +101,7 @@
 </template>
 
 <script setup lang="ts">
-import { useSettingRefs, useSettingStore } from '~/composables/store/settings';
+import { useSettingRefs } from '~/composables/store/settings';
 import { useViewerRefs } from '~/composables/store/viewer';
 
 const { viewerProjectList } = useViewerRefs();
@@ -98,11 +114,10 @@ const cyoaPreferences = computed({
 
 const projectList = computed(() => viewerProjectList.value);
 
-const { disabledAddons, disabledAddonsInBackpack, lockBackpackObjects } =
-  useSettingRefs();
 const {
-  toggleHideDisabledAddons,
-  toggleDisabledAddonsInBackpack,
-  toggleLockBackpackObjects,
-} = useSettingStore();
+  disabledAddons,
+  disabledAddonsInBackpack,
+  lockBackpackObjects,
+  lightThemeUI,
+} = useSettingRefs();
 </script>
diff --git a/composables/store/settings.ts b/composables/store/settings.ts
@@ -8,6 +8,7 @@ export const useSettingStore = defineStore(
     const disabledAddonsInBackpack = ref<boolean>(true);
     const lockBackpackObjects = ref<boolean>(true);
     const cyoaPreference = ref<string>('');
+    const lightThemeUI = ref<boolean>(false);
 
     const hasPreference = (): boolean => {
       return R.isNotEmpty(cyoaPreference.value);
@@ -30,6 +31,7 @@ export const useSettingStore = defineStore(
       disabledAddonsInBackpack,
       lockBackpackObjects,
       cyoaPreference,
+      lightThemeUI,
       hasPreference,
       toggleLockBackpackObjects,
       toggleDisabledAddonsInBackpack,

diff --git a/pages/index.vue b/pages/index.vue
@@ -11,21 +11,26 @@
 import { definePageMeta } from '#imports';
 import ProjectViewWrapper from '~/components/viewer/ProjectViewWrapper.vue';
 import { useProjectRefs } from '~/composables/store/project';
+import { useSettingRefs } from '~/composables/store/settings';
 import { useViewerRefs } from '~/composables/store/viewer';
 
 const { store, buildModified } = useProjectRefs();
 const { viewerProjectList } = useViewerRefs();
+const { lightThemeUI } = useSettingRefs();
 
 const projectList = computed(() => viewerProjectList.value);
 
 definePageMeta({
   layout: false,
 });
-useHead({
-  bodyAttrs: {
-    'data-bs-theme': 'dark',
-  },
-});
+
+function setBodyTheme(lightTheme: boolean) {
+  if (lightTheme) {
+    document.body.setAttribute('data-bs-theme', 'light');
+  } else {
+    document.body.setAttribute('data-bs-theme', 'dark');
+  }
+}
 
 onMounted(() => {
   window.addEventListener('beforeunload', (event: BeforeUnloadEvent) => {
@@ -36,7 +41,18 @@ onMounted(() => {
       return false;
     }
   });
+
+  const lightTheme = lightThemeUI.value;
+  console.log('LT', lightTheme);
+  setBodyTheme(lightTheme);
 });
+
+watch(
+  () => lightThemeUI.value,
+  (newValue: boolean) => {
+    setBodyTheme(newValue);
+  },
+);
 </script>
 
 <style lang="scss">