improve page header readability on all themes

src/renderer/components/page-header/page-header.module.css

@@ -4,7 +4,9 @@
     visibility: hidden;
     width: 100%;
     height: 65px;
+    overflow: hidden;
     pointer-events: none;
+    background: var(--theme-colors-background);
     opacity: 0;
 }
 

src/renderer/components/page-header/page-header.tsx

@@ -5,9 +5,9 @@ import { CSSProperties, memo, ReactNode, RefObject, useEffect, useRef } from 're
 
 import styles from './page-header.module.css';
 
+import { LibraryBackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay';
 import { useShouldPadTitlebar } from '/@/renderer/hooks';
 import { useWindowSettings } from '/@/renderer/store/settings.store';
-import { useAppTheme } from '/@/renderer/themes/use-app-theme';
 import { Flex, FlexProps } from '/@/shared/components/flex/flex';
 import { Platform } from '/@/shared/types/types';
 
@@ -49,7 +49,6 @@ const BasePageHeader = ({
     const ref = useRef(null);
     const padRight = useShouldPadTitlebar();
     const { windowBarStyle } = useWindowSettings();
-    const { mode } = useAppTheme();
 
     const isInView = useInView({
         current: target?.current || null,
@@ -125,20 +124,7 @@ const BasePageHeader = ({
                     </AnimatePresence>
                 </div>
                 {backgroundColor && (
-                    <>
+                    <LibraryBackgroundOverlay backgroundColor={backgroundColor} headerRef={ref} />
-                        <div
-                            className={styles.backgroundImage}
-                            style={{
-                                background: backgroundColor,
-                            }}
-                        />
-                        <div
-                            className={clsx(styles.backgroundImageOverlay, {
-                                [styles.dark]: backgroundColor && mode === 'dark',
-                                [styles.light]: backgroundColor && mode === 'light',
-                            })}
-                        />
-                    </>
                 )}
             </Flex>
         </>