diff --git a/ui/providers/dark-mode-provider.tsx b/ui/providers/dark-mode-provider.tsx
index cf1a0be..ee7c3b6 100644
--- a/ui/providers/dark-mode-provider.tsx
+++ b/ui/providers/dark-mode-provider.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Colors } from "@blueprintjs/core";
+import { Classes, Colors } from "@blueprintjs/core";
 
 const DarkModeContext = React.createContext<{
   isDark: boolean;
@@ -14,6 +14,12 @@ export const DarkModeProvider = ({
 }) => {
   const [isDark, setIsDark] = React.useState(true);
 
+  // Set body element class according to dark mode
+  React.useEffect(() => {
+    if (isDark) document.body.classList.add(Classes.DARK);
+    else document.body.classList.remove(Classes.DARK);
+  }, [isDark]);
+
   // Set dark theme according to system preference
   React.useEffect(() => {
     if (window.matchMedia("(prefers-color-scheme: light)").matches)
@@ -29,7 +35,6 @@ export const DarkModeProvider = ({
           height: "100%",
           backgroundColor: isDark ? Colors.DARK_GRAY2 : Colors.GRAY4,
         }}
-        className={isDark ? "bp4-dark" : ""}
       >
         {children}
       </div>