feat: begin fixing dark mode in the webcomponents

web/components/HeaderOsVersion.ce.vue

@@ -16,6 +16,7 @@ import { useUpdateOsStore } from '~/store/updateOs';
 import { useUpdateOsActionsStore } from '~/store/updateOsActions';
 import type { UserProfileLink } from '~/types/userProfile';
 import type { UiBadgeProps, UiBadgePropsColor } from '~/types/ui/badge';
+import { useThemeStore } from '~/store/theme';
 
 const { t } = useI18n();
 
@@ -66,6 +67,16 @@ const updateOsStatus = computed(() => {
 
   return null;
 });
+
+
+const themeStore = useThemeStore();
+const { darkMode, theme } = toRefs(themeStore);
+const toggleDarkMode = () => {
+  const themeNameToSet = darkMode.value ? 'light' : 'black';
+  if (theme.value) {
+    themeStore.setTheme({ ...theme.value, name: themeNameToSet });
+  }
+};
 </script>
 
 <template>
@@ -85,6 +96,9 @@ const updateOsStatus = computed(() => {
         {{ osVersion }}
       </UiBadge>
     </button>
+    <button @click="toggleDarkMode">
+            Toggle Dark / Light Theme - Current is: {{ darkMode ? 'Dark' : 'Light' }}
+    </button>
 
     <component
       :is="updateOsStatus.href ? 'a' : 'button'"

web/components/Notifications/Sidebar.vue

@@ -50,7 +50,7 @@ const overview = computed(() => {
     <!-- We remove the horizontal padding from the container to keep the NotificationList's scrollbar in the right place -->
     <SheetContent
       :to="teleportTarget"
-      class="w-full max-w-[100vw] sm:max-w-[540px] h-screen px-0 bg-[#f2f2f2]"
+      class="w-full max-w-[100vw] sm:max-w-[540px] h-screen px-0"
     >
       <div class="flex flex-col h-full gap-5">
         <SheetHeader class="ml-1 px-6 flex items-baseline gap-1">

web/components/shadcn/sheet/index.ts

@@ -10,7 +10,7 @@ export { default as SheetDescription } from './SheetDescription.vue'
 export { default as SheetFooter } from './SheetFooter.vue'
 
 export const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  'fixed z-50 gap-4 bg-beta shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
   {
     variants: {
       side: {

web/nuxt.config.ts

@@ -41,104 +41,113 @@ const charsToReserve =
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  ssr: false,
+ ssr: false,
-  devServer: {
+
-    port: 4321,
+ devServer: {
-  },
+   port: 4321,
-  devtools: {
+ },
-    enabled: true,
+
-  },
+ devtools: {
-  modules: [
+   enabled: true,
-    "@vueuse/nuxt",
+ },
-    "@pinia/nuxt",
+
-    "@nuxtjs/tailwindcss",
+ modules: [
-    "nuxt-custom-elements",
+   "@vueuse/nuxt",
-    "@nuxt/eslint",
+   "@pinia/nuxt",
-    "shadcn-nuxt",
+   "@nuxtjs/tailwindcss",
-  ],
+   "nuxt-custom-elements",
-  components: [
+   "@nuxt/eslint",
-    { path: "~/components/Brand", prefix: "Brand" },
+   "shadcn-nuxt",
-    { path: "~/components/ConnectSettings", prefix: "ConnectSettings" },
+ ],
-    { path: "~/components/Ui", prefix: "Ui" },
+
-    { path: "~/components/UserProfile", prefix: "Upc" },
+ components: [
-    { path: "~/components/UpdateOs", prefix: "UpdateOs" },
+   { path: "~/components/Brand", prefix: "Brand" },
-    "~/components",
+   { path: "~/components/ConnectSettings", prefix: "ConnectSettings" },
-  ],
+   { path: "~/components/Ui", prefix: "Ui" },
-  // typescript: {
+   { path: "~/components/UserProfile", prefix: "Upc" },
-  //   typeCheck: true
+   { path: "~/components/UpdateOs", prefix: "UpdateOs" },
-  // },
+   "~/components",
-  shadcn: {
+ ],
-    prefix: "",
+
-    componentDir: "./components/shadcn",
+ // typescript: {
-  },
+ //   typeCheck: true
-  vite: {
+ // },
-    plugins: [
+ shadcn: {
-      !process.env.VITE_ALLOW_CONSOLE_LOGS &&
+   prefix: "",
-        removeConsole({
+   componentDir: "./components/shadcn",
-          includes: ["log", "warn", "error", "info", "debug"],
+ },
-        }),
+
-    ],
+ vite: {
-    build: {
+   plugins: [
-      minify: "terser",
+     !process.env.VITE_ALLOW_CONSOLE_LOGS &&
-      terserOptions: {
+       removeConsole({
-        mangle: {
+         includes: ["log", "warn", "error", "info", "debug"],
-          reserved: terserReservations(charsToReserve),
+       }),
-          toplevel: true,
+   ],
-        },
+   build: {
-      },
+     minify: "terser",
-    },
+     terserOptions: {
-  },
+       mangle: {
-  customElements: {
+         reserved: terserReservations(charsToReserve),
-    entries: [
+         toplevel: true,
-      {
+       },
-        name: "UnraidComponents",
+     },
-        tags: [
+   },
-          {
+ },
-            name: "UnraidI18nHost",
+
-            path: "@/components/I18nHost.ce",
+ customElements: {
-          },
+   entries: [
-          {
+     {
-            name: "UnraidAuth",
+       name: "UnraidComponents",
-            path: "@/components/Auth.ce",
+       tags: [
-          },
+         {
-          {
+           name: "UnraidI18nHost",
-            name: "UnraidConnectSettings",
+           path: "@/components/I18nHost.ce",
-            path: "@/components/ConnectSettings/ConnectSettings.ce",
+         },
-          },
+         {
-          {
+           name: "UnraidAuth",
-            name: "UnraidDownloadApiLogs",
+           path: "@/components/Auth.ce",
-            path: "@/components/DownloadApiLogs.ce",
+         },
-          },
+         {
-          {
+           name: "UnraidConnectSettings",
-            name: "UnraidHeaderOsVersion",
+           path: "@/components/ConnectSettings/ConnectSettings.ce",
-            path: "@/components/HeaderOsVersion.ce",
+         },
-          },
+         {
-          {
+           name: "UnraidDownloadApiLogs",
-            name: "UnraidModals",
+           path: "@/components/DownloadApiLogs.ce",
-            path: "@/components/Modals.ce",
+         },
-          },
+         {
-          {
+           name: "UnraidHeaderOsVersion",
-            name: "UnraidUserProfile",
+           path: "@/components/HeaderOsVersion.ce",
-            path: "@/components/UserProfile.ce",
+         },
-          },
+         {
-          {
+           name: "UnraidModals",
-            name: "UnraidUpdateOs",
+           path: "@/components/Modals.ce",
-            path: "@/components/UpdateOs.ce",
+         },
-          },
+         {
-          {
+           name: "UnraidUserProfile",
-            name: "UnraidDowngradeOs",
+           path: "@/components/UserProfile.ce",
-            path: "@/components/DowngradeOs.ce",
+         },
-          },
+         {
-          {
+           name: "UnraidUpdateOs",
-            name: "UnraidRegistration",
+           path: "@/components/UpdateOs.ce",
-            path: "@/components/Registration.ce",
+         },
-          },
+         {
-          {
+           name: "UnraidDowngradeOs",
-            name: "UnraidWanIpCheck",
+           path: "@/components/DowngradeOs.ce",
-            path: "@/components/WanIpCheck.ce",
+         },
-          },
+         {
-        ],
+           name: "UnraidRegistration",
-      },
+           path: "@/components/Registration.ce",
-    ],
+         },
-  },
+         {
+           name: "UnraidWanIpCheck",
+           path: "@/components/WanIpCheck.ce",
+         },
+       ],
+     },
+   ],
+ },
+
+ compatibilityDate: "2024-12-05"
 });

web/pages/index.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import AES from 'crypto-js/aes';
-import type { SendPayloads } from '~/store/callback';
-
 import { serverState } from '~/_data/serverState';
+import type { SendPayloads } from '~/store/callback';
+import { useThemeStore, type Theme } from '~/store/theme';
+import AES from 'crypto-js/aes';
 
 const { registerEntry } = useCustomElements();
 onBeforeMount(() => {
@@ -12,7 +12,8 @@ onBeforeMount(() => {
 const valueToMakeCallback = ref<SendPayloads | undefined>();
 const callbackDestination = ref<string>('');
 
-const createCallbackUrl = (payload: SendPayloads, sendType: string) => { // params differs from callbackActions.send
+const createCallbackUrl = (payload: SendPayloads, sendType: string) => {
+  // params differs from callbackActions.send
   console.debug('[callback.send]');
 
   valueToMakeCallback.value = payload; // differs from callbackActions.send
@@ -22,10 +23,7 @@ const createCallbackUrl = (payload: SendPayloads, sendType: string) => { // para
     sender: window.location.href,
     type: sendType,
   });
-  const encryptedMessage = AES.encrypt(
+  const encryptedMessage = AES.encrypt(stringifiedData, import.meta.env.VITE_CALLBACK_KEY).toString();
-    stringifiedData,
-    import.meta.env.VITE_CALLBACK_KEY,
-  ).toString();
   // build and go to url
   const destinationUrl = new URL(window.location.href); // differs from callbackActions.send
   destinationUrl.searchParams.set('data', encodeURI(encryptedMessage));
@@ -38,7 +36,8 @@ onMounted(() => {
     [
       {
         // keyUrl: 'https://keys.lime-technology.com/unraid/d26a033e3097c65ab0b4f742a7c02ce808c6e963/Starter.key', // assigned to guid 1111-1111-5GDB-123412341234, use to test EGUID after key install
-        keyUrl: 'https://keys.lime-technology.com/unraid/7f7c2ddff1c38f21ed174f5c5d9f97b7b4577344/Starter.key',
+        keyUrl:
+          'https://keys.lime-technology.com/unraid/7f7c2ddff1c38f21ed174f5c5d9f97b7b4577344/Starter.key',
         type: 'renew',
       },
       {
@@ -46,9 +45,20 @@ onMounted(() => {
         type: 'updateOs',
       },
     ],
-    'forUpc',
+    'forUpc'
   );
 });
+
+const isDarkMode = ref(false);
+
+const themeStore = useThemeStore();
+const { darkMode, theme } = toRefs(themeStore);
+const toggleDarkMode = () => {
+  const themeNameToSet = darkMode.value ? 'light' : 'black';
+  if (theme.value) {
+    themeStore.setTheme({ ...theme.value, name: themeNameToSet });
+  }
+};
 </script>
 
 <template>
@@ -56,13 +66,12 @@ onMounted(() => {
     <div class="pb-12 mx-auto">
       <client-only>
         <div class="flex flex-col gap-6 p-6">
-          <h2 class="text-xl font-semibold font-mono">
+          <button @click="toggleDarkMode">
-            Vue Components
+            Toggle Dark / Light Theme - Current is: {{ darkMode ? 'Dark' : 'Light' }}
-          </h2>
+          </button>
-          <h3 class="text-lg font-semibold font-mono">
+          <h2 class="text-xl font-semibold font-mono">Vue Components</h2>
-            UserProfileCe
+          <h3 class="text-lg font-semibold font-mono">UserProfileCe</h3>
-          </h3>
+          <header class="bg-gray py-4 flex flex-row justify-between items-center">
-          <header class="bg-beta py-4 flex flex-row justify-between items-center">
             <div class="inline-flex flex-col gap-4 items-start px-4">
               <a href="https://unraid.net" target="_blank">
                 <BrandLogo class="w-[100px] sm:w-[150px]" />
@@ -73,11 +82,9 @@ onMounted(() => {
           </header>
           <!-- <hr class="border-black dark:border-white"> -->
 
-          <h3 class="text-lg font-semibold font-mono">
+          <h3 class="text-lg font-semibold font-mono">ConnectSettingsCe</h3>
-            ConnectSettingsCe
-          </h3>
           <ConnectSettingsCe />
-          <hr class="border-black dark:border-white">
+          <hr class="border-black dark:border-white" />
 
           <!-- <h3 class="text-lg font-semibold font-mono">
             DownloadApiLogsCe
@@ -94,31 +101,24 @@ onMounted(() => {
           </h3>
           <WanIpCheckCe php-wan-ip="47.184.85.45" />
           <hr class="border-black dark:border-white"> -->
-          <h3 class="text-lg font-semibold font-mono">
+          <h3 class="text-lg font-semibold font-mono">UpdateOsCe</h3>
-            UpdateOsCe
-          </h3>
           <UpdateOsCe />
-          <hr class="border-black dark:border-white">
+          <hr class="border-black dark:border-white" />
-          <h3 class="text-lg font-semibold font-mono">
+          <h3 class="text-lg font-semibold font-mono">DowngraadeOsCe</h3>
-            DowngraadeOsCe
-          </h3>
           <DowngradeOsCe :restore-release-date="'2022-10-10'" :restore-version="'6.11.2'" />
-          <hr class="border-black dark:border-white">
+          <hr class="border-black dark:border-white" />
-          <h3 class="text-lg font-semibold font-mono">
+          <h3 class="text-lg font-semibold font-mono">RegistrationCe</h3>
-            RegistrationCe
-          </h3>
           <RegistrationCe />
-          <hr class="border-black dark:border-white">
+          <hr class="border-black dark:border-white" />
-          <h3 class="text-lg font-semibold font-mono">
+          <h3 class="text-lg font-semibold font-mono">ModalsCe</h3>
-            ModalsCe
-          </h3>
           <ModalsCe />
-          <hr class="border-black dark:border-white">
+          <hr class="border-black dark:border-white" />
-          <h3 class="text-lg font-semibold font-mono">
+          <h3 class="text-lg font-semibold font-mono">Test Callback Builder</h3>
-            Test Callback Builder
-          </h3>
           <div class="flex flex-col justify-end gap-8px">
-            <p>Modify the <code>createCallbackUrl</code> param in <code>onMounted</code> to test a callback.</p>
+            <p>
+              Modify the <code>createCallbackUrl</code> param in <code>onMounted</code> to test a
+              callback.
+            </p>
             <code>
               <pre>{{ valueToMakeCallback }}</pre>
             </code>
@@ -138,10 +138,10 @@ onMounted(() => {
 
 <style lang="postcss">
 code {
-  @apply text-black bg-gray-200 p-1 rounded-lg shadow;
+  @apply rounded-lg bg-gray-200 p-1 text-black shadow;
 }
 
 pre {
-  @apply py-3 overflow-x-scroll;
+  @apply overflow-x-scroll py-3;
 }
 </style>

web/tailwind.config.ts

@@ -4,7 +4,7 @@ import type { PluginAPI } from 'tailwindcss/types/config';
 
 // @ts-expect-error - just trying to get this to build @fixme
 export default <Partial<Config>>{
-  darkMode: ['class'],
+  darkMode: ['selector'],
   safelist: [
     'dark',
     'DropdownWrapper_blip',
@@ -44,6 +44,11 @@ export default <Partial<Config>>{
         'grey-lightest': '#f2f2f2',
         white: '#ffffff',
 
+
+        // New Color Palette
+        'sidebar': '#f2f2f2',
+        'sidebar-dark': '#1c1b1b',
+
         // unraid colors
         'yellow-accent': '#E9BF41',
         'orange-dark': '#f15a2c',