Color Scheme Matching

[firstChairCoder]

We can implement the dark mode with useColorScheme hook from react native. This was my test case:

Colors.js

export default {
  light: {
    text: "#000",
    background: "#FFF",
  },
  dark: {
    text: "#FFF",
    background: "#000",
  },
};

App.js

import React from "react";
import {
  SafeAreaView,
  Text,
  StyleSheet,
  StatusBar,
  useColorScheme,
} from "react-native";

import Colors from "./Colors";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#011",
  },
  text: {
    color: "#FFF",
    fontSize: 24,
  },
});

export default function App() {
  const colorScheme = useColorScheme();
  return (
    <>
      <SafeAreaView
        style={[
          styles.container,
          { backgroundColor: Colors[colorScheme].background },
        ]}
      >
        <StatusBar
          barStyle={colorScheme === "dark" ? "light-content" : "dark-content"}
          backgroundColor={Colors[colorScheme].background}
        />
        <Text style={[styles.text, { color: Colors[colorScheme].text }]}>
          What time is it?
        </Text>
      </SafeAreaView>
    </>
  );
}

It works on my own end and toggles the background, text color and status bar background.

So applying to the calculator would be to change the background, button color, the different button colors and the result display text colors as well.

I could work on it today if you don't mind, mate.

[olatunjiemanuel]

Hey Wole, so I think creating an all purpose button and styling on the app.js page defeats the purpose of components as a whole. However since the coolers of each button are already being passed to the parent as props, I think we can manage color scheme from the home page using something like useContext. I will work on it for my end and push when I am done

[firstChairCoder]

Hey, Tunji

I think I catch your drift. An overarching context wrapper for the colorScheme. I've been assigned another task on the postpartum app, but I'd like to see your. Ode when you push.

Well done, bruv.

On Wed, Feb 2, 2022, 21:06 olatunjiemanuel @.***> wrote:

Hey Wole, so I think creating an all purpose button and styling on the app.js page defeats the purpose of components as a whole. However since the coolers of each button are already being passed to the parent as props, I think we can manage color scheme from the home page using something like useContext. I will work on it for my end and push when I am done

— Reply to this email directly, view it on GitHub https://github.com/olatunjiemanuel/Calculator-App/issues/4#issuecomment-1028312936, or unsubscribe https://github.com/notifications/unsubscribe-auth/APZD4DGBGUWLDCVINCAJDVTUZGFFHANCNFSM5NLFYJHA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you authored the thread.Message ID: @.***>