feat: theme setting

store/callback.ts

@@ -29,18 +29,17 @@ export const useCallbackStore = defineStore('callback', () => {
       ...payload,
       sender: window.location.href,
     });
-    // @todo don't save to store
     encryptedMessage.value = AES.encrypt(stringifiedData, encryptKey).toString();
     // build and go to url
     const destinationUrl = new URL(url);
     console.debug('[send]', encryptedMessage.value, url);
     destinationUrl.searchParams.set('data', encryptedMessage.value);
-    window.location.href = destinationUrl;
+    window.location.href = destinationUrl.toString();
   };
 
   const watcher = () => {
     console.debug('[watcher]');
-    const currentUrl = new URL(window.location);
+    const currentUrl = new URL(window.location.toString());
     const callbackValue = currentUrl.searchParams.get('data');
     console.debug('[watcher]', { callbackValue });
     if (!callbackValue) {

store/server.ts

@@ -4,6 +4,7 @@ import { ArrowRightOnRectangleIcon, GlobeAltIcon, KeyIcon } from '@heroicons/vue
 import { useAccountStore } from './account';
 import { usePurchaseStore } from "./purchase";
 import { useTrialStore } from './trial';
+import { useThemeStore } from './theme';
 import type {
   Server,
   ServerAccountCallbackSendPayload,
@@ -12,6 +13,7 @@ import type {
   ServerStateData,
   ServerStateDataAction,
 } from '~/types/server';
+import type { Theme } from '~/types/theme';
 /**
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
@@ -21,6 +23,7 @@ setActivePinia(createPinia());
 export const useServerStore = defineStore('server', () => {
   const accountStore = useAccountStore();
   const purchaseStore = usePurchaseStore();
+  const themeStore = useThemeStore();
   const trialStore = useTrialStore();
   /**
    * State
@@ -47,6 +50,7 @@ export const useServerStore = defineStore('server', () => {
   const regGuid = ref<string>('');
   const site = ref<string>('');
   const state = ref<string>(''); // @todo implement ServerState ENUM
+  const theme = ref<Theme>();
   const uptime = ref<number>(0);
   const username = ref<string>(''); // @todo potentially move to a user store
   const wanFQDN = ref<string>('');
@@ -83,6 +87,7 @@ export const useServerStore = defineStore('server', () => {
       regGuid: regGuid.value,
       site: site.value,
       state: state.value,
+      theme: theme.value,
       uptime: uptime.value,
       username: username.value,
       wanFQDN: wanFQDN.value,
@@ -409,12 +414,17 @@ export const useServerStore = defineStore('server', () => {
     if (typeof data?.regGuid !== 'undefined') regGuid.value = data.regGuid;
     if (typeof data?.site !== 'undefined') site.value = data.site;
     if (typeof data?.state !== 'undefined') state.value = data.state;
+    if (typeof data?.theme !== 'undefined') theme.value = data.theme;
     if (typeof data?.uptime !== 'undefined') uptime.value = data.uptime;
     if (typeof data?.username !== 'undefined') username.value = data.username;
     if (typeof data?.wanFQDN !== 'undefined') wanFQDN.value = data.wanFQDN;
     console.debug('[setServer] server.value', server.value);
   };
 
+  watch(theme, () => {
+    if (theme.value) themeStore.setTheme(theme.value);
+  });
+
   return {
     // state
     apiKey,

store/theme.ts

@@ -0,0 +1,59 @@
+import { defineStore, createPinia, setActivePinia } from "pinia";
+import hexToRgba from 'hex-to-rgba';
+import type { Theme } from "~/types/theme";
+/**
+ * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
+ * @see https://github.com/vuejs/pinia/discussions/1085
+ */
+setActivePinia(createPinia());
+
+export const useThemeStore = defineStore('theme', () => {
+  // State
+  const serverTheme = ref<Theme|undefined>();
+  // Getters
+  const darkMode = computed(() => (serverTheme.value?.name === 'black' || serverTheme.value?.name === 'azure') ?? false);
+  // Actions
+  const setTheme = (data: Theme) => {
+    console.debug('[setTheme]');
+    serverTheme.value = data;
+  };
+  const setCssVars = () => {
+    const body = document.body;
+    const defaultColors = {
+      darkTheme: {
+        alpha: '#1c1b1b',
+        beta: '#f2f2f2',
+        gamma: '#999999',
+      },
+      lightTheme: {
+        alpha: '#f2f2f2',
+        beta: '#1c1b1b',
+        gamma: '#999999',
+      },
+    };
+    let { alpha, beta, gamma } = darkMode.value ? defaultColors.darkTheme : defaultColors.lightTheme;
+    // overwrite with hex colors set in webGUI @ /Settings/DisplaySettings
+    if (serverTheme.value?.textColor) alpha = serverTheme.value?.textColor;
+    if (serverTheme.value?.bgColor) {
+      beta = serverTheme.value?.bgColor;
+      body.style.setProperty('--color-customgradient-start', hexToRgba(beta, 0));
+      body.style.setProperty('--color-customgradient-end', hexToRgba(beta, 0.9));
+    }
+    if (serverTheme.value?.metaColor) gamma = serverTheme.value?.metaColor;
+    body.style.setProperty('--color-alpha', alpha);
+    body.style.setProperty('--color-beta', beta);
+    body.style.setProperty('--color-gamma', gamma);
+    // box shadow
+    body.style.setProperty('--shadow-beta', `0 25px 50px -12px ${hexToRgba(beta, 0.15)}`);
+    body.style.setProperty('--ring-offset-shadow', `0 0 ${beta}`);
+    body.style.setProperty('--ring-shadow', `0 0 ${beta}`);
+  };
+
+  watch(serverTheme, () => {
+    setCssVars();
+  });
+
+  return {
+    setTheme,
+  };
+});