Add fonts

apps/website/src/components/Playground/index.tsx

@@ -1,8 +1,19 @@
 import React, { useState } from "react";
 import { FFmpeg } from "@ffmpeg/ffmpeg";
+import Button from "@mui/material/Button";
+import { useColorMode } from "@docusaurus/theme-common";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+
+const lightTheme = createTheme({});
+const darkTheme = createTheme({
+  palette: {
+    mode: "dark",
+  },
+});
 
 export default function Playground() {
   const [loaded, setLoaded] = useState(false);
+  const { colorMode } = useColorMode();
   const ffmpeg = new FFmpeg();
   const load = async () => {
     ffmpeg.on(FFmpeg.DOWNLOAD, ({ url, total, received, done }) => {
@@ -13,5 +24,15 @@ export default function Playground() {
     });
     setLoaded(true);
   };
-  return loaded ? <></> : <button onClick={load}>Load</button>;
+  return (
+    <ThemeProvider theme={colorMode === "dark" ? darkTheme : lightTheme}>
+      {loaded ? (
+        <></>
+      ) : (
+        <Button variant="contained" onClick={load}>
+          Load
+        </Button>
+      )}
+    </ThemeProvider>
+  );
 }