num/client/App.vue

<template>
 <view class="app-container" :class="themeClass">
 <slot />
 </view>
 </template>

 <script setup>
 import { onLaunch } from '@dcloudio/uni-app'
 import { useUserStore } from '@/stores/user'
 import { useThemeStore } from '@/stores/theme'
 import { useTheme } from '@/composables/useThemeStyle'

 const userStore = useUserStore()
 const themeStore = useThemeStore()
 const { themeClass } = useTheme()

 onLaunch(() => {
 // Initialize theme first (before anything renders)
 themeStore.init()

 // Fetch user profile if logged in
 if (userStore.isLoggedIn) {
 userStore.fetchProfile().catch(() => {})
 }
 })
 </script>

 <style>
 .app-container {
 min-height: 100vh;
 /* Theme variables */
 --color-bg: #0c0a1a;
 --color-bg-secondary: #120d28;
 --color-bg-tertiary: #0f0c1e;
 --color-bg-card: rgba(255, 255, 255, 0.06);
 --color-bg-card-hover: rgba(255, 255, 255, 0.1);
 --color-bg-input: rgba(255, 255, 255, 0.1);
 --color-bg-tag: rgba(255, 255, 255, 0.08);
 --color-bg-overlay: rgba(12, 10, 26, 0.85);
 --color-text-primary: #FFFFFF;
 --color-text-secondary: #CBD5E1;
 --color-text-tertiary: rgba(255, 255, 255, 0.6);
 --color-text-link: #60A5FA;
 --color-text-gold: #C9A84C;
 --color-brand: #1E3A5F;
 --color-brand-light: #1E3A5F;
 --color-elevated: #172943;
 --color-gold: #C9A84C;
 --color-gold-bg: rgba(201, 168, 76, 0.15);
 --color-gold-light: #FEF3C7;
 --color-border: rgba(255, 255, 255, 0.1);
 --color-border-light: rgba(255, 255, 255, 0.06);
 --color-border-focus: rgba(201, 168, 76, 0.5);
 --color-success: #10b981;
 --color-success-bg: rgba(16, 185, 129, 0.15);
 --color-warning: #fbbf24;
 --color-warning-bg: rgba(251, 191, 36, 0.15);
 --color-danger: #ef4444;
 --color-danger-bg: rgba(239, 68, 68, 0.15);
 --color-info: #3B82F6;
 --color-info-bg: rgba(59, 130, 246, 0.15);
 --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
 --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
 --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
 --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.5);
 --shadow-btn: 0 4px 15px rgba(30, 58, 95, 0.4);
 --shadow-gold: 0 4px 15px rgba(201, 168, 76, 0.3);

  background: var(--color-bg);
  color: var(--color-text-primary);
  transition: background var(--transition-normal), color var(--transition-normal);
  }

  .app-container.theme-light {
  --color-bg: #F8F6F1;
 --color-bg-secondary: #F0EDE6;
 --color-bg-tertiary: #E8E5DE;
 --color-bg-card: #FFFFFF;
 --color-bg-card-hover: #F7F8FC;
 --color-bg-input: #F3F4F6;
 --color-bg-tag: #F3F4F6;
 --color-bg-overlay: rgba(248, 246, 241, 0.9);
 --color-text-primary: #1A1A2E;
 --color-text-secondary: #4A5568;
 --color-text-tertiary: #9CA3AF;
 --color-text-link: #2563EB;
 --color-text-gold: #92400E;
 --color-brand: #1E3A5F;
 --color-brand-light: #1E3A5F;
 --color-elevated: #2C5282;
 --color-gold: #C9A84C;
 --color-gold-bg: #FEF3C7;
 --color-gold-light: #FEF3C7;
 --color-border: #E2E8F0;
 --color-border-light: #F3F4F6;
 --color-border-focus: rgba(201, 168, 76, 0.6);
 --color-success: #059669;
 --color-success-bg: #D1FAE5;
 --color-warning: #D97706;
 --color-warning-bg: #FEF3C7;
 --color-danger: #DC2626;
 --color-danger-bg: #FEE2E2;
 --color-info: #2563EB;
 --color-info-bg: #DBEAFE;
 --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
 --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
 --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
 --shadow-modal: 0 8px 30px rgba(0, 0, 0, 0.1);
 --shadow-btn: 0 4px 12px rgba(30, 58, 95, 0.2);
  --shadow-gold: 0 4px 12px rgba(201, 168, 76, 0.2);
  }
 </style>