demo: Dark mode improvements (#94)

Also add new logos for dark mode.

CHANGELOG.md

@@ -11,6 +11,8 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### ✨ Enhancements
 
+-   Added transparent and dark mode versions of the logos!
+
 ### 🐛 Bug fixes
 
 -   Fixed a bug where the `Download JSON` button would not download the JSON currently inside the input box.
@@ -21,6 +23,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 -   Made text input box use a monospace font
 -   Disabled download buttons when there is no input/output.
 -   Added a dialog to the file input section.
+-   Made improvements to the dark mode version of the website.
 
 ### 🔧 Internal changes
 

demo/src/Header.tsx

@@ -1,8 +1,14 @@
 import React from "react";
-import { Box, Link, Stack, Typography } from "@mui/material";
-import image from "../../assets/logo_square.png";
+import { Box, Link, Stack, Typography, useMediaQuery } from "@mui/material";
+import lightLogo from "../../assets/logo_square.png";
+import darkLogo from "../../assets/logo_square_dark.png";
+import { dark } from "@mui/material/styles/createPalette";
 
 export default function Header() {
+    const logo = useMediaQuery("(prefers-color-scheme: dark)")
+        ? darkLogo
+        : lightLogo;
+
     return (
         <header className="container">
             <Stack direction={"row"} justifyContent={"space-between"}>
@@ -29,7 +35,7 @@ export default function Header() {
                     </Typography>
                 </Box>
                 <img
-                    src={image}
+                    src={logo}
                     alt="MemoryViz Logo"
                     style={{
                         width: "100px",

demo/src/SvgDisplay.tsx

@@ -35,6 +35,7 @@ export default function SvgDisplay(props: SvgDisplayPropTypes) {
     return (
         <Paper
             sx={{
+                bgcolor: `primary.paper`,
                 height: 500,
                 overflow: "hidden",
                 display: "flex",

demo/src/index.tsx

@@ -4,22 +4,53 @@ import App from "./App";
 import "@picocss/pico";
 import "./css/styles";
 
-import { ThemeProvider, createTheme } from "@mui/material/styles";
-const theme = createTheme({
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { useMediaQuery } from "@mui/material";
+
+declare module "@mui/material/styles" {
+    interface PaletteColor {
+        paper?: String;
+    }
+
+    interface SimplePaletteColorOptions {
+        paper?: string;
+    }
+}
+
+const lightTheme = createTheme({
     palette: {
         primary: {
             main: "#2a6b2c",
             dark: "#005ea5",
             light: "#72ac56",
+            paper: "#ffffff",
         },
     },
 });
 
+const darkTheme = createTheme({
+    palette: {
+        mode: "dark",
+        primary: {
+            main: "#89c48c",
+            paper: "#cacaca",
+        },
+    },
+});
+
+function Root() {
+    const usingDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+    return (
+        <ThemeProvider theme={usingDarkMode ? darkTheme : lightTheme}>
+            <App />
+        </ThemeProvider>
+    );
+}
+
 const root = createRoot(document.getElementById("root"));
+
 root.render(
     <StrictMode>
-        <ThemeProvider theme={theme}>
-            <App />
-        </ThemeProvider>
+        <Root />
     </StrictMode>
 );