feat: Implement user theme preference settings

src/app/PersistableValues.ts

@@ -92,9 +92,13 @@ type PersistableValues_4_9_0 = PersistableValues_4_7_2 & {
   isVideoCallScreenCaptureFallbackEnabled: boolean;
 };
 
+type PersistableValues_4_10_0 = PersistableValues_4_9_0 & {
+  userThemePreference: 'auto' | 'light' | 'dark';
+};
+
 export type PersistableValues = Pick<
-  PersistableValues_4_9_0,
-  keyof PersistableValues_4_9_0
+  PersistableValues_4_10_0,
+  keyof PersistableValues_4_10_0
 >;
 
 export const migrations = {
@@ -173,4 +177,8 @@ export const migrations = {
     isTransparentWindowEnabled: false,
     isVideoCallScreenCaptureFallbackEnabled: false,
   }),
+  '>=4.10.0': (before: PersistableValues_4_9_0): PersistableValues_4_10_0 => ({
+    ...before,
+    userThemePreference: 'auto',
+  }),
 };

src/app/selectors.ts

@@ -71,4 +71,6 @@ export const selectPersistableValues = createStructuredSelector({
     isVideoCallScreenCaptureFallbackEnabled,
   }: RootState) => isVideoCallScreenCaptureFallbackEnabled,
   updateChannel: ({ updateChannel }: RootState) => updateChannel,
+  userThemePreference: ({ userThemePreference }: RootState) =>
+    userThemePreference,
 });

src/i18n/ar.i18n.json

@@ -4,6 +4,13 @@
       "transparentWindow": {
         "title": "تأثير النافذة الشفافة",
         "description": "تمكين تأثير الاهتزاز/الشفافية الأصلي للنافذة. يتطلب إعادة التشغيل للتطبيق."
+      },
+      "themeAppearance": {
+        "title": "المظهر",
+        "description": "اختر مظهر الألوان للتطبيق.",
+        "auto": "اتباع النظام",
+        "light": "فاتح",
+        "dark": "داكن"
       }
     }
   },

src/i18n/de-DE.i18n.json

@@ -262,6 +262,13 @@
       "transparentWindow": {
         "title": "Transparentes Fenstereffekt",
         "description": "Natives Vibrancy-/Transparenzeffekt für das Fenster aktivieren. Erfordert Neustart zur Anwendung."
+      },
+      "themeAppearance": {
+        "title": "Design",
+        "description": "Wählen Sie das Farbschema für die Anwendung.",
+        "auto": "System folgen",
+        "light": "Hell",
+        "dark": "Dunkel"
       }
     }
   },

src/i18n/en.i18n.json

@@ -294,6 +294,13 @@
       "transparentWindow": {
         "title": "Transparent window effect",
         "description": "Enable native vibrancy/transparency effect for the window. Requires restart to apply."
+      },
+      "themeAppearance": {
+        "title": "Theme",
+        "description": "Choose the color theme for the application.",
+        "auto": "Follow system",
+        "light": "Light",
+        "dark": "Dark"
       }
     }
   },

src/i18n/es.i18n.json

@@ -285,6 +285,13 @@
       "transparentWindow": {
         "title": "Efecto de ventana transparente",
         "description": "Habilitar efecto nativo de vibración/transparencia para la ventana. Requiere reinicio para aplicar."
+      },
+      "themeAppearance": {
+        "title": "Tema",
+        "description": "Elige el tema de color para la aplicación.",
+        "auto": "Seguir sistema",
+        "light": "Claro",
+        "dark": "Oscuro"
       }
     }
   },

src/i18n/fi.i18n.json

@@ -260,6 +260,13 @@
       "transparentWindow": {
         "title": "Läpinäkyvä ikkuna-efekti",
         "description": "Ota käyttöön natiivi värinäkyvyys/läpinäkyvyys-efekti ikkunalle. Vaatii uudelleenkäynnistyksen toimiakseen."
+      },
+      "themeAppearance": {
+        "title": "Teema",
+        "description": "Valitse sovelluksen väriteema.",
+        "auto": "Seuraa järjestelmää",
+        "light": "Vaalea",
+        "dark": "Tumma"
       }
     }
   },

src/i18n/fr.i18n.json

@@ -260,6 +260,13 @@
       "transparentWindow": {
         "title": "Effet de fenêtre transparente",
         "description": "Activer l'effet natif de vibrance/transparence pour la fenêtre. Nécessite un redémarrage pour s'appliquer."
+      },
+      "themeAppearance": {
+        "title": "Thème",
+        "description": "Choisissez le thème de couleur pour l'application.",
+        "auto": "Suivre le système",
+        "light": "Clair",
+        "dark": "Sombre"
       }
     }
   },

src/i18n/hu.i18n.json

@@ -285,6 +285,13 @@
       "transparentWindow": {
         "title": "Áttetsző ablak effektus",
         "description": "Natív vibráció/áttetszőség effektus engedélyezése az ablakhoz. Újraindítás szükséges az alkalmazáshoz."
+      },
+      "themeAppearance": {
+        "title": "Téma",
+        "description": "Válassza ki az alkalmazás színsémáját.",
+        "auto": "Rendszer követése",
+        "light": "Világos",
+        "dark": "Sötét"
       }
     }
   },

src/i18n/it-IT.i18n.json

@@ -4,6 +4,13 @@
       "transparentWindow": {
         "title": "Effetto finestra trasparente",
         "description": "Abilita l'effetto nativo di vibrazione/trasparenza per la finestra. Richiede il riavvio per applicare."
+      },
+      "themeAppearance": {
+        "title": "Tema",
+        "description": "Scegli il tema colore per l'applicazione.",
+        "auto": "Segui sistema",
+        "light": "Chiaro",
+        "dark": "Scuro"
       }
     }
   },

src/i18n/ja.i18n.json

@@ -220,6 +220,13 @@
       "transparentWindow": {
         "title": "透明ウィンドウ効果",
         "description": "ウィンドウのネイティブなビブランシー/透明効果を有効にします。適用するには再起動が必要です。"
+      },
+      "themeAppearance": {
+        "title": "テーマ",
+        "description": "アプリケーションのカラーテーマを選択します。",
+        "auto": "システムに従う",
+        "light": "ライト",
+        "dark": "ダーク"
       }
     }
   },

src/i18n/nb-NO.i18n.json

@@ -4,6 +4,13 @@
       "transparentWindow": {
         "title": "Gjennomsiktig vinduseffekt",
         "description": "Aktiver innfødt vibrasjon/gjennomsiktighetseffekt for vinduet. Krever omstart for å bruke."
+      },
+      "themeAppearance": {
+        "title": "Tema",
+        "description": "Velg fargtemaet for applikasjonen.",
+        "auto": "Følg system",
+        "light": "Lys",
+        "dark": "Mørk"
       }
     }
   },

src/i18n/nn.i18n.json

@@ -4,6 +4,13 @@
       "transparentWindow": {
         "title": "Gjennomsiktig vinduseffekt",
         "description": "Aktiver innfødd vibrasjon/gjennomsiktighetseffekt for vinduet. Krever omstart for å bruke."
+      },
+      "themeAppearance": {
+        "title": "Tema",
+        "description": "Velg fargtemaet for applikasjonen.",
+        "auto": "Følg system",
+        "light": "Lys",
+        "dark": "Mørk"
       }
     }
   },

src/i18n/no.i18n.json

@@ -294,6 +294,13 @@
       "transparentWindow": {
         "title": "Gjennomsiktig vinduseffekt",
         "description": "Aktiver innfødt vibrans/gjennomsiktighetseffekt for vinduet. Krever omstart for å brukes."
+      },
+      "themeAppearance": {
+        "title": "Tema",
+        "description": "Velg fargtemaet for applikasjonen.",
+        "auto": "Følg system",
+        "light": "Lys",
+        "dark": "Mørk"
       }
     }
   },

src/i18n/pl.i18n.json

@@ -133,6 +133,13 @@
       "transparentWindow": {
         "title": "Efekt przezroczystego okna",
         "description": "Włącz natywny efekt wibracji/przezroczystości dla okna. Wymaga ponownego uruchomienia, aby zastosować."
+      },
+      "themeAppearance": {
+        "title": "Motyw",
+        "description": "Wybierz motyw kolorystyczny aplikacji.",
+        "auto": "Zgodnie z systemem",
+        "light": "Jasny",
+        "dark": "Ciemny"
       }
     }
   },

src/i18n/pt-BR.i18n.json

@@ -280,6 +280,13 @@
       "transparentWindow": {
         "title": "Efeito de janela transparente",
         "description": "Ativar efeito nativo de vibração/transparência para a janela. Requer reinicialização para aplicar."
+      },
+      "themeAppearance": {
+        "title": "Tema",
+        "description": "Escolha o tema de cores para o aplicativo.",
+        "auto": "Seguir sistema",
+        "light": "Claro",
+        "dark": "Escuro"
       }
     }
   },

src/i18n/ru.i18n.json

@@ -263,6 +263,13 @@
       "transparentWindow": {
         "title": "Эффект прозрачного окна",
         "description": "Включить нативный эффект вибрации/прозрачности для окна. Требуется перезапуск для применения."
+      },
+      "themeAppearance": {
+        "title": "Тема",
+        "description": "Выберите цветовую тему для приложения.",
+        "auto": "Следовать системе",
+        "light": "Светлая",
+        "dark": "Тёмная"
       }
     }
   },

src/i18n/se.i18n.json

@@ -4,6 +4,13 @@
       "transparentWindow": {
         "title": "Genomskinlig fönstereffekt",
         "description": "Aktivera inbyggd vibrans/genomskinlighetseffekt för fönstret. Kräver omstart för att tillämpa."
+      },
+      "themeAppearance": {
+        "title": "Tema",
+        "description": "Välj färgtemat för applikationen.",
+        "auto": "Följ system",
+        "light": "Ljus",
+        "dark": "Mörk"
       }
     }
   },

src/i18n/sv.i18n.json

@@ -294,6 +294,13 @@
       "transparentWindow": {
         "title": "Transparent fönstereffekt",
         "description": "Aktivera inbyggd vibrans/transparenseffekt för fönstret. Kräver omstart för att tillämpas."
+      },
+      "themeAppearance": {
+        "title": "Tema",
+        "description": "Välj färgtemat för applikationen.",
+        "auto": "Följ system",
+        "light": "Ljus",
+        "dark": "Mörk"
       }
     }
   },

src/i18n/tr-TR.i18n.json

@@ -121,6 +121,13 @@
       "transparentWindow": {
         "title": "Şeffaf pencere efekti",
         "description": "Pencere için yerel titreşim/şeffaflık efektini etkinleştir. Uygulamak için yeniden başlatma gerektirir."
+      },
+      "themeAppearance": {
+        "title": "Tema",
+        "description": "Uygulama için renk temasını seçin.",
+        "auto": "Sistemi takip et",
+        "light": "Açık",
+        "dark": "Koyu"
       }
     }
   },

src/i18n/uk-UA.i18n.json

@@ -103,6 +103,13 @@
       "transparentWindow": {
         "title": "Ефект прозорого вікна",
         "description": "Увімкнути нативний ефект вібрації/прозорості для вікна. Потрібен перезапуск для застосування."
+      },
+      "themeAppearance": {
+        "title": "Тема",
+        "description": "Виберіть колірну тему для програми.",
+        "auto": "Слідувати системі",
+        "light": "Світла",
+        "dark": "Темна"
       }
     }
   },

src/i18n/zh-CN.i18n.json

@@ -158,6 +158,13 @@
       "transparentWindow": {
         "title": "透明窗口效果",
         "description": "启用窗口的原生模糊/透明效果。需要重启才能应用。"
+      },
+      "themeAppearance": {
+        "title": "主题",
+        "description": "选择应用程序的颜色主题。",
+        "auto": "跟随系统",
+        "light": "浅色",
+        "dark": "深色"
       }
     }
   },

src/i18n/zh-TW.i18n.json

@@ -100,6 +100,13 @@
       "transparentWindow": {
         "title": "透明視窗效果",
         "description": "啟用視窗的原生模糊/透明效果。需要重新啟動才能套用。"
+      },
+      "themeAppearance": {
+        "title": "主題",
+        "description": "選擇應用程式的顏色主題。",
+        "auto": "跟隨系統",
+        "light": "淺色",
+        "dark": "深色"
       }
     }
   },

src/i18n/zh.i18n.json

@@ -4,6 +4,13 @@
       "transparentWindow": {
         "title": "透明窗口效果",
         "description": "启用窗口的原生模糊/透明效果。需要重启才能应用。"
+      },
+      "themeAppearance": {
+        "title": "主题",
+        "description": "选择应用程序的颜色主题。",
+        "auto": "跟随系统",
+        "light": "浅色",
+        "dark": "深色"
       }
     }
   },

src/injected.ts

@@ -542,27 +542,6 @@ const start = async () => {
       setupFlags.gitCommitHash = true;
     }
 
-    if (Tracker && Meteor && getUserPreference && !setupFlags.themeAppearance) {
-      Tracker.autorun(() => {
-        const uid = Meteor.userId();
-        if (!uid) return;
-        const themeAppearance: string = getUserPreference(
-          uid,
-          'themeAppearence'
-        );
-        if (
-          ['dark', 'light', 'auto', 'high-contrast'].includes(
-            themeAppearance as any
-          )
-        ) {
-          window.RocketChatDesktop.setUserThemeAppearance(
-            themeAppearance as 'auto' | 'dark' | 'light' | 'high-contrast'
-          );
-        }
-      });
-      setupFlags.themeAppearance = true;
-    }
-
     if (Tracker && Meteor && getUserPreference && !setupFlags.userPresence) {
       Tracker.autorun(() => {
         const uid = Meteor.userId();

src/servers/common.ts

@@ -29,7 +29,6 @@ export type Server = {
   expirationMessageLastTimeShown?: Date;
   supportedVersionsValidatedAt?: Date;
   documentViewerOpenUrl?: string;
-  themeAppearance?: 'dark' | 'light' | 'auto' | 'high-contrast';
 };
 
 export const enum ServerUrlResolutionStatus {

src/servers/preload/api.ts

@@ -30,7 +30,6 @@ import {
   setServerVersionToSidebar,
   setSidebarCustomTheme,
 } from './sidebar';
-import { setUserThemeAppearance } from './themeAppearance';
 import { setTitle } from './title';
 import { setUrlResolver } from './urls';
 import { setUserLoggedIn } from './userLoggedIn';
@@ -75,7 +74,6 @@ export const RocketChatDesktop: Window['RocketChatDesktop'] = {
   setTitle,
   setUserPresenceDetection,
   setUserLoggedIn,
-  setUserThemeAppearance,
   createNotification,
   destroyNotification,
   dispatchCustomNotification,