Set appbar color on light theme

src/components/atoms/SearchTextField.tsx

@@ -7,19 +7,26 @@
  */
 
 import TextField, { TextFieldProps } from '@mui/material/TextField';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import CancelIcon from '@mui/icons-material/Cancel';
 
-export const SearchTextField = ({ onCancel, ...textFieldProps }: TextFieldProps & { onCancel: () => void }) => (
+export const SearchTextField = ({
+    onCancel,
+    cancelButtonProps,
+    ...textFieldProps
+}: TextFieldProps & { onCancel: () => void; cancelButtonProps?: IconButtonProps }) => (
     <TextField
         {...textFieldProps}
         slotProps={{
             input: {
                 ...textFieldProps.InputProps,
+                sx: {
+                    color: 'inherit',
+                },
                 endAdornment: textFieldProps.InputProps?.endAdornment ?? (
                     <InputAdornment position="end">
-                        <IconButton onClick={() => onCancel()}>
+                        <IconButton {...cancelButtonProps} onClick={() => onCancel()}>
                             <CancelIcon />
                         </IconButton>
                     </InputAdornment>

src/components/collection/SelectableCollectionSelectAll.tsx

@@ -24,7 +24,13 @@ export const SelectableCollectionSelectAll = ({
     return (
         <Tooltip title={t(!areAllItemsSelected ? 'global.button.select_all' : 'global.button.clear')}>
             <Checkbox
-                sx={{ padding: '8px' }}
+                sx={{
+                    padding: '8px',
+                    color: 'inherit',
+                    '&.Mui-checked': {
+                        color: 'inherit',
+                    },
+                }}
                 checked={areAllItemsSelected}
                 indeterminate={!areNoItemsSelected && !areAllItemsSelected}
                 onChange={(_, checked) => onChange(checked)}

src/components/collection/SelectableCollectionSelectMode.tsx

@@ -39,7 +39,13 @@ export const SelectableCollectionSelectMode = ({
             <Tooltip title={t(!isActive ? 'global.button.select_all' : 'global.button.cancel')}>
                 <Checkbox
                     checkedIcon={<ClearIcon />}
-                    sx={{ padding: '8px' }}
+                    sx={{
+                        padding: '8px',
+                        color: 'inherit',
+                        '&.Mui-checked': {
+                            color: 'inherit',
+                        },
+                    }}
                     checked={isActive}
                     onChange={(_, checked) => onModeChange(checked)}
                 />

src/components/library/LibraryToolbarMenu.tsx

@@ -27,7 +27,7 @@ export const LibraryToolbarMenu: React.FC = () => {
     return (
         <>
             <Tooltip title={t('settings.title')}>
-                <IconButton onClick={() => setOpen(!open)} color={active ? 'warning' : 'default'}>
+                <IconButton onClick={() => setOpen(!open)} color={active ? 'warning' : 'inherit'}>
                     <FilterList />
                 </IconButton>
             </Tooltip>

src/components/library/UpdateChecker.tsx

@@ -132,6 +132,7 @@ export function UpdateChecker({
                                 : { onClick: () => onClick() })}
                             onMouseEnter={() => setIsHovered(true)}
                             onMouseLeave={() => setIsHovered(false)}
+                            color="inherit"
                         >
                             {!isRunning ? (
                                 <RefreshIcon />
@@ -139,7 +140,11 @@ export function UpdateChecker({
                                 <>
                                     <ClearIcon sx={{ opacity: Number(isTouchDevice || isHovered) }} />
                                     <Stack sx={{ position: 'absolute' }}>
-                                        <Progress progress={progress} showText={!isTouchDevice && !isHovered} />
+                                        <Progress
+                                            progress={progress}
+                                            showText={!isTouchDevice && !isHovered}
+                                            progressProps={{ color: 'inherit' }}
+                                        />
                                     </Stack>
                                 </>
                             )}

src/components/manga/MangaToolbarMenu.tsx

@@ -56,6 +56,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
                                 onRefresh();
                             }}
                             disabled={refreshing}
+                            color="inherit"
                         >
                             <Refresh />
                         </IconButton>
@@ -68,7 +69,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
                                     state={{ mangaTitle: manga.title }}
                                     style={{ textDecoration: 'none', color: 'inherit' }}
                                 >
-                                    <IconButton>
+                                    <IconButton color="inherit">
                                         <SyncAltIcon />
                                     </IconButton>
                                 </Link>
@@ -78,6 +79,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
                                     onClick={() => {
                                         openCategorySelect(true);
                                     }}
+                                    color="inherit"
                                 >
                                     <Label />
                                 </IconButton>
@@ -94,6 +96,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
                         aria-haspopup="true"
                         aria-expanded={open ? 'true' : undefined}
                         onClick={(e) => setAnchorEl(e.currentTarget)}
+                        color="inherit"
                     >
                         <MoreHoriz />
                     </IconButton>

src/components/navbar/DefaultNavBar.tsx

@@ -25,6 +25,7 @@ import { useLocation } from 'react-router-dom';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import MenuIcon from '@mui/icons-material/Menu';
 import Stack from '@mui/material/Stack';
+import { useTheme } from '@mui/material/styles';
 import { NavbarItem } from '@/typings';
 import { NavBarContext } from '@/components/context/NavbarContext';
 import { useBackButton } from '@/util/useBackButton.ts';
@@ -76,6 +77,7 @@ export function DefaultNavBar() {
     const { title, action, override, isCollapsed, setIsCollapsed, setAppBarHeight, navBarWidth, setNavBarWidth } =
         useContext(NavBarContext);
 
+    const theme = useTheme();
     const { pathname } = useLocation();
     const handleBack = useBackButton();
 
@@ -123,9 +125,8 @@ export function DefaultNavBar() {
                     position: 'fixed',
                     marginLeft: actualNavBarWidth,
                     width: `calc(100% - ${actualNavBarWidth}px)`,
-                    zIndex: (theme) => theme.zIndex.drawer + 1,
+                    zIndex: theme.zIndex.drawer + 1,
                 }}
-                color="default"
             >
                 <Toolbar sx={{ position: 'relative' }}>
                     {!isMobileWidth && (
@@ -138,7 +139,7 @@ export function DefaultNavBar() {
                                 alignItems: 'center',
                             }}
                         >
-                            <IconButton aria-label="open drawer" onClick={() => setIsCollapsed(false)}>
+                            <IconButton aria-label="open drawer" onClick={() => setIsCollapsed(false)} color="inherit">
                                 <MenuIcon />
                             </IconButton>
                         </Stack>
@@ -159,6 +160,7 @@ export function DefaultNavBar() {
                                 size="large"
                                 aria-label="menu"
                                 onClick={handleBack}
+                                color="inherit"
                             >
                                 {getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
                             </IconButton>

src/components/source/GridLayouts.tsx

@@ -50,6 +50,7 @@ export function GridLayouts({
                     aria-controls={open ? 'account-menu' : undefined}
                     aria-haspopup="true"
                     aria-expanded={open ? 'true' : undefined}
+                    color="inherit"
                 >
                     <ViewModuleIcon />
                 </IconButton>

src/components/tracker/TrackerSearch.tsx

@@ -119,7 +119,7 @@ export const TrackerSearch = ({
                                     <PopupState variant="popover" popupId="tracker-search-info">
                                         {(popupState) => (
                                             <>
-                                                <IconButton {...bindTrigger(popupState)}>
+                                                <IconButton {...bindTrigger(popupState)} color="inherit">
                                                     <InfoIcon />
                                                 </IconButton>
                                                 <Popover

src/components/util/AppbarSearch.tsx

@@ -13,6 +13,7 @@ import Tooltip from '@mui/material/Tooltip';
 import { useQueryParam, StringParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
+import { useTheme } from '@mui/material/styles';
 import { SearchTextField } from '@/components/atoms/SearchTextField.tsx';
 
 interface IProps {
@@ -22,6 +23,7 @@ interface IProps {
 export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
     const { isClosable = true } = props;
 
+    const theme = useTheme();
     const { t } = useTranslation();
 
     const [prevLocationKey, setPrevLocationKey] = useState<string>();
@@ -103,13 +105,27 @@ export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
                 }}
                 onBlur={handleBlur}
                 inputRef={inputRef}
+                sx={{
+                    ...theme.applyStyles('light', {
+                        '& .MuiInput-underline:before': {
+                            borderBottomColor: 'primary.contrastText', // Default color
+                        },
+                        '& .MuiInput-underline:hover:before': {
+                            borderBottomColor: 'primary.contrastText', // Hover color
+                        },
+                        '& .MuiInput-underline:after': {
+                            borderBottomColor: 'primary.dark', // Focused color
+                        },
+                    }),
+                }}
+                cancelButtonProps={{ sx: { ...theme.applyStyles('light', { color: 'primary.contrastText' }) } }}
             />
         );
     }
 
     return (
         <Tooltip title={t('search.title.search')}>
-            <IconButton onClick={() => updateSearchOpenState(true)}>
+            <IconButton onClick={() => updateSearchOpenState(true)} color="inherit">
                 <SearchIcon />
             </IconButton>
         </Tooltip>

src/components/util/Progress.tsx

@@ -7,12 +7,20 @@
  */
 
 import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
+import CircularProgress, { CircularProgressProps } from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
 
-export const Progress = ({ progress, showText = true }: { progress: number; showText?: boolean }) => (
+export const Progress = ({
+    progress,
+    showText = true,
+    progressProps = {},
+}: {
+    progress: number;
+    showText?: boolean;
+    progressProps?: CircularProgressProps;
+}) => (
     <Box sx={{ display: 'grid', placeItems: 'center', position: 'relative' }}>
-        <CircularProgress variant="determinate" value={progress} />
+        <CircularProgress {...progressProps} variant="determinate" value={progress} />
         {showText && (
             <Box sx={{ position: 'absolute' }}>
                 <Typography

src/screens/DownloadQueue.tsx

@@ -139,13 +139,13 @@ export const DownloadQueue: React.FC = () => {
         setAction(
             <>
                 <Tooltip title={t('download.queue.label.delete_all')}>
-                    <IconButton onClick={clearQueue} size="large">
+                    <IconButton onClick={clearQueue} size="large" color="inherit">
                         <DeleteSweepIcon />
                     </IconButton>
                 </Tooltip>
 
                 <Tooltip title={t(status === 'STOPPED' ? 'global.button.start' : 'global.button.stop')}>
-                    <IconButton onClick={toggleQueueStatus} size="large" disabled={isQueueEmpty}>
+                    <IconButton onClick={toggleQueueStatus} size="large" disabled={isQueueEmpty} color="inherit">
                         {status === 'STOPPED' ? <PlayArrowIcon /> : <PauseIcon />}
                     </IconButton>
                 </Tooltip>

src/screens/Extensions.tsx

@@ -179,7 +179,7 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
             <>
                 <AppbarSearch />
                 <Tooltip title={t('extension.action.label.install_external')}>
-                    <IconButton onClick={() => inputRef.current?.click()} size="large">
+                    <IconButton onClick={() => inputRef.current?.click()} size="large" color="inherit">
                         <AddIcon />
                     </IconButton>
                 </Tooltip>

src/screens/Library.tsx

@@ -6,10 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Chip from '@mui/material/Chip';
+import Chip, { ChipProps } from '@mui/material/Chip';
 import Tab from '@mui/material/Tab';
 import { styled } from '@mui/material/styles';
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useQueryParam, NumberParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -45,8 +45,8 @@ const TitleWithSizeTag = styled('span')({
     alignItems: 'center',
 });
 
-const TitleSizeTag = (props: React.ComponentProps<typeof Chip>) => (
+const TitleSizeTag = ({ sx, ...props }: ChipProps) => (
-    <Chip {...props} size="small" sx={{ marginLeft: '5px' }} />
+    <Chip {...props} size="small" sx={{ ...sx, marginLeft: '5px' }} />
 );
 
 export function Library() {
@@ -152,7 +152,7 @@ export function Library() {
         const navBarTitle = (
             <TitleWithSizeTag>
                 {title}
-                {options.showTabSize && <TitleSizeTag label={librarySize} />}
+                {options.showTabSize && <TitleSizeTag sx={{ color: 'inherit' }} label={librarySize} />}
             </TitleWithSizeTag>
         );
         setTitle(navBarTitle, title);

src/screens/Sources.tsx

@@ -96,7 +96,7 @@ export function Sources() {
         setAction(
             <>
                 <Tooltip title={t('search.title.global_search')}>
-                    <IconButton onClick={() => navigate('/sources/all/search/')} size="large">
+                    <IconButton onClick={() => navigate('/sources/all/search/')} size="large" color="inherit">
                         <TravelExploreIcon />
                     </IconButton>
                 </Tooltip>

src/screens/settings/LibraryDuplicates.tsx

@@ -126,7 +126,7 @@ export const LibraryDuplicates = () => {
                 <PopupState variant="popover" popupId="library-dupliactes-settings">
                     {(popupState) => (
                         <>
-                            <IconButton {...bindTrigger(popupState)}>
+                            <IconButton {...bindTrigger(popupState)} color="inherit">
                                 <SettingsIcon />
                             </IconButton>
                             <Menu {...bindMenu(popupState)}>