Skip to content

Commit 4e99617

Browse files
jvogt23jvogt23
authored
Merge pull request #23 from RoboJackets/Jacob_Mayhue-Themes
Implemented basics of themes
2 parents 68169de + c48c0eb commit 4e99617

File tree

5 files changed

+254
-5
lines changed

5 files changed

+254
-5
lines changed

‎App.tsx‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { NavigationContainer } from '@react-navigation/native';
2-
import React, { createContext, ReactNode, useState } from 'react';
2+
import React, { createContext, ReactNode, useEffect, useState } from 'react';
3+
import { useColorScheme } from 'react-native';
34
import RootStack from './Navigation/RootStack';
5+
import { DarkMode, LightMode, Theme } from './Themes/Themes';
46

57
type AuthContextType = {
68
authenticated: boolean | null;
@@ -22,12 +24,38 @@ function AuthProvider({ children }: AuthProviderProps) {
2224
);
2325
}
2426

27+
type ThemeContextType = {
28+
currentTheme: Theme | null | undefined;
29+
setTheme: (t: Theme) => void;
30+
};
31+
32+
type ThemeProviderProps = {
33+
children: ReactNode;
34+
};
35+
36+
export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
37+
38+
function ThemeProvider({ children }: ThemeProviderProps) {
39+
const [currentTheme, setTheme] = useState<Theme>(LightMode);
40+
const currentSystemTheme = useColorScheme();
41+
42+
useEffect(() => {
43+
currentSystemTheme === 'light' ? setTheme(LightMode) : setTheme(DarkMode);
44+
}, [currentSystemTheme]);
45+
46+
return (
47+
<ThemeContext.Provider value={{ currentTheme, setTheme }}>{children}</ThemeContext.Provider>
48+
);
49+
}
50+
2551
function App() {
2652
return (
2753
<AuthProvider>
28-
<NavigationContainer>
29-
<RootStack />
30-
</NavigationContainer>
54+
<ThemeProvider>
55+
<NavigationContainer>
56+
<RootStack />
57+
</NavigationContainer>
58+
</ThemeProvider>
3159
</AuthProvider>
3260
);
3361
}

‎Navigation/NavBar.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import React from 'react';
55
import AttendanceScreen from '../Attendance/AttendanceScreen';
66
import MerchandiseScreen from '../Merchandise/MerchandiseScreen';
77
import SettingsScreen from '../Settings/SettingsScreen';
8-
98
type NavBarProps = {
109
hidden?: boolean | null;
1110
};

‎Themes/Colors.ts‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
export const Colors = {
2+
Gold: '#EEB211FF',
3+
GoldLight: '#FFE450FF',
4+
GoldDark: '#B78300FF',
5+
6+
neutral: '#949088FF',
7+
8+
danger: '#B00020FF',
9+
10+
warningLightSubtle: '#FFF8C5FF',
11+
warningLightEmphasis: '#BF8700FF',
12+
warningLightMuted: '#D4A72C66',
13+
14+
warningDarkSubtle: '#BB800926',
15+
success: '#36B92BFF',
16+
17+
webNavBarBackground: '#343A40FF',
18+
19+
primaryLight: '#EEB211FF',
20+
onPrimaryLight: '#000000FF',
21+
primaryContainerLight: '#F7BA1EFF',
22+
onPrimaryContainerLight: '#453100FF',
23+
secondaryLight: '#B78300FF',
24+
onSecondaryLight: '#FFFFFFFF',
25+
secondaryContainerLight: '#FFE0A6FF',
26+
onSecondaryContainerLight: '#5C450FFF',
27+
tertiaryLight: '#526600FF',
28+
onTertiaryLight: '#FFFFFFFF',
29+
tertiaryContainerLight: '#B3D04FFF',
30+
onTertiaryContainerLight: '#2D3900FF',
31+
errorLight: '#BA1A1AFF',
32+
onErrorLight: '#FFFFFFFF',
33+
errorContainerLight: '#FFDAD6FF',
34+
onErrorContainerLight: '#410002FF',
35+
backgroundLight: '#FFF8F2FF',
36+
onBackgroundLight: '#201B11FF',
37+
surfaceLight: '#FFF8F2FF',
38+
onSurfaceLight: '#201B11FF',
39+
surfaceVariantLight: '#F0E0C7FF',
40+
onSurfaceVariantLight: '#504533FF',
41+
outlineLight: '#827661FF',
42+
outlineVariantLight: '#D4C5ACFF',
43+
scrimLight: '#000000FF',
44+
inverseSurfaceLight: '#363025FF',
45+
inverseOnSurfaceLight: '#FBEFDFFF',
46+
inversePrimaryLight: '#FABD22FF',
47+
surfaceDimLight: '#E4D8C9FF',
48+
surfaceBrightLight: '#FFF8F2FF',
49+
surfaceContainerLowestLight: '#FFFFFFFF',
50+
surfaceContainerLowLight: '#FEF2E2FF',
51+
surfaceContainerLight: '#F8ECDCFF',
52+
surfaceContainerHighLight: '#F2E7D7FF',
53+
surfaceContainerHighestLight: '#ECE1D1FF',
54+
55+
primaryDark: '#FFDB95FF',
56+
onPrimaryDark: '#402D00FF',
57+
primaryContainerDark: '#E7AC03FF',
58+
onPrimaryContainerDark: '#382700FF',
59+
secondaryDark: '#E4C281FF',
60+
onSecondaryDark: '#402D00FF',
61+
secondaryContainerDark: '#4F3904FF',
62+
onSecondaryContainerDark: '#EECC89FF',
63+
tertiaryDark: '#CDEC67FF',
64+
onTertiaryDark: '#293500FF',
65+
tertiaryContainerDark: '#A4C142FF',
66+
onTertiaryContainerDark: '#232D00FF',
67+
errorDark: '#FFB4ABFF',
68+
onErrorDark: '#690005FF',
69+
errorContainerDark: '#93000AFF',
70+
onErrorContainerDark: '#FFDAD6FF',
71+
backgroundDark: '#17130AFF',
72+
onBackgroundDark: '#ECE1D1FF',
73+
surfaceDark: '#17130AFF',
74+
onSurfaceDark: '#ECE1D1FF',
75+
surfaceVariantDark: '#504533FF',
76+
onSurfaceVariantDark: '#D4C5ACFF',
77+
outlineDark: '#9C8F79FF',
78+
outlineVariantDark: '#504533FF',
79+
scrimDark: '#000000FF',
80+
inverseSurfaceDark: '#ECE1D1FF',
81+
inverseOnSurfaceDark: '#363025FF',
82+
inversePrimaryDark: '#7A5900FF',
83+
surfaceDimDark: '#17130AFF',
84+
surfaceBrightDark: '#3F382DFF',
85+
surfaceContainerLowestDark: '#120E06FF',
86+
surfaceContainerLowDark: '#201B11FF',
87+
surfaceContainerDark: '#241F15FF',
88+
surfaceContainerHighDark: '#2F291FFF',
89+
surfaceContainerHighestDark: '#3A3429FF',
90+
};

‎Themes/Themes.ts‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import { ColorValue } from 'react-native';
2+
import { Colors } from './Colors';
3+
export type Theme = {
4+
primary: ColorValue;
5+
onPrimary: ColorValue;
6+
primaryContainer: ColorValue;
7+
onPrimaryContainer: ColorValue;
8+
secondary: ColorValue;
9+
onSecondary: ColorValue;
10+
secondaryContainer: ColorValue;
11+
onSecondaryContainer: ColorValue;
12+
tertiary: ColorValue;
13+
onTertiary: ColorValue;
14+
tertiaryContainer: ColorValue;
15+
onTertiaryContainer: ColorValue;
16+
error: ColorValue;
17+
onError: ColorValue;
18+
errorContainer: ColorValue;
19+
onErrorContainer: ColorValue;
20+
background: ColorValue;
21+
onBackground: ColorValue;
22+
surface: ColorValue;
23+
onSurface: ColorValue;
24+
surfaceVariant: ColorValue;
25+
onSurfaceVariant: ColorValue;
26+
outline: ColorValue;
27+
outlineVariant: ColorValue;
28+
scrim: ColorValue;
29+
inverseSurface: ColorValue;
30+
inverseOnSurface: ColorValue;
31+
inversePrimary: ColorValue;
32+
surfaceDim: ColorValue;
33+
surfaceBright: ColorValue;
34+
surfaceContainerLowest: ColorValue;
35+
surfaceContainerLow: ColorValue;
36+
surfaceContainer: ColorValue;
37+
surfaceContainerHigh: ColorValue;
38+
surfaceContainerHighest: ColorValue;
39+
};
40+
41+
export const LightMode: Theme = {
42+
primary: Colors.primaryLight,
43+
onPrimary: Colors.onPrimaryLight,
44+
primaryContainer: Colors.primaryContainerLight,
45+
onPrimaryContainer: Colors.onPrimaryContainerLight,
46+
secondary: Colors.secondaryLight,
47+
onSecondary: Colors.onSecondaryLight,
48+
secondaryContainer: Colors.secondaryContainerLight,
49+
onSecondaryContainer: Colors.onSecondaryContainerLight,
50+
tertiary: Colors.tertiaryLight,
51+
onTertiary: Colors.onTertiaryLight,
52+
tertiaryContainer: Colors.tertiaryContainerLight,
53+
onTertiaryContainer: Colors.onTertiaryContainerLight,
54+
error: Colors.errorLight,
55+
onError: Colors.onErrorLight,
56+
errorContainer: Colors.errorContainerLight,
57+
onErrorContainer: Colors.onErrorContainerLight,
58+
background: Colors.backgroundLight,
59+
onBackground: Colors.onBackgroundLight,
60+
surface: Colors.surfaceLight,
61+
onSurface: Colors.onSurfaceLight,
62+
surfaceVariant: Colors.surfaceVariantLight,
63+
onSurfaceVariant: Colors.onSurfaceVariantLight,
64+
outline: Colors.outlineLight,
65+
outlineVariant: Colors.outlineVariantLight,
66+
scrim: Colors.scrimLight,
67+
inverseSurface: Colors.inverseSurfaceLight,
68+
inverseOnSurface: Colors.inverseOnSurfaceLight,
69+
inversePrimary: Colors.inversePrimaryLight,
70+
surfaceDim: Colors.surfaceDimLight,
71+
surfaceBright: Colors.surfaceBrightLight,
72+
surfaceContainerLowest: Colors.surfaceContainerLowestLight,
73+
surfaceContainerLow: Colors.surfaceContainerLowLight,
74+
surfaceContainer: Colors.surfaceContainerLight,
75+
surfaceContainerHigh: Colors.surfaceContainerHighLight,
76+
surfaceContainerHighest: Colors.surfaceContainerHighestLight,
77+
};
78+
79+
export const DarkMode: Theme = {
80+
primary: Colors.primaryDark,
81+
onPrimary: Colors.onPrimaryDark,
82+
primaryContainer: Colors.primaryContainerDark,
83+
onPrimaryContainer: Colors.onPrimaryContainerDark,
84+
secondary: Colors.secondaryDark,
85+
onSecondary: Colors.onSecondaryDark,
86+
secondaryContainer: Colors.secondaryContainerDark,
87+
onSecondaryContainer: Colors.onSecondaryContainerDark,
88+
tertiary: Colors.tertiaryDark,
89+
onTertiary: Colors.onTertiaryDark,
90+
tertiaryContainer: Colors.tertiaryContainerDark,
91+
onTertiaryContainer: Colors.onTertiaryContainerDark,
92+
error: Colors.errorDark,
93+
onError: Colors.onErrorDark,
94+
errorContainer: Colors.errorContainerDark,
95+
onErrorContainer: Colors.onErrorContainerDark,
96+
background: Colors.backgroundDark,
97+
onBackground: Colors.onBackgroundDark,
98+
surface: Colors.surfaceDark,
99+
onSurface: Colors.onSurfaceDark,
100+
surfaceVariant: Colors.surfaceVariantDark,
101+
onSurfaceVariant: Colors.onSurfaceVariantDark,
102+
outline: Colors.outlineDark,
103+
outlineVariant: Colors.outlineVariantDark,
104+
scrim: Colors.scrimDark,
105+
inverseSurface: Colors.inverseSurfaceDark,
106+
inverseOnSurface: Colors.inverseOnSurfaceDark,
107+
inversePrimary: Colors.inversePrimaryDark,
108+
surfaceDim: Colors.surfaceDimDark,
109+
surfaceBright: Colors.surfaceBrightDark,
110+
surfaceContainerLowest: Colors.surfaceContainerLowestDark,
111+
surfaceContainerLow: Colors.surfaceContainerLowDark,
112+
surfaceContainer: Colors.surfaceContainerDark,
113+
surfaceContainerHigh: Colors.surfaceContainerHighDark,
114+
surfaceContainerHighest: Colors.surfaceContainerHighestDark,
115+
};

0 commit comments

Comments
 (0)