Fix components using default theme

src/apps/experimental/components/AppToolbar/RemotePlayButton.tsx

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Cast from '@mui/icons-material/Cast';
 import IconButton from '@mui/material/IconButton';
-import { useTheme } from '@mui/material/styles';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 import Tooltip from '@mui/material/Tooltip';
 
 import { playbackManager } from 'components/playback/playbackmanager';
@@ -15,7 +15,6 @@ import RemotePlayMenu, { ID } from './menus/RemotePlayMenu';
 import RemotePlayActiveMenu, { ID as ACTIVE_ID } from './menus/RemotePlayActiveMenu';
 
 const RemotePlayButton = () => {
-    const theme = useTheme();
     const [ playerInfo, setPlayerInfo ] = useState(playbackManager.getPlayerInfo());
 
     const updatePlayerInfo = useCallback(() => {
@@ -70,9 +69,10 @@ const RemotePlayButton = () => {
                             aria-haspopup='true'
                             onClick={onRemotePlayActiveButtonClick}
                             color='inherit'
-                            sx={{
-                                color: theme.palette.primary.main
-                            }}
+                            // eslint-disable-next-line react/jsx-no-bind
+                            sx={(theme) => ({
+                                color: theme.vars.palette.primary.main
+                            })}
                         >
                             {playerInfo.deviceName || playerInfo.name}
                         </Button>

src/components/UserAvatar.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
 import Avatar from '@mui/material/Avatar';
-import { useTheme } from '@mui/material/styles';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 
 import { useApi } from 'hooks/useApi';
 
@@ -11,7 +11,6 @@ interface UserAvatarProps {
 
 const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
     const { api } = useApi();
-    const theme = useTheme();
 
     return user ? (
         <Avatar
@@ -21,12 +20,13 @@ const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
                     `${api.basePath}/Users/${user.Id}/Images/Primary?tag=${user.PrimaryImageTag}` :
                     undefined
             }
-            sx={{
+            // eslint-disable-next-line react/jsx-no-bind
+            sx={(theme) => ({
                 bgcolor: api && user.Id && user.PrimaryImageTag ?
-                    theme.palette.background.paper :
-                    theme.palette.primary.dark,
+                    theme.vars.palette.background.paper :
+                    theme.vars.palette.primary.dark,
                 color: 'inherit'
-            }}
+            })}
         />
     ) : null;
 };

src/components/mediainfo/StarIcons.tsx

@@ -2,7 +2,7 @@ import React, { type FC } from 'react';
 import classNames from 'classnames';
 import StarIcon from '@mui/icons-material/Star';
 import Box from '@mui/material/Box';
-import { useTheme } from '@mui/material/styles';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 
 interface StarIconsProps {
     className?: string;
@@ -10,7 +10,6 @@ interface StarIconsProps {
 }
 
 const StarIcons: FC<StarIconsProps> = ({ className, communityRating }) => {
-    const theme = useTheme();
     const cssClass = classNames(
         'mediaInfoItem',
         'starRatingContainer',
@@ -21,9 +20,10 @@ const StarIcons: FC<StarIconsProps> = ({ className, communityRating }) => {
         <Box className={cssClass}>
             <StarIcon
                 fontSize={'small'}
-                sx={{
-                    color: theme.palette.starIcon.main
-                }}
+                // eslint-disable-next-line react/jsx-no-bind
+                sx={(theme) => ({
+                    color: theme.vars.palette.starIcon.main
+                })}
             />
             {communityRating.toFixed(1)}
         </Box>

src/elements/emby-progressbar/AutoTimeProgressBar.tsx

@@ -1,7 +1,8 @@
 import React, { type FC, useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
-import { useTheme } from '@mui/material/styles';
+import type {} from '@mui/material/themeCssVarsAugmentation';
+
 import type { ProgressOptions } from 'types/progressOptions';
 
 interface AutoTimeProgressBarProps {
@@ -23,7 +24,6 @@ const AutoTimeProgressBar: FC<AutoTimeProgressBarProps> = ({
 }) => {
     const [progress, setProgress] = useState(pct);
     const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const theme = useTheme();
 
     const onAutoTimeProgress = useCallback(() => {
         const start = parseInt(starTtime.toString(), 10);
@@ -66,12 +66,15 @@ const AutoTimeProgressBar: FC<AutoTimeProgressBarProps> = ({
             className={progressBarClass}
             variant='determinate'
             value={progress}
-            sx={{
+            // eslint-disable-next-line react/jsx-no-bind
+            sx={(theme) => ({
                 [`& .${linearProgressClasses.bar}`]: {
                     borderRadius: 5,
-                    backgroundColor: isRecording ? theme.palette.error.main : theme.palette.primary.main
+                    backgroundColor: isRecording ?
+                        theme.vars.palette.error.main :
+                        theme.vars.palette.primary.main
                 }
-            }}
+            })}
         />
     );
 };