Refactor/change onboarding design

src/apps/main/interface.d.ts

@@ -131,6 +131,10 @@ export interface IElectronAPI {
   getBackupFatalErrors(): Promise<Array<BackupErrorRecord>>;
   onBackupProgress(func: (value: number) => void): () => void;
   startRemoteSync(): Promise<void>;
+
+  pathChanged(path: string): void;
+  isUserLoggedIn(): Promise<boolean>;
+  onUserLoggedInChanged(func: (value: boolean) => void): void;
 }
 
 declare global {

src/apps/renderer/App.css

@@ -9,76 +9,71 @@
 
   --color-white: 255 255 255;
   --color-black: 0 0 0;
-}
 
-@media (prefers-color-scheme: light) {
-  :root {
-    --color-highlight: 17 17 17;
-    --color-surface: 255 255 255;
+  /* Light theme (default) */
+  --color-highlight: 17 17 17;
+  --color-surface: 255 255 255;
 
-    --color-gray-1: 249 249 252;
-    --color-gray-5: 243 243 248;
-    --color-gray-10: 229 229 235;
-    --color-gray-20: 209 209 215;
-    --color-gray-30: 199 199 205;
-    --color-gray-40: 174 174 179;
-    --color-gray-50: 142 142 148;
-    --color-gray-60: 99 99 103;
-    --color-gray-70: 72 72 75;
-    --color-gray-80: 58 58 59;
-    --color-gray-90: 44 44 48;
-    --color-gray-100: 24 24 27;
+  --color-gray-1: 249 249 252;
+  --color-gray-5: 243 243 248;
+  --color-gray-10: 229 229 235;
+  --color-gray-20: 209 209 215;
+  --color-gray-30: 199 199 205;
+  --color-gray-40: 174 174 179;
+  --color-gray-50: 142 142 148;
+  --color-gray-60: 99 99 103;
+  --color-gray-70: 72 72 75;
+  --color-gray-80: 58 58 59;
+  --color-gray-90: 44 44 48;
+  --color-gray-100: 24 24 27;
 
-    --color-primary: 0 102 255;
-    --color-primary-dark: 0 88 219;
+  --color-primary: 0 102 255;
+  --color-primary-dark: 0 88 219;
 
-    --color-red: 255 13 0;
-    --color-red-dark: 230 11 0;
+  --color-red: 255 13 0;
+  --color-red-dark: 230 11 0;
 
-    --color-orange: 255 149 0;
-    --color-orange-dark: 230 134 0;
+  --color-orange: 255 149 0;
+  --color-orange-dark: 230 134 0;
 
-    --color-yellow: 255 204 0;
-    --color-yellow-dark: 230 184 0;
+  --color-yellow: 255 204 0;
+  --color-yellow-dark: 230 184 0;
 
-    --color-green: 50 195 86;
-    --color-green-dark: 46 173 78;
-  }
+  --color-green: 50 195 86;
+  --color-green-dark: 46 173 78;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-highlight: 255 255 255;
-    --color-surface: 17 17 17;
+.dark {
+  --color-highlight: 255 255 255;
+  --color-surface: 17 17 17;
 
-    --color-gray-1: 24 24 27;
-    --color-gray-5: 44 44 48;
-    --color-gray-10: 58 58 59;
-    --color-gray-20: 72 72 75;
-    --color-gray-30: 99 99 103;
-    --color-gray-40: 142 142 148;
-    --color-gray-50: 174 174 179;
-    --color-gray-60: 199 199 205;
-    --color-gray-70: 209 209 215;
-    --color-gray-80: 229 229 235;
-    --color-gray-90: 243 243 248;
-    --color-gray-100: 249 249 252;
+  --color-gray-1: 24 24 27;
+  --color-gray-5: 44 44 48;
+  --color-gray-10: 58 58 59;
+  --color-gray-20: 72 72 75;
+  --color-gray-30: 99 99 103;
+  --color-gray-40: 142 142 148;
+  --color-gray-50: 174 174 179;
+  --color-gray-60: 199 199 205;
+  --color-gray-70: 209 209 215;
+  --color-gray-80: 229 229 235;
+  --color-gray-90: 243 243 248;
+  --color-gray-100: 249 249 252;
 
-    --color-primary: 20 114 255;
-    --color-primary-dark: 0 96 240;
+  --color-primary: 20 114 255;
+  --color-primary-dark: 0 96 240;
 
-    --color-red: 255 61 51;
-    --color-red-dark: 255 36 26;
+  --color-red: 255 61 51;
+  --color-red-dark: 255 36 26;
 
-    --color-orange: 255 164 36;
-    --color-orange-dark: 255 153 10;
+  --color-orange: 255 164 36;
+  --color-orange-dark: 255 153 10;
 
-    --color-yellow: 255 214 51;
-    --color-yellow-dark: 255 209 26;
+  --color-yellow: 255 214 51;
+  --color-yellow-dark: 255 209 26;
 
-    --color-green: 72 208 106;
-    --color-green-dark: 52 203 90;
-  }
+  --color-green: 72 208 106;
+  --color-green-dark: 52 203 90;
 }
 
 body,
@@ -109,18 +104,16 @@ html {
   background: #555;
 }
 
-@media (prefers-color-scheme: dark) {
-  ::-webkit-scrollbar-track {
-    background: #555;
-  }
+.dark ::-webkit-scrollbar-track {
+  background: #555;
+}
 
-  ::-webkit-scrollbar-thumb {
-    background: #888;
-  }
+.dark ::-webkit-scrollbar-thumb {
+  background: #888;
+}
 
-  ::-webkit-scrollbar-thumb:hover {
-    background: #f1f1f1;
-  }
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: #f1f1f1;
 }
 /* end-scrollbar */
 

src/apps/renderer/App.tsx

@@ -3,14 +3,17 @@
 import { Suspense, useEffect, useRef } from 'react';
 import { HashRouter as Router, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { TranslationProvider } from './context/LocalContext';
-import useLanguageChangedListener from './hooks/useLanguage';
 import Login from './pages/Login';
 import Onboarding from './pages/Onboarding';
 import IssuesPage from './pages/Issues/IssuesPage';
 import Settings from './pages/Settings';
 import Widget from './pages/Widget';
 import { useBackupNotifications } from './hooks/useBackupNotifications';
+import { useTheme } from './hooks/useTheme';
+import i18next from 'i18next';
+import { isLanguage } from '../shared/Locale/Language';
 import { UsageProvider } from './context/UsageContext/usage-provider';
+
 function LocationWrapper({ children }: { children: JSX.Element }) {
   const { pathname } = useLocation();
   useEffect(() => {
@@ -47,8 +50,26 @@
 }
 
 export default function App() {
-  useLanguageChangedListener();
   useBackupNotifications();
+  useTheme();
+
+  // Global IPC → i18next bridge for language changes
+  useEffect(() => {
+    window.electron.getConfigKey('preferedLanguage').then((value) => {
+      const lang = value as string;
+      if (lang && isLanguage(lang) && i18next.language !== lang) {
+        i18next.changeLanguage(lang);
+      }
+    });
+
+    const cleanup = window.electron.listenToConfigKeyChange<string>('preferedLanguage', (lang) => {
+      if (isLanguage(lang)) {
+        i18next.changeLanguage(lang);
+      }
+    });
+
+    return cleanup;
+  }, []);
 
   return (
     <Router>