1

src/routing/RouteImageReadyGate.test.ts

@@ -4,15 +4,17 @@ import { act, render, screen } from '@testing-library/react';
 import { createElement } from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
+import { RouteImageReadyGate } from './RouteImageReadyGate';
 import {
   collectRouteImageUrls,
   extractCssImageUrls,
   normalizePreloadImageUrl,
 } from './routeImageReadyGateUtils';
-import { RouteImageReadyGate } from './RouteImageReadyGate';
+import { RouteLoadingScreen } from './RouteLoadingScreen';
 
 afterEach(() => {
   vi.useRealTimers();
+  window.localStorage.clear();
 });
 
 describe('RouteImageReadyGate image url helpers', () => {
@@ -84,4 +86,27 @@ describe('RouteImageReadyGate image url helpers', () => {
     expect(visibilityGate?.getAttribute('aria-hidden')).toBe('false');
     expect(visibilityGate?.style.visibility).toBe('visible');
   });
+
+  it('uses the saved platform theme tokens for the route loading screen', () => {
+    window.localStorage.setItem(
+      'tavernrealms.settings.v1',
+      JSON.stringify({
+        version: 1,
+        musicVolume: 0.42,
+        platformTheme: 'dark',
+      }),
+    );
+
+    const { container } = render(
+      createElement(RouteLoadingScreen, {
+        eyebrow: '正在载入游戏',
+        text: '正在载入冒险...',
+      }),
+    );
+    const shell = container.firstElementChild;
+
+    expect(shell?.classList.contains('platform-theme')).toBe(true);
+    expect(shell?.classList.contains('platform-theme--dark')).toBe(true);
+    expect(shell?.className).toContain('bg-[image:var(--platform-body-fill)]');
+  });
 });

src/routing/RouteLoadingScreen.tsx

@@ -1,3 +1,12 @@
+import { readSavedSettings } from '../persistence/gameSettingsStorage';
+
+function resolveRouteLoadingPlatformThemeClass() {
+  // 中文注释：路由级等待态早于 AuthUiContext 挂载，只能从本地设置读取平台主题。
+  return readSavedSettings().platformTheme === 'dark'
+    ? 'platform-theme--dark'
+    : 'platform-theme--light';
+}
+
 export function RouteLoadingScreen({
   eyebrow,
   text,
@@ -5,11 +14,19 @@ export function RouteLoadingScreen({
   eyebrow: string;
   text: string;
 }) {
+  const platformThemeClass = resolveRouteLoadingPlatformThemeClass();
+
   return (
-    <div className="flex min-h-screen items-center justify-center bg-[#0d1016] px-6 text-zinc-200">
+    <div
+      className={`platform-ui-shell platform-theme ${platformThemeClass} flex min-h-screen items-center justify-center bg-[image:var(--platform-body-fill)] px-6 text-[var(--platform-text-base)]`}
+    >
       <div className="text-center">
-        <div className="text-sm tracking-[0.26em] text-zinc-500">{eyebrow}</div>
-        <div className="mt-3 text-lg font-semibold text-white">{text}</div>
+        <div className="text-sm tracking-[0.26em] text-[var(--platform-text-soft)]">
+          {eyebrow}
+        </div>
+        <div className="mt-3 text-lg font-semibold text-[var(--platform-text-strong)]">
+          {text}
+        </div>
       </div>
     </div>
   );