Replace palette by applyStyles

components/stats/bar-stats.js

@@ -8,11 +8,17 @@ const BorderLinearProgress = styled(LinearProgress)(({theme}) => ({
   height: 10,
   borderRadius: 5,
   [`&.${linearProgressClasses.colorPrimary}`]: {
-    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800],
+    backgroundColor: 200,
+    ...theme.applyStyles('dark', {
+      backgroundColor: 800
+    })
   },
   [`& .${linearProgressClasses.bar}`]: {
     borderRadius: 5,
-    backgroundColor: theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8',
+    backgroundColor: '#1a90ff',
+    ...theme.applyStyles('dark', {
+      backgroundColor: '#308fe8'
+    })
   },
 }))
 

components/teks/lekte.js

@@ -28,8 +28,10 @@ const Widget = styled('div')(({theme}) => ({
   margin: 'auto',
   position: 'relative',
   zIndex: 1,
-  backgroundColor:
+  backgroundColor: grey[200],
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.6)' : grey[200],
+  ...theme.applyStyles('dark', {
+    backgroundColor: 'rgba(0,0,0,0.6)'
+  }),
   backdropFilter: 'blur(40px)',
 }))
 
@@ -170,7 +172,10 @@ export default function Lekte({audio, url, parole}) {
           step={1}
           max={duration || 100}
           sx={{
-            color: theme.palette.mode === 'dark' ? '#fff' : 'rgba(0,0,0,0.87)',
+            color: 'rgba(0,0,0,0.87)',
+            ...theme.applyStyles('dark', {
+              color: '#fff'
+            }),
             height: 4,
             '& .MuiSlider-thumb': {
               width: 8,
@@ -237,7 +242,10 @@ export default function Lekte({audio, url, parole}) {
             defaultValue={volume}
             value={volume}
             sx={{
-              color: theme.palette.mode === 'dark' ? '#fff' : 'rgba(0,0,0,0.87)',
+              color: 'rgba(0,0,0,0.87)',
+              ...theme.applyStyles('dark', {
+                color: '#fff'
+              }),
               '& .MuiSlider-track': {
                 border: 'none',
               },