windows/app/app.vue

<script setup lang="ts">
import { watch, onMounted, computed } 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();

// Define routes that should show pages instead of desktop
const specialRoutes = ['/500', '/404', '/error', '/login', '/register'];

// Check if current route should show a page
const shouldShowPage = computed(() => {
  // Use Nuxt's useRoute composable which is available globally
  const route = useRoute();
  const currentPath = route?.path || '';
  return specialRoutes.includes(currentPath);
});

// 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>
    <!-- Always show desktop as background -->
    <Desktop />
    <!-- Overlay pages on top when needed -->
    <div v-if="shouldShowPage" class="page-overlay">
      <NuxtPage />
    </div>
  </div>
</template>

<style scoped>
.page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  background: var(--background-desktop);
}
</style>