From 9642c85007d6b62d0e2262bc5b6773990d9a0b3b Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Thu, 8 Jan 2026 16:09:50 +0100
Subject: [PATCH] Fix total library size chip color in light mode

---
 CHANGELOG.md                             |  3 +++
 src/features/library/screens/Library.tsx | 10 ++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1d2d6320..ba754fac 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - (**Theme**) Adjust "primary color" of dynamic color theme on manga pages
 - (**Theme**) Increase max length of custom theme names to 32 (previously 16)
 
+### Fixed
+- (**Library**) Fix total library size chip color in light mode 
+
 ## [20251230.01] (r2937) - 2025-12-30
 
 ### Added
diff --git a/src/features/library/screens/Library.tsx b/src/features/library/screens/Library.tsx
index 033794e4..186bb91a 100644
--- a/src/features/library/screens/Library.tsx
+++ b/src/features/library/screens/Library.tsx
@@ -8,7 +8,7 @@
 
 import Chip, { ChipProps } from '@mui/material/Chip';
 import Tab from '@mui/material/Tab';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { useCallback, useMemo, useState } from 'react';
 import { useQueryParam, NumberParam, StringParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
@@ -60,6 +60,7 @@ const TitleSizeTag = ({ sx, ...props }: ChipProps) => (
 
 export function Library() {
     const { t } = useTranslation();
+    const theme = useTheme();
 
     const {
         settings: { showTabSize },
@@ -190,7 +191,12 @@ export function Library() {
     useAppTitle(
         <TitleWithSizeTag>
             {t('library.title')}
-            {showTabSize && <TitleSizeTag sx={{ color: 'inherit' }} label={librarySize} />}
+            {showTabSize && (
+                <TitleSizeTag
+                    sx={{ ...theme.applyStyles('light', { backgroundColor: 'background.paper' }) }}
+                    label={librarySize}
+                />
+            )}
         </TitleWithSizeTag>,
         t('library.title'),
         [t, showTabSize, librarySize],