remove default bg from PageHeader

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

@@ -37,7 +37,7 @@ const variants: Variants = {
 
 export const PageHeader = ({
     animated,
-    backgroundColor = 'var(--theme-colors-background)',
+    backgroundColor,
     children,
     height,
     isHidden,
@@ -134,8 +134,8 @@ export const PageHeader = ({
                         />
                         <div
                             className={clsx(styles.backgroundImageOverlay, {
-                                [styles.dark]: mode === 'dark',
-                                [styles.light]: mode === 'light',
+                                [styles.dark]: backgroundColor && mode === 'dark',
+                                [styles.light]: backgroundColor && mode === 'light',
                             })}
                         />
                     </>

src/renderer/features/albums/components/album-list-header.tsx

@@ -23,7 +23,7 @@ export const AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
 
     return (
         <Stack gap={0}>
-            <PageHeader backgroundColor="var(--theme-colors-background)">
+            <PageHeader>
                 <LibraryHeaderBar>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>

src/renderer/features/artists/components/album-artist-list-header.tsx

@@ -23,7 +23,7 @@ export const AlbumArtistListHeader = ({ title }: AlbumArtistListHeaderProps) =>
 
     return (
         <Stack gap={0}>
-            <PageHeader backgroundColor="var(--theme-colors-background)">
+            <PageHeader>
                 <LibraryHeaderBar>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>

src/renderer/features/artists/components/artist-list-header.tsx

@@ -23,7 +23,7 @@ export const ArtistListHeader = ({ title }: ArtistListHeaderProps) => {
 
     return (
         <Stack gap={0}>
-            <PageHeader backgroundColor="var(--theme-colors-background)">
+            <PageHeader>
                 <LibraryHeaderBar>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>

src/renderer/features/genres/components/genre-list-header.tsx

@@ -23,7 +23,7 @@ export const GenreListHeader = ({ title }: GenreListHeaderProps) => {
 
     return (
         <Stack gap={0}>
-            <PageHeader backgroundColor="var(--theme-colors-background)">
+            <PageHeader>
                 <LibraryHeaderBar>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>

src/renderer/features/playlists/components/playlist-list-header.tsx

@@ -23,7 +23,7 @@ export const PlaylistListHeader = ({ title }: PlaylistListHeaderProps) => {
 
     return (
         <Stack gap={0}>
-            <PageHeader backgroundColor="var(--theme-colors-background)">
+            <PageHeader>
                 <LibraryHeaderBar>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>