Dark Mode

Goytai · Apr 25, 2021 · 14b2046 · 14b2046 · vercel · Apr 25, 2021
1 parent a583219
commit 14b2046
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git 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<HTMLAudioElement>(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}}
                             />
                         ) : (
                             <div className={styles.emptySlider} />

diff --git 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
@@ -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%)