UI patch for dark mode

Author: hmziqrs

README.md

@@ -30,23 +30,6 @@
 > Please note that this project's code is not meant for beginners! If you're just getting started with flutter I recommend you to explore some ToDo and basic setState apps and get yourself familiar with react eco-system becuase in this project intermediate and advance implementations are use which will confuse you and won't help much in terms of learning.
 
 - `init.js` initialize default settings like styles, theme & API.
-- `UI.dart` provides constant for building responsive UI.
-- `blocs/` Intially I was going to implement Rest APIs but that seemed unnecessary & a lot of work So I'll probably remove `blocs/` in futrue.
-- `configs/AppDimensions.dart` this is the magical file. It provides the app with:
-  - My custom size unit based on device's width, height & pixel density.
-  - Responsive containers.
-  - Padding multiplier unit (I learned it with experience instead of using 1,2,3px should use multiplier. it helps maintain constancy around the app).
-- `Widgets/Screen.dart` This widget is necessary when building a new screen.
-  - configure theme & font style.
-  - You can show popUps. `final screenKey = GlobalKey<ScreenState>();` & `this.screenKey.showPopUp(message: "your message");`
-  - It also recieve a `belowBuilder` parameter which builds custom background (This enables us to build Parallax, Animated background & Any thing you could imagine in background). you can find an example in `Screens/Download/Download.dart`
-- Code structure is pretty much simple.
-  - Don't import anything form ScreenA in ScreenB.
-  - Don't import anthing from Screen/Widget in universal files.
-  - Don't import anthing from ScreenA specific Widget in universal files.
-  - Each Screen will have `Dimensions.dart` where you can write Screen's responsive logic.
-  - I didn't use snake_case in naming convention just becuase I don't prefer it.
-  - I use `this` for class's properties & methods I helps keep track of vriables & functions.
 
 
 ## Show support
@@ -61,14 +44,6 @@
 
 ## Download
 
-<div id="downloads">
-  <a href="https://play.google.com/store/apps/details?id=com.onemdev.flutter_ui_challenges">
-    <img src="https://raw.githubusercontent.com/hackerhgl/flutter-ui-designs/master/.github/assets/google-play.png" alt="Play Store badge" width="200" />
-  </a>
-  <a href="https://github.com/hackerhgl/flutter-ui-designs/releases/latest/download/app-release.apk">
-    <img src="https://raw.githubusercontent.com/hackerhgl/flutter-ui-designs/master/.github/assets/android.png" alt="Android badge" width="200" />
-  </a>
-</div>
 
 ## License
 

app/contexts/Theme/index.js

@@ -74,6 +74,7 @@ export default function ThemeContextProvider({ children }) {
       <ThemeContext.Provider
         value={{
           ...state,
+          isDark,
           setTheme,
           setDefaultStatusBar,
         }}

app/screens/Settings/Player/index.js

@@ -152,8 +152,9 @@ export default function Player({ isActive, mp3, toggle, state, updateParent }) {
               minimumValue={0.0}
               maximumValue={state.player.duration}
               value={status.progress.asMilliseconds()}
-              maximumTrackTintColor="#000000"
               minimumTrackTintColor={colors.primary}
+              thumbTintColor={isDark ? colors.white : colors.black}
+              maximumTrackTintColor={isDark ? colors.white : colors.black}
               style={styles.bodySlider}
               onSlidingStart={() => {
                 runProgressBar(false);

app/screens/Settings/Player/styles.js

@@ -52,6 +52,7 @@ const styles = new DynamicStyleSheet({
   },
   playIcon: {
     fontSize: scaling(7),
+    color: new DynamicValue(colors.dark, colors.white),
   },
   bodySlider: {
     flex: 1,

app/screens/Settings/index.js

@@ -23,7 +23,7 @@ function SettingsScreen({ navigation }) {
   const [volume, setVolume] = useState(state.player.volume);
   const [activeTack, setTrack] = useState(-1);
   const styles = useDynamicStyleSheet(rawStyles);
-  const { theme, setTheme } = useContext(ThemeContext);
+  const { theme, setTheme, isDark } = useContext(ThemeContext);
 
   useEffect(() => {
     state.player.volume = volume;
@@ -40,7 +40,6 @@ function SettingsScreen({ navigation }) {
           maximumValue={1}
           style={styles.volumeSlider}
           value={volume}
-          maximumTrackTintColor="#000000"
           onSlidingStart={() => {
             if (!state.player.isPlaying) {
               forcePlay = true;
@@ -54,6 +53,8 @@ function SettingsScreen({ navigation }) {
             }
           }}
           minimumTrackTintColor={colors.primary}
+          thumbTintColor={isDark ? colors.white : colors.black}
+          maximumTrackTintColor={isDark ? colors.white : colors.black}
           onValueChange={(val) => {
             setVolume(val);
           }}

app/screens/Settings/styles.js

@@ -23,7 +23,8 @@ const styles = new DynamicStyleSheet({
   },
   radioBase: {
     flexDirection: 'row',
-    marginTop: scaling(3),
+    marginVertical: scaling(1.5),
+    paddingVertical: scaling(1),
   },
   radioLabel: {
     marginLeft: scaling(3),