feat: load dark/light theme for skin

snapshot-labs · Jan 13, 2025 · ea49e08 · ea49e08
1 parent f56edab
commit ea49e08
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 9 deletions.
diff --git a/apps/ui/src/components/App/Topnav.vue b/apps/ui/src/components/App/Topnav.vue
@@ -149,7 +149,7 @@ onUnmounted(() => {
         </template>
       </UiButton>
       <IndicatorPendingTransactions />
-      <UiButton class="!px-0 w-[46px]" @click="toggleSkin">
+      <UiButton class="!px-0 w-[46px]" @click="toggleSkin()">
         <IH-light-bulb v-if="currentMode === 'dark'" class="inline-block" />
         <IH-moon v-else class="inline-block" />
       </UiButton>

diff --git a/apps/ui/src/components/Layout/App.vue b/apps/ui/src/components/Layout/App.vue
@@ -23,6 +23,7 @@ const router = useRouter();
 const uiStore = useUiStore();
 const { modalOpen } = useModal();
 const { init, setAppName, app } = useApp();
+const { DEFAULT_SKIN, toggleSkin } = useUserSkin();
 const { isWhiteLabel, space: whiteLabelSpace } = useWhiteLabel();
 const { setFavicon } = useFavicon();
 const { web3 } = useWeb3();
@@ -70,13 +71,13 @@ const hasTopNav = computed(() => {
   return 'space-editor' !== String(route.matched[1]?.name);
 });
 
-const skinSettings = computed(() => {
+const skinVariables = computed(() => {
   if (!whiteLabelSpace.value?.additionalRawData?.skinSettings) return {};
 
   const colors = clone(whiteLabelSpace.value?.additionalRawData?.skinSettings);
 
   const result = Object.entries(colors).reduce((acc, [colorName, hex]) => {
-    if (!hex) return acc;
+    if (!hex || !colorName.includes('_color')) return acc;
 
     const rgb = hexToRgb(hex.slice(1));
     acc[`--${colorName.replace('_color', '')}`] = `${rgb.r},${rgb.g},${rgb.b}`;
@@ -168,9 +169,14 @@ watch(
 
     setAppName(whiteLabelSpace.value.name);
 
-    css.value = `:root { ${Object.entries(skinSettings.value)
+    css.value = `:root { ${Object.entries(skinVariables.value)
       .map(([key, val]) => `${key}:${val}`)
       .join(';')};  }`;
+
+    toggleSkin(
+      whiteLabelSpace.value.additionalRawData?.skinSettings?.theme ||
+        DEFAULT_SKIN
+    );
   },
   { immediate: true }
 );

diff --git a/apps/ui/src/composables/useUserSkin.ts b/apps/ui/src/composables/useUserSkin.ts
@@ -1,24 +1,29 @@
 type Skin = 'dark' | 'light' | 'none';
 
+const DEFAULT_SKIN: Skin = 'light';
+
 export function useUserSkin() {
   const store = useStorage<Skin>('skin', 'none');
   const currentMode = computed(() =>
-    ['light', 'none'].includes(store.value) ? 'light' : 'dark'
+    [DEFAULT_SKIN, 'none'].includes(store.value) ? DEFAULT_SKIN : 'dark'
   );
 
-  function toggleSkin() {
-    store.value = ['light', 'none'].includes(store.value) ? 'dark' : 'light';
+  function toggleSkin(skin?: Skin) {
+    store.value =
+      skin ||
+      ([DEFAULT_SKIN, 'none'].includes(store.value) ? 'dark' : DEFAULT_SKIN);
   }
 
   watchEffect(() => {
-    if (currentMode.value === 'light') {
+    if (currentMode.value === DEFAULT_SKIN) {
       document.documentElement.classList.remove('dark');
     } else {
       document.documentElement.classList.add('dark');
     }
   });
 
   return {
+    DEFAULT_SKIN,
     currentMode,
     toggleSkin
   };

diff --git a/apps/ui/src/networks/offchain/api/queries.ts b/apps/ui/src/networks/offchain/api/queries.ts
@@ -99,6 +99,7 @@ const SPACE_FRAGMENT = gql`
       border_color
       heading_color
       primary_color
+      theme
     }
     guidelines
     template

diff --git a/apps/ui/src/networks/offchain/index.ts b/apps/ui/src/networks/offchain/index.ts
@@ -9,7 +9,7 @@ import { createApi } from './api';
 import * as constants from './constants';
 
 const HUB_URLS: Partial<Record<NetworkID, string | undefined>> = {
-  s: 'https://hub.snapshot.org/graphql',
+  s: 'http://localhost:3000/graphql',
   's-tn': 'https://testnet.hub.snapshot.org/graphql'
 };
 export const SNAPSHOT_URLS: Partial<Record<NetworkID, string | undefined>> = {

diff --git a/apps/ui/src/types.ts b/apps/ui/src/types.ts
@@ -402,6 +402,7 @@ export type SkinSettings = {
   border_color?: string;
   heading_color?: string;
   primary_color?: string;
+  theme?: string;
 };
 
 export type Drafts = Record<string, Draft>;