Theme changes

src/pages/settings/components/Theming/ThemePlaylistModal.tsx

@@ -33,7 +33,7 @@ function ThemePlaylistModal({
 	handleSavePlaylist: () => void;
 	allThemes: Theme[];
 }) {
-	const { theme, isMobile, modalStyle } = useCommonHooks();
+	const { isMobile } = useCommonHooks();
 	const [themeList, setThemeList] = useState<any>([]);
 
 	useEffect(() => {
@@ -57,13 +57,12 @@ function ThemePlaylistModal({
 				handleClose();
 				setThemeList('[]');
 			}}
-			style={modalStyle}
 		>
 			<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
 			<Modal.Content>
 				<Modal.Header style={{ justifyContent: 'center' }}>
 					<Group pos={'absolute'}>
-						<Text c={theme.backgroundColor}>Name:</Text>
+						<Text c={'var(--mantine-color-background-0)'}>Name:</Text>
 						<TextInput
 							className={textInputClasses.default}
 							classNames={textInputClasses}
@@ -74,12 +73,12 @@ function ThemePlaylistModal({
 							}
 							styles={{
 								label: {
-									color: theme.primaryColor,
+									color: 'var(--mantine-color-primary-0)',
 								},
 								input: {
-									color: theme.primaryColor,
+									color: 'var(--mantine-color-primary-0)',
 									border: 'none',
-									borderBottom: `1px solid ${theme.primaryColor}`,
+									borderBottom: '1px solid var(--mantine-color-primary-0)',
 								},
 							}}
 						/>