feat: add dark theme support and increase contrast

frontend/src/App.tsx

@@ -17,16 +17,14 @@
  * 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 CssBaseline from "@mui/material/CssBaseline";
-import { ThemeProvider } from "@mui/material/styles";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import AppLayout from "components/layout/AppLayout";
 import { AuthProvider } from "contexts/AuthProvider";
 import { ClientProvider } from "contexts/ClientProvider";
 import { NotificationProvider } from "contexts/NotificationProvider";
 import { RepositoryProvider } from "contexts/RepositoryProvider";
+import { ThemeProvider } from "contexts/ThemeProvider";
 import type React from "react";
-import Theme from "theme/Theme";
 
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -39,8 +37,7 @@ const queryClient = new QueryClient({
 
 export default function App(): React.JSX.Element {
     return <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={Theme}>
+        <ThemeProvider>
-            <CssBaseline />
             <NotificationProvider>
                 <ClientProvider>
                     <AuthProvider>

frontend/src/components/charts/EventDurationLineChart.tsx

@@ -17,6 +17,7 @@
  * 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 { blue } from "@mui/material/colors";
 import type { Event } from "models/Event";
 import type React from "react";
 import { Line } from "react-chartjs-2";
@@ -33,6 +34,8 @@ export default function EventDurationLineChart({ events }: EventDurationLineChar
             {
                 label: "update duration, s",
                 data: updateEvents.map(event => event.data?.took ?? 0),
+                borderColor: blue[500],
+                backgroundColor: blue[200],
                 cubicInterpolationMode: "monotone" as const,
                 tension: 0.4,
             },

frontend/src/components/common/AutoRefreshControl.tsx

@@ -47,6 +47,7 @@ export default function AutoRefreshControl({
         <Tooltip title="Auto-refresh">
             <IconButton
                 size="small"
+                aria-label="Auto-refresh"
                 onClick={event => setAnchorEl(event.currentTarget)}
                 color={enabled ? "primary" : "default"}
             >

frontend/src/components/common/CodeBlock.tsx

@@ -42,7 +42,7 @@ export default function CodeBlock({
             component="pre"
             onScroll={onScroll}
             sx={{
-                backgroundColor: "grey.100",
+                backgroundColor: "action.hover",
                 p: 2,
                 borderRadius: 1,
                 overflow: "auto",

frontend/src/components/layout/AppLayout.tsx

@@ -17,7 +17,9 @@
  * 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 { Box, Container } from "@mui/material";
+import Brightness4Icon from "@mui/icons-material/Brightness4";
+import Brightness7Icon from "@mui/icons-material/Brightness7";
+import { Box, Container, IconButton, Tooltip } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import LoginDialog from "components/dialogs/LoginDialog";
 import Footer from "components/layout/Footer";
@@ -27,6 +29,7 @@ import { QueryKeys } from "hooks/QueryKeys";
 import { useAuth } from "hooks/useAuth";
 import { useClient } from "hooks/useClient";
 import { useRepository } from "hooks/useRepository";
+import { useThemeMode } from "hooks/useThemeMode";
 import type { InfoResponse } from "models/InfoResponse";
 import React, { useEffect, useState } from "react";
 
@@ -34,6 +37,7 @@ export default function AppLayout(): React.JSX.Element {
     const client = useClient();
     const { setAuthState } = useAuth();
     const { setRepositories } = useRepository();
+    const { mode, toggleTheme } = useThemeMode();
     const [loginOpen, setLoginOpen] = useState(false);
 
     const { data: info } = useQuery<InfoResponse>({
@@ -58,6 +62,11 @@ export default function AppLayout(): React.JSX.Element {
             <Box sx={{ flex: 1 }}>
                 <Navbar />
             </Box>
+            <Tooltip title="Toggle theme">
+                <IconButton aria-label="Toggle theme" onClick={toggleTheme}>
+                    {mode === "dark" ? <Brightness7Icon /> : <Brightness4Icon />}
+                </IconButton>
+            </Tooltip>
         </Box>
 
         <PackageTable

frontend/src/components/package/ChangesTab.tsx

@@ -22,12 +22,13 @@ import { useQuery } from "@tanstack/react-query";
 import CopyButton from "components/common/CopyButton";
 import { QueryKeys } from "hooks/QueryKeys";
 import { useClient } from "hooks/useClient";
+import { useThemeMode } from "hooks/useThemeMode";
 import type { Changes } from "models/Changes";
 import type { RepositoryId } from "models/RepositoryId";
 import React from "react";
 import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
 import diff from "react-syntax-highlighter/dist/esm/languages/hljs/diff";
-import { githubGist } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { githubGist, vs2015 } from "react-syntax-highlighter/dist/esm/styles/hljs";
 
 SyntaxHighlighter.registerLanguage("diff", diff);
 
@@ -38,6 +39,7 @@ interface ChangesTabProps {
 
 export default function ChangesTab({ packageBase, repository }: ChangesTabProps): React.JSX.Element {
     const client = useClient();
+    const { mode } = useThemeMode();
 
     const { data } = useQuery<Changes>({
         queryKey: QueryKeys.changes(packageBase, repository),
@@ -50,7 +52,7 @@ export default function ChangesTab({ packageBase, repository }: ChangesTabProps)
     return <Box sx={{ position: "relative", mt: 1 }}>
         <SyntaxHighlighter
             language="diff"
-            style={githubGist}
+            style={mode === "dark" ? vs2015 : githubGist}
             customStyle={{
                 padding: "16px",
                 borderRadius: "4px",

frontend/src/components/package/PackagePatchesList.tsx

@@ -55,7 +55,7 @@ export default function PackagePatchesList({
                     sx={{ flex: 1 }}
                 />
                 {editable &&
-                    <IconButton size="small" color="error" onClick={() => onDelete(patch.key)}>
+                    <IconButton size="small" color="error" aria-label="Remove patch" onClick={() => onDelete(patch.key)}>
                         <DeleteIcon fontSize="small" />
                     </IconButton>
                 }

frontend/src/contexts/ThemeContext.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2021-2026 ahriman team.
+ *
+ * This file is part of ahriman
+ * (see https://github.com/arcan1s/ahriman).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * 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 { createContext } from "react";
+
+export interface ThemeContextValue {
+    mode: "light" | "dark";
+    toggleTheme: () => void;
+}
+
+export const ThemeContext = createContext<ThemeContextValue | null>(null);

frontend/src/contexts/ThemeProvider.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2021-2026 ahriman team.
+ *
+ * This file is part of ahriman
+ * (see https://github.com/arcan1s/ahriman).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * 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 CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
+import { defaults as chartDefaults } from "chart.js";
+import { ThemeContext } from "contexts/ThemeContext";
+import { useLocalStorage } from "hooks/useLocalStorage";
+import React, { useCallback, useEffect, useMemo } from "react";
+import { createAppTheme } from "theme/Theme";
+
+function systemPreference(): "light" | "dark" {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }): React.JSX.Element {
+    const [mode, setMode] = useLocalStorage<"light" | "dark">("theme-mode", systemPreference());
+
+    const toggleTheme = useCallback(() => {
+        setMode(prev => prev === "light" ? "dark" : "light");
+    }, [setMode]);
+
+    const theme = useMemo(() => createAppTheme(mode), [mode]);
+
+    useEffect(() => {
+        const textColor = mode === "dark" ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.7)";
+        const gridColor = mode === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
+        chartDefaults.color = textColor;
+        chartDefaults.borderColor = gridColor;
+    }, [mode]);
+
+    const value = useMemo(() => ({ mode, toggleTheme }), [mode, toggleTheme]);
+
+    return <ThemeContext.Provider value={value}>
+        <MuiThemeProvider theme={theme}>
+            <CssBaseline />
+            {children}
+        </MuiThemeProvider>
+    </ThemeContext.Provider>;
+}

frontend/src/hooks/useThemeMode.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2021-2026 ahriman team.
+ *
+ * This file is part of ahriman
+ * (see https://github.com/arcan1s/ahriman).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * 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 { ThemeContext, type ThemeContextValue } from "contexts/ThemeContext";
+import { useContextNotNull } from "hooks/useContextNotNull";
+
+export function useThemeMode(): ThemeContextValue {
+    return useContextNotNull(ThemeContext);
+}

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],
+    unknown: grey[600],
-    pending: amber[900],
+    pending: amber[700],
-    building: orange[900],
+    building: orange[800],
-    failed: red[900],
+    failed: red[700],
-    success: green[800],
+    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({
+export function createAppTheme(mode: "light" | "dark"): Theme {
-    components: {
+    return createTheme({
-        MuiDialog: {
+        palette: {
-            defaultProps: {
+            mode,
-                maxWidth: "lg",
+        },
-                fullWidth: true,
+        components: {
+            MuiDialog: {
+                defaultProps: {
+                    maxWidth: "lg",
+                    fullWidth: true,
+                },
             },
         },
-    },
+    });
-});
+}
-
-export default Theme;