diff --git a/apps/readest-app/next.config.mjs b/apps/readest-app/next.config.mjs
index 1c0e8ba9..3a0382d0 100644
--- a/apps/readest-app/next.config.mjs
+++ b/apps/readest-app/next.config.mjs
@@ -27,7 +27,7 @@ const nextConfig = {
export default withPWA({
dest: 'public',
- disable: process.env.NODE_ENV === 'development' || appPlatform !== 'web',
+ disable: appPlatform !== 'web',
register: true,
skipWaiting: true,
})(nextConfig);
diff --git a/apps/readest-app/public/manifest.json b/apps/readest-app/public/manifest.json
index 00a377ec..16698779 100644
--- a/apps/readest-app/public/manifest.json
+++ b/apps/readest-app/public/manifest.json
@@ -1,10 +1,9 @@
{
- "name": "Readest - Your Ultimate eBook Reader",
+ "name": "Readest",
"short_name": "Readest",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
- "theme_color": "#000000",
"description": "Readest is an open-source eBook reader supporting EPUB, PDF, and sync across devices.",
"icons": [
{
diff --git a/apps/readest-app/src/app/layout.tsx b/apps/readest-app/src/app/layout.tsx
index e0655b44..046f59bd 100644
--- a/apps/readest-app/src/app/layout.tsx
+++ b/apps/readest-app/src/app/layout.tsx
@@ -36,10 +36,7 @@ export const viewport = {
initialScale: 1,
maximumScale: 1,
userScalable: false,
- themeColor: [
- { media: '(prefers-color-scheme: light)', color: 'white' },
- { media: '(prefers-color-scheme: dark)', color: 'black' },
- ],
+ themeColor: 'white',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
diff --git a/apps/readest-app/src/hooks/useTheme.ts b/apps/readest-app/src/hooks/useTheme.ts
index bfa9b3b8..c95181ae 100644
--- a/apps/readest-app/src/hooks/useTheme.ts
+++ b/apps/readest-app/src/hooks/useTheme.ts
@@ -3,6 +3,7 @@
import { useEffect, useState } from 'react';
import { ThemeCode } from '@/utils/style';
import { themes } from '@/styles/themes';
+import { isWebAppPlatform } from '@/services/environment';
export type ThemeMode = 'auto' | 'light' | 'dark';
@@ -76,11 +77,13 @@ export const useTheme = () => {
const isDarkMode = themeMode === 'dark' || (themeMode === 'auto' && systemIsDarkMode);
const theme = themes.find((t) => t.name === themeColor);
const palette = isDarkMode ? theme!.colors.dark : theme!.colors.light;
- setThemeCode({
- bg: palette['base-100'],
- fg: palette['base-content'],
- primary: palette.primary,
- });
+ const bg = palette['base-100'];
+ const fg = palette['base-content'];
+ const primary = palette.primary;
+ if (isWebAppPlatform()) {
+ document.querySelector('meta[name="theme-color"]')?.setAttribute('content', bg);
+ }
+ setThemeCode({ bg, fg, primary });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [themeMode, themeColor, isDarkMode]);
diff --git a/apps/readest-app/src/pages/_app.tsx b/apps/readest-app/src/pages/_app.tsx
index c02ac645..8e501f95 100644
--- a/apps/readest-app/src/pages/_app.tsx
+++ b/apps/readest-app/src/pages/_app.tsx
@@ -11,8 +11,20 @@ function MyApp({ Component, pageProps }: AppProps) {
+
+
+
+
+
+
+
+
+