added theme and dark vars for custom web app (#347)

2026-10-28 08:25:40 +08:00 · 2026-08-02 09:55:24 +08:00
1 parent 083484109f
commit 19da0fe1ec
@@ -266,6 +266,8 @@
    "fileIdVar": "معرف الملف",
    "userIdVar": "معرف المستخدم، يكون فارغًا في حالة عدم تسجيل الدخول.",
    "userDisplayNameVar": "اسم عرض المستخدم المرمز كعنوان URL.",
+    "themeVar": "السمة الحالية، \"light\" أو \"dark\".",
+    "darkVar": "ما إذا كانت السمة الداكنة مفعّلة، \"1\" أو \"0\".",
    "fileViewers": "تطبيقات الملفات",
    "viewerList": "قائمة التطبيقات",
    "defaultViewerApps": "التطبيقات الافتراضية",
@@ -267,6 +267,8 @@
    "fileIdVar": "Datei-ID",
    "userIdVar": "Benutzer-ID, leer wenn nicht angemeldet.",
    "userDisplayNameVar": "URL-kodierter Benutzer-Anzeigename.",
+    "themeVar": "Aktuelles Design, \"light\" oder \"dark\".",
+    "darkVar": "Ob das dunkle Design aktiv ist, \"1\" oder \"0\".",
    "fileViewers": "Dateianwendungen",
    "viewerList": "Anwendungsliste",
    "defaultViewerApps": "Standardanwendungen",
@@ -266,6 +266,8 @@
    "fileIdVar": "File ID",
    "userIdVar": "User ID, empty when not logged in.",
    "userDisplayNameVar": "URL-encoded user display name.",
+    "themeVar": "Current theme, \"light\" or \"dark\".",
+    "darkVar": "Whether dark theme is active, \"1\" or \"0\".",
    "fileViewers": "File applications",
    "viewerList": "Application list",
    "defaultViewerApps": "Default applications",
@@ -267,6 +267,8 @@
    "fileIdVar": "ID de Archivo",
    "userIdVar": "ID de Usuario, vacío cuando no está conectado.",
    "userDisplayNameVar": "Nombre para mostrar del usuario codificado en URL.",
+    "themeVar": "Tema actual, \"light\" o \"dark\".",
+    "darkVar": "Si el tema oscuro está activo, \"1\" o \"0\".",
    "fileViewers": "Aplicaciones de archivos",
    "viewerList": "Lista de aplicaciones",
    "defaultViewerApps": "Aplicaciones predeterminadas",
@@ -267,6 +267,8 @@
    "fileIdVar": "ID de fichier",
    "userIdVar": "ID utilisateur, vide lorsque non connecté.",
    "userDisplayNameVar": "Nom d'affichage utilisateur encodé en URL.",
+    "themeVar": "Thème actuel, \"light\" ou \"dark\".",
+    "darkVar": "Indique si le thème sombre est actif, \"1\" ou \"0\".",
    "fileViewers": "Applications de fichier",
    "viewerList": "Liste des applications",
    "defaultViewerApps": "Applications par défaut",
@@ -267,6 +267,8 @@
    "fileIdVar": "ID File",
    "userIdVar": "ID Utente, vuoto quando non loggato.",
    "userDisplayNameVar": "Nome visualizzazione utente codificato URL.",
+    "themeVar": "Tema corrente, \"light\" o \"dark\".",
+    "darkVar": "Se il tema scuro è attivo, \"1\" o \"0\".",
    "fileViewers": "Applicazioni file",
    "viewerList": "Elenco applicazioni",
    "defaultViewerApps": "Applicazioni predefinite",
@@ -266,6 +266,8 @@
    "fileIdVar": "ファイルID",
    "userIdVar": "ユーザーID（ログインしていない場合は空欄です）。",
    "userDisplayNameVar": "URLエンコード済みのユーザーニックネーム",
+    "themeVar": "現在のテーマ（\"light\" または \"dark\"）",
+    "darkVar": "ダークテーマが有効かどうか（\"1\" または \"0\"）",
    "fileViewers": "ファイル閲覧アプリ",
    "viewerList": "アプリ一覧",
    "defaultViewerApps": "デフォルトアプリ",
@@ -266,6 +266,8 @@
    "fileIdVar": "파일 ID",
    "userIdVar": "사용자 ID, 로그인하지 않은 경우 비어있음",
    "userDisplayNameVar": "URL 인코딩된 사용자 닉네임",
+    "themeVar": "현재 테마, \"light\" 또는 \"dark\"",
+    "darkVar": "다크 테마 활성화 여부, \"1\" 또는 \"0\"",
    "fileViewers": "파일 브라우저 애플리케이션",
    "viewerList": "애플리케이션 목록",
    "defaultViewerApps": "기본 열기 방식",
@@ -266,6 +266,8 @@
    "fileIdVar": "ID pliku",
    "userIdVar": "ID użytkownika, puste gdy nie jest zalogowany.",
    "userDisplayNameVar": "Zakodowana w URL wyświetlana nazwa użytkownika.",
+    "themeVar": "Bieżący motyw, \"light\" lub \"dark\".",
+    "darkVar": "Czy ciemny motyw jest aktywny, \"1\" lub \"0\".",
    "fileViewers": "Aplikacje plików",
    "viewerList": "Lista aplikacji",
    "defaultViewerApps": "Domyślne aplikacje",
@@ -267,6 +267,8 @@
    "fileIdVar": "ID do arquivo",
    "userIdVar": "ID do usuário, vazio quando não logado.",
    "userDisplayNameVar": "Nome de exibição do usuário codificado em URL.",
+    "themeVar": "Tema atual, \"light\" ou \"dark\".",
+    "darkVar": "Se o tema escuro está ativo, \"1\" ou \"0\".",
    "fileViewers": "Aplicações de arquivo",
    "viewerList": "Lista de aplicações",
    "defaultViewerApps": "Aplicações padrão",
@@ -267,6 +267,8 @@
    "fileIdVar": "ID файла",
    "userIdVar": "ID пользователя, пустой при отсутствии входа в систему.",
    "userDisplayNameVar": "URL-кодированное отображаемое имя пользователя.",
+    "themeVar": "Текущая тема, \"light\" или \"dark\".",
+    "darkVar": "Активна ли тёмная тема, \"1\" или \"0\".",
    "fileViewers": "Файловые приложения",
    "viewerList": "Список приложений",
    "defaultViewerApps": "Приложения по умолчанию",
@@ -266,6 +266,8 @@
    "fileIdVar": "文件 ID",
    "userIdVar": "用户 ID，未登录时为空",
    "userDisplayNameVar": "经过 URL 编码后的用户昵称",
+    "themeVar": "当前主题，\"light\" 或 \"dark\"",
+    "darkVar": "是否为深色主题，\"1\" 或 \"0\"",
    "fileViewers": "文件浏览应用",
    "viewerList": "应用列表",
    "defaultViewerApps": "默认打开方式",
@@ -266,6 +266,8 @@
    "fileIdVar": "檔案 ID",
    "userIdVar": "使用者 ID，未登入時為空。",
    "userDisplayNameVar": "經過 URL 編碼後的使用者暱稱。",
+    "themeVar": "目前主題，\"light\" 或 \"dark\"。",
+    "darkVar": "是否為深色主題，\"1\" 或 \"0\"。",
    "fileViewers": "檔案瀏覽應用",
    "viewerList": "應用列表",
    "defaultViewerApps": "預設開啟方式",
@@ -93,6 +93,16 @@ const magicVars: MagicVar[] = [
    value: "settings.userDisplayNameVar",
    example: "Aaron%20Liu",
  },
+  {
+    name: "{$theme}",
+    value: "settings.themeVar",
+    example: "dark",
+  },
+  {
+    name: "{$dark}",
+    value: "settings.darkVar",
+    example: "1",
+  },
 ];

 const DND_TYPE = "template-row";
@@ -289,7 +289,7 @@ export function openViewer(
 }

 export function openCustomViewer(file: FileResponse, viewer: Viewer, preferredVersion?: string): AppThunk {
-  return async (dispatch, _getState) => {
+  return async (dispatch, getState) => {
    const entityUrl = await longRunningTaskWithSnackbar(
      dispatch(
        getFileEntityUrl({
@@ -303,6 +303,14 @@ export function openCustomViewer(file: FileResponse, viewer: Viewer, preferredVe

    const currentUser = SessionManager.currentUser();

+    // Mirrors the fallback in useGeneratedTheme (App.tsx): explicit user
+    // preference wins, otherwise fall back to the OS/browser preference.
+    const darkModePreference = getState().globalState.darkMode;
+    const isDarkMode =
+      darkModePreference === undefined
+        ? window.matchMedia?.("(prefers-color-scheme: dark)").matches
+        : darkModePreference;
+
    const vars: { [key: string]: string } = {
      src: encodeURIComponent(entityUrl.urls[0].url),
      src_raw: entityUrl.urls[0].url,
@@ -312,6 +320,8 @@ export function openCustomViewer(file: FileResponse, viewer: Viewer, preferredVe
      id: file.id,
      user_id: currentUser?.id ?? "",
      user_display_name: encodeURIComponent(currentUser?.nickname ?? ""),
+      theme: isDarkMode ? "dark" : "light",
+      dark: isDarkMode ? "1" : "0",
    };

    // replace variables in viewer.url