From 14b2046de751c9fd3751b50c046c4cc0b7f96d69 Mon Sep 17 00:00:00 2001
From: Goytai <dev.goytai@gmail.com>
Date: Sun, 25 Apr 2021 16:01:16 -0300
Subject: [PATCH] Dark Mode

---
 src/components/Player/index.tsx          | 9 ++++++---
 src/components/Player/styles.module.sass | 2 +-
 src/styles/globals.sass                  | 2 ++
 3 files changed, 9 insertions(+), 4 deletions(-)

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<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
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%)