feat: add dark theme support and increase contrast

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