Theme Config Fix

[mehradadimi]

After this PR, you only need to call a function called getStyle() and receive the styles based on the theme from the global file. You can always add your custom/local style as well and combine it with the global. But as well all know it is common practice to have a global styling setup and tweak it only if needed.

in global.tsx, the following is included:

export const colors = {
    light: {
        primary: "#ffffff",
        secondary: "#F2F2F2",
        tertiary: "#4B4B4B",
        accent: "#1DA1F2",
        tint: "#111827",
        text: "#111827",
    },
    dark: {
        primary: "#121212",
        secondary: "#1C1C1C",
        tertiary: "#f9fafb",
        accent: "#1DA1F2",
        text: "#f9fafb",
        tint: "#f9fafb",
    },
};

You can add/update/change this as much as you want. the good thing is that the global getStyle() utility function will return the color based on the theme itself, and you dont need to do anything. A quick look:

export const getStyles = () => {

    const theme = useColorScheme() || 'light';

    return StyleSheet.create({
        container: {
            flex: 1,
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: colors[theme].primary,
        },

        text: {
            color: colors[theme].text,
            fontSize: 15,
        },
    });
};

Pretty easy to use, no additional lines of coded needed in component files, only a one line for getStyle()

[johnmck95]

I think we're going to need to think about a way of providing some more context here. For instance, the way it stands dark mode will set the background and button colours to be the same - so we might need to make those objects a little more complex. EX: buttonColor={colors[theme].buttonPrimary or something like that.

Overall I love the way we can just use [theme] to grab the corresponding colour.

[johnmck95]

I tried merging into my branch to fix conflicts and made some minor adjustments. I think it is helpful to include the theme in the getStyles() return, and I added a new type in the file (my component was bugging out over the any type)

import { StyleSheet, useColorScheme } from "react-native";

type Colors = {
  light: {
    primary: string;
    secondary: string;
    tertiary: string;
    accent: string;
    tint: string;
    text: string;
  };
  dark: {
    primary: string;
    secondary: string;
    tertiary: string;
    accent: string;
    text: string;
    tint: string;
  };
};

export const colors: Colors = {
  light: {
    primary: "#ffffff",
    secondary: "#F2F2F2",
    tertiary: "#4B4B4B",
    accent: "#1DA1F2",
    tint: "#111827",
    text: "#111827",
  },
  dark: {
    primary: "#121212",
    secondary: "#1C1C1C",
    tertiary: "#f9fafb",
    accent: "#1DA1F2",
    text: "#f9fafb",
    tint: "#f9fafb",
  },
};

export const getStyles = () => {
  const theme = useColorScheme() || "light";

  return {
    theme,
    styles: StyleSheet.create({
      container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: colors[theme].primary,
      },
      text: {
        color: colors[theme].text,
        fontSize: 15,
      },
      buttonShape: {
        margin: 10,
        borderRadius: 10,
        borderWidth: 1,
      },
      formLabel: {
        fontWeight: "bold",
      },
      errorText: {
        color: "red",
      },
    }),
  };
};

[mehradadimi]

I tried merging into my branch to fix conflicts and made some minor adjustments. I think it is helpful to include the theme in the getStyles() return, and I added a new type in the file (my component was bugging out over the any type)

import { StyleSheet, useColorScheme } from "react-native";

type Colors = {
 light: {
   primary: string;
   secondary: string;
   tertiary: string;
   accent: string;
   tint: string;
   text: string;
 };
 dark: {
   primary: string;
   secondary: string;
   tertiary: string;
   accent: string;
   text: string;
   tint: string;
 };
};

export const colors: Colors = {
 light: {
   primary: "#ffffff",
   secondary: "#F2F2F2",
   tertiary: "#4B4B4B",
   accent: "#1DA1F2",
   tint: "#111827",
   text: "#111827",
 },
 dark: {
   primary: "#121212",
   secondary: "#1C1C1C",
   tertiary: "#f9fafb",
   accent: "#1DA1F2",
   text: "#f9fafb",
   tint: "#f9fafb",
 },
};

export const getStyles = () => {
 const theme = useColorScheme() || "light";

 return {
   theme,
   styles: StyleSheet.create({
     container: {
       flex: 1,
       alignItems: "center",
       justifyContent: "center",
       backgroundColor: colors[theme].primary,
     },
     text: {
       color: colors[theme].text,
       fontSize: 15,
     },
     buttonShape: {
       margin: 10,
       borderRadius: 10,
       borderWidth: 1,
     },
     formLabel: {
       fontWeight: "bold",
     },
     errorText: {
       color: "red",
     },
   }),
 };
};

sounds good to me I will update the file with the new one

[mehradadimi]

Is the Login page meant to be here? Happy to include it, but the directory structure will need a little change after the routing goes in fyi

That is my bad, did not mean to push that, it took over from my other branch, will remove it!