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

fix: switch to useToggle

Browse Source
This commit is contained in:
Eli Bosley
2024-12-17 09:57:17 -05:00
parent 77558a5cd9
commit 5f8602b864
2 changed files with 9 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/components/ColorSwitcher.ce.vue
View File

@@ -2,27 +2,17 @@
import Input from '~/components/shadcn/input/Input.vue';
import Label from '~/components/shadcn/label/Label.vue';
import { defaultColors, useThemeStore, type Theme } from '~/store/theme';
import { useToggle } from '@vueuse/core';
const themeStore = useThemeStore();
const { darkMode } = toRefs(themeStore);
const setDarkMode = ref<boolean>(false);
const setGradient = ref<boolean>(false);
const setDescription = ref<boolean>(true);
const setBanner = ref<boolean>(true);
const toggleSwitch = (value: boolean) => {
setDarkMode.value = value;
};
const toggleGradient = (value: boolean) => {
setGradient.value = value;
};
const toggleDescription = (value: boolean) => {
setDescription.value = value;
};
const toggleBanner = (value: boolean) => {
setBanner.value = value;
};
const [setDarkMode, toggleDarkMode] = useToggle(false);
const [setGradient, toggleGradient] = useToggle(false);
const [setDescription, toggleDescription] = useToggle(true);
const [setBanner, toggleBanner] = useToggle(true);
const textPrimary = ref<string>('');
const textSecondary = ref<string>('');
@@ -32,9 +22,7 @@ const textPrimaryToSet = computed(() => {
if (textPrimary.value) {
return textPrimary.value;
}
return darkMode.value
? defaultColors.dark['--headerTextPrimary']
: defaultColors.light['--headerTextPrimary'];
return darkMode.value ? defaultColors.dark['--headerTextPrimary'] : defaultColors.light['--headerTextPrimary'];
});
const textSecondaryToSet = computed(() => {
@@ -91,7 +79,7 @@ watch(
<Label for="header-background">Header Background Color</Label>
<Input id="header-background" v-model="bgColor" />
<Label for="dark-mode">Dark Mode</Label>
<Switch id="dark-mode" :checked="setDarkMode" @update:checked="toggleSwitch" />
<Switch id="dark-mode" :checked="setDarkMode" @update:checked="toggleDarkMode" />
<Label for="gradient">Gradient</Label>
<Switch id="gradient" :checked="setGradient" @update:checked="toggleGradient" />
<Label for="description">Description</Label>

2
web/store/theme.ts
View File

@@ -83,7 +83,7 @@ export const useThemeStore = defineStore('theme', () => {
const activeColorVariables = ref<ThemeVariables>(defaultColors.light);
// Getters
const darkMode = computed(
const darkMode = computed<boolean>(
() => DARK_THEMES.includes(theme.value?.name as (typeof DARK_THEMES)[number]) ?? false
);
// used to swap the UPC text color when using the azure or gray theme