Theme Guide

Theme Guide 🌞🌚

CourseUp enforces theme and style guidelines to make sure we have consistency across the application and to reduce the amount of code required for components to work in light and dark mode.

Please make sure you familiarize yourself with these guidelines when developing any user-facing components 😊

Color Scheme

The component library we use, Chakra UI, offers the use of the prop colorScheme on all its components (i.e. Button). When using a Chakra component, please use the colorScheme prop over bgColor, color, etc. as using it will automatically incorporate palate switching between light and dark mode, so we do not have to worry about it.

❌<Button bgColor="red" color="white" />  ✔️<Button colorScheme="red" />

useDarkMode Prop

In the case that the colorScheme prop is not available (custom component, Text component, etc.) make use of the useDarkMode prop. The prop returns a function which takes in two parameters: what will be used if the app is in light mode, and similarly what will be used in dark mode.

const mode = useDarkMode();
mode('red', 'blue'); // returns `red` if app is in light mode, returns `blue` if app is in dark mode

An example of how it is used in React code would be:

<Text color={mode('black', 'white'} > Hello World! </Text>}

The function does takes in any type, not just strings, so if you ever conditionally render something based on the app's mode, you can make use of this hook.

Chakra Colors

If at any time you are creating something that does not have the colorScheme prop or requires custom coloring, use the predefined colors from Chakra's theme config. Please avoid the use of hex color codes within the code!

❌<Text color="#00000" />  ✔️<Text color="black" />

If Chakra does not provide a predefined color that you are looking to use, you can add colors to theme.tsx. Colors defined here are accessed exactly how Chakra's predefined colors are used:

<Text color="dark.caption" />