feat: add dark theme support and increase contrast

This commit is contained in:
2026-03-08 22:59:31 +02:00
parent 945ddb2942
commit cc082dbd6f
12 changed files with 150 additions and 27 deletions

View File

@@ -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",