From 1d8413cc7d5f54a150b54df8e03074a3d018414f Mon Sep 17 00:00:00 2001
From: Nilay Majorwar <nilaymajorwar@gmail.com>
Date: Tue, 22 Feb 2022 01:53:35 +0530
Subject: [PATCH] Set dark class on body instead of intermediate div
---
ui/providers/dark-mode-provider.tsx | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
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>