Base dark theme implementation

2025-10-23 13:44:33 -07:00
parent b6271b8ef2
commit f170192008
22 changed files with 308 additions and 176 deletions
--- a/util/theme.js
+++ b/util/theme.js
@@ -1,45 +1,92 @@
-export default //Custom values were used as the overrides did not work.
-    {
-        colors: {
-            primary: "#1890ff",
-            onPrimary: "#ffffff",
-            primaryContainer: "#e1e1e1ff",
-            onPrimaryContainer: "#001c3a",
-            secondary: "#545f71",
-            onSecondary: "#ffffff",
-            secondaryContainer: "#d8e3f8",
-            onSecondaryContainer: "#111c2b",
-            tertiary: "#00658d",
-            onTertiary: "#ffffff",
-            tertiaryContainer: "#c6e7ff",
-            onTertiaryContainer: "#001e2d",
-            error: "#ba1a1a",
-            onError: "#ffffff",
-            errorContainer: "#ffdad6",
-            onErrorContainer: "#410002",
-            background: "#fdfcff",
-            onBackground: "#1a1c1e",
-            surface: "#fdfcff",
-            onSurface: "#1a1c1e",
-            surfaceVariant: "#dededeff",
-            onSurfaceVariant: "#43474e",
-            outline: "#74777f",
-            outlineVariant: "#c3c6cf",
-            shadow: "#000000",
-            scrim: "#000000",
-            inverseSurface: "#2f3033",
-            inverseOnSurface: "#f1f0f4",
-            inversePrimary: "#a5c8ff",
-            elevation: {
-                level0: "transparent",
-                level1: "#f1f1f1ff",
-                level2: "#e9eff9",
-                level3: "#e1ebf6",
-                level4: "#dfe9f5",
-                level5: "#dae6f4",
-            },
-            surfaceDisabled: "rgba(26, 28, 30, 0.12)",
-            onSurfaceDisabled: "rgba(26, 28, 30, 0.38)",
-            backdrop: "rgba(45, 49, 56, 0.4)",
+const lightTheme = {
+    theme: 'light',
+    colors: {
+        primary: "#1890ff",
+        onPrimary: "#ffffff",
+        primaryContainer: "#e1e1e1ff",
+        onPrimaryContainer: "#001c3a",
+        secondary: "#545f71",
+        onSecondary: "#ffffff",
+        secondaryContainer: "#d8e3f8",
+        onSecondaryContainer: "#111c2b",
+        tertiary: "#00658d",
+        onTertiary: "#ffffff",
+        tertiaryContainer: "#c6e7ff",
+        onTertiaryContainer: "#001e2d",
+        error: "#ba1a1a",
+        onError: "#ffffff",
+        errorContainer: "#ffdad6",
+        onErrorContainer: "#410002",
+        background: "#fdfcff",
+        onBackground: "#1a1c1e",
+        surface: "#fdfcff",
+        onSurface: "#1a1c1e",
+        surfaceVariant: "#dededeff",
+        onSurfaceVariant: "#43474e",
+        outline: "#74777f",
+        outlineVariant: "#c3c6cf",
+        shadow: "#000000",
+        scrim: "#000000",
+        inverseSurface: "#2f3033",
+        inverseOnSurface: "#f1f0f4",
+        inversePrimary: "#a5c8ff",
+        elevation: {
+            level0: "transparent",
+            level1: "#f1f1f1ff",
+            level2: "#e9eff9",
+            level3: "#e1ebf6",
+            level4: "#dfe9f5",
+            level5: "#dae6f4",
        },
-    };
+        surfaceDisabled: "rgba(26, 28, 30, 0.12)",
+        onSurfaceDisabled: "rgba(26, 28, 30, 0.38)",
+        backdrop: "rgba(45, 49, 56, 0.4)",
+    },
+};
+
+const darkTheme = {
+    theme: 'dark',
+    colors: {
+        primary: "#a5c8ff",
+        onPrimary: "#001c3a",
+        primaryContainer: "#2c3e50",
+        onPrimaryContainer: "#d6e8ff",
+        secondary: "#bcc6db",
+        onSecondary: "#262f40",
+        secondaryContainer: "#3d4756",
+        onSecondaryContainer: "#d8e3f8",
+        tertiary: "#7dd3fc",
+        onTertiary: "#001e2d",
+        tertiaryContainer: "#004d66",
+        onTertiaryContainer: "#c6e7ff",
+        error: "#ffb4ab",
+        onError: "#690005",
+        errorContainer: "#93000a",
+        onErrorContainer: "#ffdad6",
+        background: "#0f1419",
+        onBackground: "#e4e1e6",
+        surface: "#0f1419",
+        onSurface: "#e4e1e6",
+        surfaceVariant: "#43474e",
+        onSurfaceVariant: "#c3c6cf",
+        outline: "#8d9199",
+        outlineVariant: "#43474e",
+        shadow: "#000000",
+        scrim: "#000000",
+        inverseSurface: "#e4e1e6",
+        inverseOnSurface: "#2f3033",
+        inversePrimary: "#1890ff",
+        elevation: {
+            level0: "transparent",
+            level1: "#1a1f2e",
+            level2: "#212837",
+            level3: "#293141",
+            level4: "#2b3344",
+            level5: "#2e3748",
+        },
+        surfaceDisabled: "rgba(228, 225, 230, 0.12)",
+        onSurfaceDisabled: "rgba(228, 225, 230, 0.38)",
+        backdrop: "rgba(45, 49, 56, 0.4)",
+    },
+};
+export { darkTheme, lightTheme };