37 lines
943 B
Vue
37 lines
943 B
Vue
<script setup lang="ts">
|
|
import { watch, onMounted } from 'vue';
|
|
import { useSettingsStore } from './stores/settings';
|
|
import Desktop from './components/Desktop.vue';
|
|
|
|
// Import global styles directly here using a relative path
|
|
import './assets/css/main.css';
|
|
|
|
const settingsStore = useSettingsStore();
|
|
|
|
// Function to apply the theme, ensuring it only runs on the client
|
|
const applyTheme = (theme: string) => {
|
|
if (typeof document !== 'undefined') {
|
|
// A more robust way to set the class
|
|
document.body.classList.remove('theme-light', 'theme-dark');
|
|
document.body.classList.add(`theme-${theme}`);
|
|
}
|
|
};
|
|
|
|
// Watch for changes in the theme state and apply them
|
|
watch(() => settingsStore.theme, (newTheme) => {
|
|
applyTheme(newTheme);
|
|
});
|
|
|
|
// Apply the initial theme when the app mounts on the client-side
|
|
onMounted(() => {
|
|
applyTheme(settingsStore.theme);
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<Desktop />
|
|
</div>
|
|
</template>
|