feat: move variable declarations to theme.ts

plugin/source/dynamix.unraid.net/etc/rc.d/rc.unraid-api

@@ -36,14 +36,7 @@ install() {
     echo "Note: ${flash}/webComps/unraid.min.js is missing"
   fi
 
-  cd "${api_base_directory}" && npm link
+  cd "${api_base_directory}" && npm link --force
-
-  [[ ! -f "${unraid_binary_path}" ]] && echo "unraid-api install failed with missing executable" && exit 1
-
-  # link the executable in sbin and bin
-  ln -sf "${unraid_binary_path}" /usr/sbin/unraid-api
-  ln -sf "${unraid_binary_path}" /usr/bin/unraid-api
-
   # bail if expected file does not exist
   [[ ! -f "${api_base_directory}/package.json" ]] && echo "unraid-api install failed" && exit 1
 

web/assets/main.css

@@ -38,73 +38,6 @@ body {
 /* Ensure this is always at the bottom – @see https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries */
 @tailwind utilities;
 
-/* shadcn */
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
- 
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
- 
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
- 
-    --primary: 24 100% 50%;
-    --primary-foreground: 0 0% 98%;
- 
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
- 
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --ring: 0 0% 3.9%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
- 
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
- 
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
- 
-    --card: 0 0% 14.9%;
-    --card-foreground: 0 0% 98%;
- 
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
- 
-    --primary: 24 100% 50%;
-    --primary-foreground: 0 0% 98%;
- 
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
- 
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --ring: 0 0% 83.1%;
-  }
-}
- 
 @layer base {
   * {
     @apply border-border;

web/components/Notifications/Sidebar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/shadcn/sheet';
 import { useMutation, useQuery } from '@vue/apollo-composable';
+import { Button } from '@/components/shadcn/button';
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports -- false positive :(
 import { Importance, NotificationType } from '~/composables/gql/graphql';
 import {

web/store/theme.ts

@@ -1,6 +1,7 @@
 import hexToRgba from 'hex-to-rgba';
 import { createPinia, defineStore, setActivePinia } from 'pinia';
 
+
 /**
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
@@ -36,6 +37,51 @@ export const defaultColors: Record<string, ColorMode> = {
   },
 };
 
+const lightVariables = {
+  '--background': '0 0% 100%',
+  '--foreground': '0 0% 3.9%',
+  '--muted': '0 0% 96.1%',
+  '--muted-foreground': '0 0% 45.1%',
+  '--popover': '0 0% 100%',
+  '--popover-foreground': '0 0% 3.9%',
+  '--card': '0 0% 100%',
+  '--card-foreground': '0 0% 3.9%',
+  '--border': '0 0% 89.8%',
+  '--input': '0 0% 89.8%',
+  '--primary': '24 100% 50%',
+  '--primary-foreground': '0 0% 98%',
+  '--secondary': '0 0% 96.1%',
+  '--secondary-foreground': '0 0% 9%',
+  '--accent': '0 0% 96.1%',
+  '--accent-foreground': '0 0% 9%',
+  '--destructive': '0 84.2% 60.2%',
+  '--destructive-foreground': '0 0% 98%',
+  '--ring': '0 0% 3.9%',
+  '--radius': '0.5rem',
+};
+
+const darkVariables = {
+  '--background': '0 0% 3.9%',
+  '--foreground': '0 0% 98%',
+  '--muted': '0 0% 14.9%',
+  '--muted-foreground': '0 0% 63.9%',
+  '--popover': '0 0% 3.9%',
+  '--popover-foreground': '0 0% 98%',
+  '--card': '0 0% 14.9%',
+  '--card-foreground': '0 0% 98%',
+  '--border': '0 0% 14.9%',
+  '--input': '0 0% 14.9%',
+  '--primary': '24 100% 50%',
+  '--primary-foreground': '0 0% 98%',
+  '--secondary': '0 0% 14.9%',
+  '--secondary-foreground': '0 0% 98%',
+  '--accent': '0 0% 14.9%',
+  '--accent-foreground': '0 0% 98%',
+  '--destructive': '0 62.8% 30.6%',
+  '--destructive-foreground': '0 0% 98%',
+  '--ring': '0 0% 83.1%',
+};
+
 export const useThemeStore = defineStore('theme', () => {
   // State
   const theme = ref<Theme | undefined>();
@@ -80,15 +126,19 @@ export const useThemeStore = defineStore('theme', () => {
     body.style.setProperty('--header-background-color', headerBackgroundColor);
     
     if (darkMode.value) {
+      Object.entries(darkVariables).forEach(([key, value]) => {
+        body.style.setProperty(key, value);
+      });
       document.body.classList.add('dark');
     } else {
+      Object.entries(lightVariables).forEach(([key, value]) => {
+        body.style.setProperty(key, value);
+      });
       document.body.classList.remove('dark');
     }
   };
 
   watch(theme, () => {
-    console.log(theme.value);
-    console.log('theme changed');
     setCssVars();
   });