Styling - Zanegerous/CopperToGold GitHub Wiki

This page details how the styling in the app is handled. We are using the NativeWind library to style our app. NativeWind lets us use Tailwind CSS with React Native. For more information on NativeWind, check out the NativeWind Docs

How to implement styling on your page.

Setting up

When creating a new page, by default it will not be styled. You need to do the following to get the current styles:

1. Imports

Add these these imports to your page:

import "CTG/global.css";
import defaultStyle from "CTG/app/styles/defaultStyle"; // Default style
import { useTheme } from "CTG/app/context/ThemeContext"; // Used for getting if app is in light or dark mode
import { useColorScheme } from "nativewind"; // Used for setting light/dark mode

2. Dark Mode Setup

Next, inside your main function but before the return statement, add the following lines of code:

const { isDarkMode } = useTheme(); // Get if app is in light or dark mode
const { colorScheme, setColorScheme } = useColorScheme(); // Set up for NativeWind
setColorScheme(isDarkMode ? "dark" : "light"); // Automatically set if the page is in light or dark mode

Setting Styles

Setting Defaults

You need to add styles to each of your components. There are many preset styles that should be added to the applicable components (though not everything has a preset style). A list of what those styles are can be found under the the default styles section.. To apply these styles, add className={defaultStyle.*insert style name here*} to the component.

For example, here is how you would set the default style for text:

/* imports */

const MyText = () => {
  /* boilerplate here */

  return(
    <View>
      <Text className={defaultStyle.text}>
        Some Text
      </Text>
    </View>
  )
}

Setting your own styles

Not all components have a default style (e.g., there is currently no default style for a modal). There are two ways to set your own style:

1. Inline Styling: To see how to use inline styling, check out the NativeWind docs.

2. Using an Object

What this means is setting all of your styles in one object, and referencing this object throughout your page. If you have multiple components that will all have the same style, this method is preferred to keep the page readable.

For example, here is what it looks like to set your own text style (imagine there is no default style):

/* imports */

const MyText = () => {
  /* boilerplate here */

  return(
    <View className={styles.container}>
      {/* We have three text components, but they all have the same style */}
      <Text className={styles.text}>
        Text 1
      </Text>
      <Text className={styles.text}>
        Text 2
      </Text>
      <Text className={styles.text}>
        Text 3
      </Text>
    </View>
  )
}

const styles = {
  container: "flex-1 bg-yellow-500 dark:bg-purple-500",
  text: "text-3xl text-center text-teal-300"
}

This code sets the background of the view to yellow if in light mode and purple if in dark mode. It also sets the color of the text to teal, as well as centers the text and sets the text size.

Adding to or overriding the default style.

To keep the page consistent, it is asked that you add the default style to everything. However, the default styles are relatively bare-bones, and you will often need to add things to make your components look acceptable. To do that, simply add the default styles, then add whatever your extra styles are afterwards:

<View className={`${defaultStyle.container} alignItems-center`}>

For example, lets use the previous example, but add our styles to the defaults:

/* imports */

const MyText = () => {
  /* boilerplate here */

  return(
    <View className={`${defaultStyle.container} ${styles.container}`}>
      {/* We have three text components, but they all have the same style */}
      <Text className={`${defaultStyle.text} ${styles.text}`}>
        Text 1
      </Text>
      <Text className={`${defaultStyle.text} ${styles.text}`}>
        Text 2
      </Text>
      {/* This text has the same styles as the other ones, but is bold */}
      <Text className={`${defaultStyle.text} ${styles.text} text-bold`}>
        Text 3
      </Text>
    </View>
  )
}

const styles = {
  container: "flex-1 bg-purple-500",
  text: "text-3xl text-center text-teal-300"
}

First, the default styles are applied, then our styles.

This also means that this is how we can overwrite the default style if needed! Because the styles are applied after the default styles, they overwrite any conflicting settings in the defaults.

Styling Example

Here is an example of a styled page for reference. This page will show everything explained in the previous section, in one place:

// Imports
import { Text, View } from "react-native";
import "CTG/global.css";
import defaultStyle from "CTG/app/styles/defaultStyle"; 
import { useTheme } from "CTG/app/context/ThemeContext.tsx";
import { useColorScheme } from "nativewind";

const MyText = () => {
  // Boilerplate
  const { isDarkMode } = useTheme();
  const { colorScheme, setColorScheme } = useColorScheme();
  setColorScheme(isDarkMode ? "dark" : "light");

  // The actual page
  return(
    // The background is white in light mode and black in darkmode
    <View className={`${defaultStyle.container} ${styles.container}`}>
      {/* This text component only has the default text style*/}
      <Text className={defaultStyle.text}>
        This text only has the default text style applied.
      </Text>
      {/* This text has the default styles and our added styles*/}
      <Text className={`${defaultStyle.text} ${styles.text}`}>
        This text has the default text style applied and added styles applied.
      </Text>
      {/* This text component has the default text color overwritten */}
      <Text className={`${defaultStyle.text} ${styles.overWriteText}`}>
        This text has the default color overwrote and changed to teal!
      </Text>
    </View>
  )
}

const styles = {
   // Container shows how to set dark mode-specific colors. Light mode is written by default, and dark mode must be specified.
  container: "bg-white dark:bg-black",
  text: "text-3xl text-center",
  overWriteText: "text-teal-300"
}

Default Style

The default style can be found in /app/styles/defaultStyle.tsx

However, so you don't have to go looking for it, it is listed here:

const defaultStyle = {
  container: "flex-1 p-4 size-full bg-white dark:bg-blue-dark",
  title: "text-center text-blue-dark dark:text-white font-lato-bold",
  text: "text-blue-dark dark:text-white font-lato-bold",
  button: "rounded-2xl w-3/4 justify center bg-blue-dark-200 dark:bg-orange-neon",
  buttonText: "text-white dark:text-dark-blue font-lato-bold"
}

Colors

Pallet

This is our current color pallet. Colors used may be slightly darker or lighter versions of these colors. Option5

In the code

The colors used for our app are stored in tailwind.config.js, under the colors section of the theme. It looks like this:

colors: {
  "blue-dark": {
    DEFAULT: "#040A25",
    100: "#060F37",
    200: "#081449"
  },
  "blue-light": {
    DEFAULT: "#DAE0FB",
    100: "#B6C2F7",
    200: "#889CF2"
  },
  "orange-neon": "#F98824"
}

If you want to add a color to the theme, go to the file and add it underneath the other colors.

We are also using the default nativewind color scheme, so those colors can be used as well. Here are other colors that are in our color pallet that are being used (will be added to as used):

"white" : "#FFFFFF"
"black" : "#000000"

Fonts

We used Lato for this app. The ttf files for the app can be found in CTG/assets/fonts.

Misc

The styling was done by Connor Ettinger. If you need help, the best place to reach me is on discord (@connor_the_91st). I also wrote this part of the documentation, so if it's vague or confusing... sorry lol. Feel free to let me know how I can improve it!

⚠️ **GitHub.com Fallback** ⚠️