feat: add dark theme support and increase contrast

frontend/src/theme/StatusColors.ts

@@ -21,15 +21,15 @@ import { amber, green, grey, orange, red } from "@mui/material/colors";
 import type { BuildStatus } from "models/BuildStatus";
 
 const base: Record<BuildStatus, string> = {
-    unknown: grey[800],
-    pending: amber[900],
-    building: orange[900],
-    failed: red[900],
-    success: green[800],
+    unknown: grey[600],
+    pending: amber[700],
+    building: orange[800],
+    failed: red[700],
+    success: green[700],
 };
 
 const headerBase: Record<BuildStatus, string> = {
-    unknown: grey[800],
+    unknown: grey[600],
     pending: amber[700],
     building: orange[600],
     failed: red[500],

frontend/src/theme/Theme.ts

@@ -17,17 +17,20 @@
  * You should have received a copy of the GNU General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import { createTheme } from "@mui/material/styles";
+import { createTheme, type Theme } from "@mui/material/styles";
 
-const Theme = createTheme({
-    components: {
-        MuiDialog: {
-            defaultProps: {
-                maxWidth: "lg",
-                fullWidth: true,
+export function createAppTheme(mode: "light" | "dark"): Theme {
+    return createTheme({
+        palette: {
+            mode,
+        },
+        components: {
+            MuiDialog: {
+                defaultProps: {
+                    maxWidth: "lg",
+                    fullWidth: true,
+                },
             },
         },
-    },
-});
-
-export default Theme;
+    });
+}