Set dark class on body instead of intermediate div
This commit is contained in:
parent
2e17280863
commit
1d8413cc7d
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user