feat: add dark theme support and increase contrast

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>
                 }