Shift darkmode class to separate div

styles/globals.css

@@ -13,14 +13,6 @@ body,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
-body {
-  background-color: #a7b6c2;
-}
-
-body.bp3-dark {
-  background-color: #202b33;
-}
-
 a {
   color: inherit;
   text-decoration: none;

ui/providers/dark-mode-provider.tsx

@@ -1,10 +1,10 @@
-import { Classes } from "@blueprintjs/core";
 import React from "react";
+import { Colors } from "@blueprintjs/core";
 
 const DarkModeContext = React.createContext<{
   isDark: boolean;
   toggleDark: () => void;
-}>({ isDark: false, toggleDark: () => {} });
+}>({ isDark: true, toggleDark: () => {} });
 
 /** Context provider for managing dark mode state */
 export const DarkModeProvider = ({
@@ -12,16 +12,21 @@ export const DarkModeProvider = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const [isDark, setIsDark] = React.useState(false);
+  const [isDark, setIsDark] = React.useState(true);
-
-  const toggleDark = () => {
-    document.body.classList.toggle(Classes.DARK);
-    setIsDark((d) => !d);
-  };
 
   return (
-    <DarkModeContext.Provider value={{ isDark, toggleDark }}>
+    <DarkModeContext.Provider
-      {children}
+      value={{ isDark, toggleDark: () => setIsDark((d) => !d) }}
+    >
+      <div
+        style={{
+          height: "100%",
+          backgroundColor: isDark ? Colors.DARK_GRAY2 : Colors.GRAY4,
+        }}
+        className={isDark ? "bp3-dark" : ""}
+      >
+        {children}
+      </div>
     </DarkModeContext.Provider>
   );
 };