mirror of
https://github.com/sysadminsmedia/homebox.git
synced 2025-12-24 06:28:34 +01:00
e708bd9839
* feat: add shadcn * feat: add themes * feat: make sidebar use shadcn * feat: sort bg * feat: lint fixes * feat: make daisyui toggleable, add tooltips to sidebar, add work in progress docs page * fix: theme switching for shadcn * Fix minor profile.vue issue * feat: update docs, enlarge SidebarMenuButton and refine profile layout * feat: add testing page * feat: update css and remove comments from template * fix: create dropdown not opening due to tooltip interference also lint * fix: correct CSS selector for homebox in main.css to ensure proper theming functionality * feat: make theme switching actually kinda work for shadcn * fix: sidebar colours * fix: remove unused router import, made sidebar indicate active page and sort tailwind config linting * style: update styles * chore: remove unused duplicate code * style: refine theme management, CSS variables, get styles closer to original * feat: implement suggested changes * feat: better button size --------- Co-authored-by: Matt Kilgore <tankerkiller125@users.noreply.github.com>
104 lines
2.0 KiB
TypeScript
104 lines
2.0 KiB
TypeScript
import type { ComputedRef } from "vue";
|
|
import type { DaisyTheme } from "~~/lib/data/themes";
|
|
|
|
export interface UseTheme {
|
|
theme: ComputedRef<DaisyTheme>;
|
|
setTheme: (theme: DaisyTheme) => void;
|
|
}
|
|
|
|
const themeRef = ref<DaisyTheme>("garden");
|
|
|
|
export function useTheme(): UseTheme {
|
|
const preferences = useViewPreferences();
|
|
themeRef.value = preferences.value.theme;
|
|
|
|
const setTheme = (newTheme: DaisyTheme) => {
|
|
preferences.value.theme = newTheme;
|
|
|
|
if (htmlEl) {
|
|
htmlEl.value?.setAttribute("data-theme", newTheme);
|
|
// FIXME: this is a hack to remove the theme class from the html element
|
|
htmlEl.value?.classList.remove(...themes);
|
|
htmlEl.value?.classList.add("theme-" + newTheme);
|
|
}
|
|
|
|
themeRef.value = newTheme;
|
|
};
|
|
|
|
const htmlEl = ref<HTMLElement | null>();
|
|
|
|
onMounted(() => {
|
|
if (htmlEl.value) {
|
|
return;
|
|
}
|
|
|
|
htmlEl.value = document.querySelector("html");
|
|
});
|
|
|
|
const theme = computed(() => {
|
|
return themeRef.value;
|
|
});
|
|
|
|
return { theme, setTheme };
|
|
}
|
|
|
|
export function useIsDark() {
|
|
const theme = useTheme();
|
|
|
|
const darkthemes = [
|
|
"synthwave",
|
|
"retro",
|
|
"cyberpunk",
|
|
"valentine",
|
|
"halloween",
|
|
"forest",
|
|
"aqua",
|
|
"black",
|
|
"luxury",
|
|
"dracula",
|
|
"business",
|
|
"night",
|
|
"coffee",
|
|
];
|
|
|
|
return computed(() => {
|
|
return darkthemes.includes(theme.theme.value);
|
|
});
|
|
}
|
|
|
|
export const themes = [
|
|
"dark",
|
|
"theme-aqua",
|
|
"theme-black",
|
|
"theme-bumblebee",
|
|
"theme-cmyk",
|
|
"theme-corporate",
|
|
"theme-cupcake",
|
|
"theme-cyberpunk",
|
|
"theme-dark",
|
|
"theme-dracula",
|
|
"theme-emerald",
|
|
"theme-fantasy",
|
|
"theme-forest",
|
|
"theme-garden",
|
|
"theme-halloween",
|
|
"theme-light",
|
|
"theme-lofi",
|
|
"theme-luxury",
|
|
"theme-pastel",
|
|
"theme-retro",
|
|
"theme-synthwave",
|
|
"theme-valentine",
|
|
"theme-wireframe",
|
|
"theme-autumn",
|
|
"theme-business",
|
|
"theme-acid",
|
|
"theme-lemonade",
|
|
"theme-night",
|
|
"theme-coffee",
|
|
"theme-winter",
|
|
"theme-dim",
|
|
"theme-nord",
|
|
"theme-sunset",
|
|
];
|