diff --git a/src/components/Player/index.tsx b/src/components/Player/index.tsx index 8c83fb0..1073e58 100644 --- a/src/components/Player/index.tsx +++ b/src/components/Player/index.tsx @@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from 'react' import Slider from 'rc-slider' import { usePlayer } from '../../contexts/PlayerContext' +import { useTheme } from '../../contexts/ThemeContext' import 'rc-slider/assets/index.css' @@ -28,6 +29,8 @@ export function Player() { clearPlayerState } = usePlayer() + const {isDark} = useTheme() + const audioRef = useRef(null) const episode = episodeList[currentEpisodeIndex] const [progress, setProgess] = useState(0) @@ -92,9 +95,9 @@ export function Player() { max={episode.duration} value={progress} onChange={handleSeek} - trackStyle={{backgroundColor: '#04d361'}} - railStyle={{backgroundColor: '#9f75ff'}} - handleStyle={{borderColor: '#04d361', borderWidth: 4}} + trackStyle={isDark ? {backgroundColor: 'rgb(4, 211, 97)'} : {backgroundColor: '#04d361'}} + railStyle={isDark ? {backgroundColor: '#9F75FF'} : {backgroundColor: '#9f75ff'}} + handleStyle={isDark ? {borderColor: 'rgb(4, 211, 97)', borderWidth: 4} : {borderColor: '#04d361', borderWidth: 4}} /> ) : (
diff --git a/src/components/Player/styles.module.sass b/src/components/Player/styles.module.sass index cf43037..f1294af 100644 --- a/src/components/Player/styles.module.sass +++ b/src/components/Player/styles.module.sass @@ -110,7 +110,7 @@ &[data-action='play'] width: 4rem height: 4rem - background: var(--purple-300) + background: var(--bg-play) border-radius: 1rem &:hover:not(:disabled) diff --git a/src/styles/globals.sass b/src/styles/globals.sass index 41515f1..f90b410 100644 --- a/src/styles/globals.sass +++ b/src/styles/globals.sass @@ -20,6 +20,7 @@ html --bg-pages: #F7F8FA --bg-player: #8257E5 --bg-items: #FFF + --bg-play: #9F75FF --gradient-player: linear-gradient(143.8deg,rgba(145, 100, 250, 0.8) 0%,rgba(0, 0, 0, 0) 100%) @@ -40,6 +41,7 @@ html --bg-pages: #242424 --bg-player: #4a4a4a --bg-items: #3b3b3b + --bg-play: #3b3b3b --gradient-player: linear-gradient(143.8deg,rgba(59, 59, 59, 0.8) 0%,rgba(0, 0, 0, 0) 100%)