Skip to content

Commit 4ea4890

Browse files
elibosleyelibosley
committed
feat: move variable declarations to theme.ts
1 parent 84a7646 commit 4ea4890

File tree

4 files changed

+54
-77
lines changed

4 files changed

+54
-77
lines changed

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

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,7 @@ install() {
3636
echo "Note: ${flash}/webComps/unraid.min.js is missing"
3737
fi
3838

39-
cd "${api_base_directory}" && npm link
40-
41-
[[ ! -f "${unraid_binary_path}" ]] && echo "unraid-api install failed with missing executable" && exit 1
42-
43-
# link the executable in sbin and bin
44-
ln -sf "${unraid_binary_path}" /usr/sbin/unraid-api
45-
ln -sf "${unraid_binary_path}" /usr/bin/unraid-api
46-
39+
cd "${api_base_directory}" && npm link --force
4740
# bail if expected file does not exist
4841
[[ ! -f "${api_base_directory}/package.json" ]] && echo "unraid-api install failed" && exit 1
4942

‎web/assets/main.css‎

Lines changed: 0 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -38,73 +38,6 @@ body {
3838
/* Ensure this is always at the bottom – @see https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries */
3939
@tailwind utilities;
4040

41-
/* shadcn */
42-
@layer base {
43-
:root {
44-
--background: 0 0% 100%;
45-
--foreground: 0 0% 3.9%;
46-
47-
--muted: 0 0% 96.1%;
48-
--muted-foreground: 0 0% 45.1%;
49-
50-
--popover: 0 0% 100%;
51-
--popover-foreground: 0 0% 3.9%;
52-
53-
--card: 0 0% 100%;
54-
--card-foreground: 0 0% 3.9%;
55-
56-
--border: 0 0% 89.8%;
57-
--input: 0 0% 89.8%;
58-
59-
--primary: 24 100% 50%;
60-
--primary-foreground: 0 0% 98%;
61-
62-
--secondary: 0 0% 96.1%;
63-
--secondary-foreground: 0 0% 9%;
64-
65-
--accent: 0 0% 96.1%;
66-
--accent-foreground: 0 0% 9%;
67-
68-
--destructive: 0 84.2% 60.2%;
69-
--destructive-foreground: 0 0% 98%;
70-
71-
--ring: 0 0% 3.9%;
72-
73-
--radius: 0.5rem;
74-
}
75-
76-
.dark {
77-
--background: 0 0% 3.9%;
78-
--foreground: 0 0% 98%;
79-
80-
--muted: 0 0% 14.9%;
81-
--muted-foreground: 0 0% 63.9%;
82-
83-
--popover: 0 0% 3.9%;
84-
--popover-foreground: 0 0% 98%;
85-
86-
--card: 0 0% 14.9%;
87-
--card-foreground: 0 0% 98%;
88-
89-
--border: 0 0% 14.9%;
90-
--input: 0 0% 14.9%;
91-
92-
--primary: 24 100% 50%;
93-
--primary-foreground: 0 0% 98%;
94-
95-
--secondary: 0 0% 14.9%;
96-
--secondary-foreground: 0 0% 98%;
97-
98-
--accent: 0 0% 14.9%;
99-
--accent-foreground: 0 0% 98%;
100-
101-
--destructive: 0 62.8% 30.6%;
102-
--destructive-foreground: 0 0% 98%;
103-
104-
--ring: 0 0% 83.1%;
105-
}
106-
}
107-
10841
@layer base {
10942
* {
11043
@apply border-border;

‎web/components/Notifications/Sidebar.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script setup lang="ts">
22
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/shadcn/sheet';
33
import { useMutation, useQuery } from '@vue/apollo-composable';
4+
import { Button } from '@/components/shadcn/button';
45
// eslint-disable-next-line @typescript-eslint/consistent-type-imports -- false positive :(
56
import { Importance, NotificationType } from '~/composables/gql/graphql';
67
import {

‎web/store/theme.ts‎

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import hexToRgba from 'hex-to-rgba';
22
import { createPinia, defineStore, setActivePinia } from 'pinia';
33

4+
45
/**
56
* @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
67
* @see https://github.com/vuejs/pinia/discussions/1085
@@ -36,6 +37,51 @@ export const defaultColors: Record<string, ColorMode> = {
3637
},
3738
};
3839

40+
const lightVariables = {
41+
'--background': '0 0% 100%',
42+
'--foreground': '0 0% 3.9%',
43+
'--muted': '0 0% 96.1%',
44+
'--muted-foreground': '0 0% 45.1%',
45+
'--popover': '0 0% 100%',
46+
'--popover-foreground': '0 0% 3.9%',
47+
'--card': '0 0% 100%',
48+
'--card-foreground': '0 0% 3.9%',
49+
'--border': '0 0% 89.8%',
50+
'--input': '0 0% 89.8%',
51+
'--primary': '24 100% 50%',
52+
'--primary-foreground': '0 0% 98%',
53+
'--secondary': '0 0% 96.1%',
54+
'--secondary-foreground': '0 0% 9%',
55+
'--accent': '0 0% 96.1%',
56+
'--accent-foreground': '0 0% 9%',
57+
'--destructive': '0 84.2% 60.2%',
58+
'--destructive-foreground': '0 0% 98%',
59+
'--ring': '0 0% 3.9%',
60+
'--radius': '0.5rem',
61+
};
62+
63+
const darkVariables = {
64+
'--background': '0 0% 3.9%',
65+
'--foreground': '0 0% 98%',
66+
'--muted': '0 0% 14.9%',
67+
'--muted-foreground': '0 0% 63.9%',
68+
'--popover': '0 0% 3.9%',
69+
'--popover-foreground': '0 0% 98%',
70+
'--card': '0 0% 14.9%',
71+
'--card-foreground': '0 0% 98%',
72+
'--border': '0 0% 14.9%',
73+
'--input': '0 0% 14.9%',
74+
'--primary': '24 100% 50%',
75+
'--primary-foreground': '0 0% 98%',
76+
'--secondary': '0 0% 14.9%',
77+
'--secondary-foreground': '0 0% 98%',
78+
'--accent': '0 0% 14.9%',
79+
'--accent-foreground': '0 0% 98%',
80+
'--destructive': '0 62.8% 30.6%',
81+
'--destructive-foreground': '0 0% 98%',
82+
'--ring': '0 0% 83.1%',
83+
};
84+
3985
export const useThemeStore = defineStore('theme', () => {
4086
// State
4187
const theme = ref<Theme | undefined>();
@@ -80,15 +126,19 @@ export const useThemeStore = defineStore('theme', () => {
80126
body.style.setProperty('--header-background-color', headerBackgroundColor);
81127

82128
if (darkMode.value) {
129+
Object.entries(darkVariables).forEach(([key, value]) => {
130+
body.style.setProperty(key, value);
131+
});
83132
document.body.classList.add('dark');
84133
} else {
134+
Object.entries(lightVariables).forEach(([key, value]) => {
135+
body.style.setProperty(key, value);
136+
});
85137
document.body.classList.remove('dark');
86138
}
87139
};
88140

89141
watch(theme, () => {
90-
console.log(theme.value);
91-
console.log('theme changed');
92142
setCssVars();
93143
});
94144

0 commit comments

Comments
 (0)