diff --git a/components/stats/bar-stats.js b/components/stats/bar-stats.js index 5e41a2b..a86e11c 100644 --- a/components/stats/bar-stats.js +++ b/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' + }) }, })) diff --git a/components/teks/lekte.js b/components/teks/lekte.js index ead8262..667e506 100644 --- a/components/teks/lekte.js +++ b/components/teks/lekte.js @@ -28,8 +28,10 @@ const Widget = styled('div')(({theme}) => ({ margin: 'auto', position: 'relative', zIndex: 1, - backgroundColor: - theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.6)' : grey[200], + backgroundColor: 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', },