-
ARANROIG.COM
-
-
+
\ 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