34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { StatusBar, Style } from '@capacitor/status-bar';
|
|
import { Capacitor } from '@capacitor/core';
|
|
import { useTheme } from 'next-themes';
|
|
|
|
export const useMobileStatusBar = () => {
|
|
const { resolvedTheme } = useTheme();
|
|
|
|
useEffect(() => {
|
|
// Only run on native platforms
|
|
if (Capacitor.isNativePlatform()) {
|
|
const setStatusBarStyle = async () => {
|
|
try {
|
|
// On Android, make sure the status bar overlays the WebView (transparent)
|
|
if (Capacitor.getPlatform() === 'android') {
|
|
await StatusBar.setOverlaysWebView({ overlay: true });
|
|
}
|
|
|
|
// Determine style based on theme
|
|
// If theme is dark => Use Dark style (usually white text)
|
|
// If theme is light => Use Light style (usually dark text)
|
|
const style = resolvedTheme === 'dark' ? Style.Dark : Style.Light;
|
|
|
|
await StatusBar.setStyle({ style });
|
|
} catch (e) {
|
|
console.error('Failed to configure status bar:', e);
|
|
}
|
|
};
|
|
|
|
setStatusBarStyle();
|
|
}
|
|
}, [resolvedTheme]);
|
|
};
|