Front: Format Theme for Native Base

2022-10-06 20:06:14 +01:00
parent 5c4d29c5de
commit 048264588d
1 changed files with 120 additions and 16 deletions
--- a/front/Theme.tsx
+++ b/front/Theme.tsx
@@ -1,25 +1,129 @@
+import { extendTheme } from 'native-base';
 /**
 * Color theme to use thoughout the application
 * Using the Material Color guidelines
 */
-
-import { DefaultTheme } from 'react-native-paper';
-
-const Theme = {
-	...DefaultTheme,
+const Theme = extendTheme({
 	roundness: 10,
 	colors: {
-		...DefaultTheme.colors,
-		primary: '#5db075',
-		background: '#F0F0F0',
-		surface: '#F6F6F6',
-		accent: '#00bdbd',
-		error: '#B00020',
-		text: '#000000',
-		onSurface: '#000000',
-		placeholder: '#C9C9C9',
-		notification: '#FF0000'
+		primary:
+		{
+			50: '#e6faea',
+			100: '#c8e7d0',
+			200: '#a7d6b5',
+			300: '#86c498',
+			400: '#65b47c',
+			500: '#4b9a62',
+			600: '#3a784b',
+			700: '#275635',
+			800: '#14341f',
+			900: '#001405',
+		},
+		background:
+		{
+			50: '#f2f2f2',
+			100: '#d9d9d9',
+			200: '#bfbfbf',
+			300: '#a6a6a6',
+			400: '#8c8c8c',
+			500: '#737373',
+			600: '#595959',
+			700: '#404040',
+			800: '#262626',
+			900: '#0d0d0d',
+		},
+		surface:
+		{
+			50: '#f2f2f2',
+			100: '#d9d9d9',
+			200: '#bfbfbf',
+			300: '#a6a6a6',
+			400: '#8c8c8c',
+			500: '#737373',
+			600: '#595959',
+			700: '#404040',
+			800: '#262626',
+			900: '#0d0d0d',
+		},
+		accent:
+		{
+			50: '#d8ffff',
+			100: '#acffff',
+			200: '#7dffff',
+			300: '#4dffff',
+			400: '#28ffff',
+			500: '#18e5e6',
+			600: '#00b2b3',
+			700: '#007f80',
+			800: '#004d4e',
+			900: '#001b1d',
+		},
+		error:
+		{
+			50: '#ffe2e9',
+			100: '#ffb1bf',
+			200: '#ff7f97',
+			300: '#ff4d6d',
+			400: '#fe1d43',
+			500: '#e5062b',
+			600: '#b30020',
+			700: '#810017',
+			800: '#4f000c',
+			900: '#200004',
+		},
+		text:
+		{
+			50: '#f2f2f2',
+			100: '#d9d9d9',
+			200: '#bfbfbf',
+			300: '#a6a6a6',
+			400: '#8c8c8c',
+			500: '#737373',
+			600: '#595959',
+			700: '#404040',
+			800: '#262626',
+			900: '#0d0d0d',
+		},
+		onSurface:
+		{
+			50: '#f2f2f2',
+			100: '#d9d9d9',
+			200: '#bfbfbf',
+			300: '#a6a6a6',
+			400: '#8c8c8c',
+			500: '#737373',
+			600: '#595959',
+			700: '#404040',
+			800: '#262626',
+			900: '#0d0d0d',
+		},
+		placeholder:
+		{
+			50: '#fbf0f2',
+			100: '#dcd8d9',
+			200: '#bfbfbf',
+			300: '#a6a6a6',
+			400: '#8c8c8c',
+			500: '#737373',
+			600: '#595959',
+			700: '#404040',
+			800: '#282626',
+			900: '#150a0d',
+		},
+		notification:
+		{
+			50: '#ffe1e1',
+			100: '#ffb1b1',
+			200: '#ff7f7f',
+			300: '#ff4c4c',
+			400: '#ff1a1a',
+			500: '#e60000',
+			600: '#b40000',
+			700: '#810000',
+			800: '#500000',
+			900: '#210000',
+		}
 	}
-};
+});

 export default Theme;