mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2025-12-31 13:39:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat: move variable declarations to theme.ts

Browse Source
This commit is contained in:
Eli Bosley
2024-12-13 14:09:31 -05:00
parent 4eda0991d6
commit 00b8ffe87d
4 changed files with 54 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -36,14 +36,7 @@ install() {
echo "Note: ${flash}/webComps/unraid.min.js is missing"
fi
cd "${api_base_directory}" && npm link
[[ ! -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
cd "${api_base_directory}" && npm link --force
# bail if expected file does not exist
[[ ! -f "${api_base_directory}/package.json" ]] && echo "unraid-api install failed" && exit 1

67
web/assets/main.css
View File

@@ -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;

1
web/components/Notifications/Sidebar.vue
View File

@@ -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 {

54
web/store/theme.ts
View File

@@ -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();
});