From 2def9a207c261edd61896930b5cb16e48033ef06 Mon Sep 17 00:00:00 2001 From: BinarySandia04 Date: Fri, 20 Mar 2026 00:07:23 +0100 Subject: [PATCH] Added more things --- frontend/app/app.vue | 13 +- frontend/app/assets/css/colors.scss | 28 ++- frontend/app/components/parts/HeaderLinks.vue | 10 +- frontend/app/components/parts/PageHeader.vue | 29 ++- frontend/app/components/parts/TableHeader.vue | 32 ++- .../parts/site_options/LanguageSelector.vue | 94 +++++++++ .../parts/site_options/SiteOptions.vue | 17 ++ .../parts/site_options/ThemeSelector.vue | 182 ++++++++++++++++++ frontend/app/composables/theme.ts | 47 +++++ 9 files changed, 425 insertions(+), 27 deletions(-) create mode 100644 frontend/app/components/parts/site_options/LanguageSelector.vue create mode 100644 frontend/app/components/parts/site_options/SiteOptions.vue create mode 100644 frontend/app/components/parts/site_options/ThemeSelector.vue create mode 100644 frontend/app/composables/theme.ts diff --git a/frontend/app/app.vue b/frontend/app/app.vue index bdcab71..b54ba05 100644 --- a/frontend/app/app.vue +++ b/frontend/app/app.vue @@ -1,3 +1,5 @@ + + \ No newline at end of file diff --git a/frontend/app/components/parts/TableHeader.vue b/frontend/app/components/parts/TableHeader.vue index 97d50fd..d2bebb9 100644 --- a/frontend/app/components/parts/TableHeader.vue +++ b/frontend/app/components/parts/TableHeader.vue @@ -1,21 +1,41 @@ \ No newline at end of file diff --git a/frontend/app/components/parts/site_options/SiteOptions.vue b/frontend/app/components/parts/site_options/SiteOptions.vue new file mode 100644 index 0000000..693a620 --- /dev/null +++ b/frontend/app/components/parts/site_options/SiteOptions.vue @@ -0,0 +1,17 @@ + + + + + \ No newline at end of file diff --git a/frontend/app/components/parts/site_options/ThemeSelector.vue b/frontend/app/components/parts/site_options/ThemeSelector.vue new file mode 100644 index 0000000..9ba2ae3 --- /dev/null +++ b/frontend/app/components/parts/site_options/ThemeSelector.vue @@ -0,0 +1,182 @@ + + + + + \ No newline at end of file diff --git a/frontend/app/composables/theme.ts b/frontend/app/composables/theme.ts new file mode 100644 index 0000000..5b6dc77 --- /dev/null +++ b/frontend/app/composables/theme.ts @@ -0,0 +1,47 @@ +import { ref, onMounted, watch } from 'vue' + +type Theme = 'light' | 'dark' +type Accent = 'alfdir' + +const theme = ref('light') +const accent = ref('alfdir') + +const applyTheme = () => { + document.documentElement.setAttribute('data-theme', theme.value) + document.documentElement.setAttribute('data-accent', accent.value) +} + +const setTheme = (value: Theme) => { + theme.value = value + localStorage.setItem('theme', value) + applyTheme(); +} + +const setAccent = (value: Accent) => { + accent.value = value + localStorage.setItem('accent', value) + applyTheme(); +} + +const setupTheme = () => { + const savedTheme = localStorage.getItem('theme') as Theme | null + const savedAccent = localStorage.getItem('accent') as Accent | null + + const media = window.matchMedia('(prefers-color-scheme: dark)') + + theme.value = savedTheme || (media.matches ? 'dark' : 'light') + accent.value = savedAccent || 'alfdir' + + applyTheme() + + media.addEventListener('change', (e) => { + if (!localStorage.getItem('theme')) { + theme.value = e.matches ? 'dark' : 'light' + applyTheme() + } + }) +}; + +watch([theme, accent], applyTheme) + +export { theme, accent, setTheme, setAccent, setupTheme} \ No newline at end of file