akai-tools/readest
2
0
Fork 0
forked from akai/readest
Code Pull Requests Activity

Dynamically set theme color for PWA browser UI elements (#213)

Browse Source
This commit is contained in:
Huang Xin
2025-01-22 01:07:20 +01:00
parent ee0d7d7ad0
commit c8bfb64ad3
5 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/readest-app/next.config.mjs
+1 -1
View File
@@ -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);
apps/readest-app/public/manifest.json
+1 -2
View File
@@ -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": [
{
apps/readest-app/src/app/layout.tsx
+1 -4
View File
@@ -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 }) {
apps/readest-app/src/hooks/useTheme.ts
+8 -5
View File
@@ -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]);
apps/readest-app/src/pages/_app.tsx
+13 -1
View File
@@ -11,8 +11,20 @@ function MyApp({ Component, pageProps }: AppProps) {
<Head>
<meta
name='viewport'
content='width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no'
content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
/>
<meta name='application-name' content='Readest' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='default' />
<meta name='apple-mobile-web-app-title' content='Readest' />
<meta
name='description'
content='Readest is an open-source eBook reader supporting EPUB, PDF, and sync across devices.'
/>
<meta name='format-detection' content='telephone=no' />
<meta name='mobile-web-app-capable' content='yes' />
<meta name='theme-color' content='white' />
<link rel='manifest' href='/manifest.json' />
</Head>
<Providers>
<Component {...pageProps} />