Mark/esolang
1
0
Fork 0
Code Issues Packages Activity

Set dark class on body instead of intermediate div

Browse Source
This commit is contained in:
Nilay Majorwar 2022-02-22 01:53:35 +05:30
parent 2e17280863
commit 1d8413cc7d
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/providers/dark-mode-provider.tsx
View File

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { Colors } from "@blueprintjs/core"; import { Classes, Colors } from "@blueprintjs/core";
const DarkModeContext = React.createContext<{ const DarkModeContext = React.createContext<{
isDark: boolean; isDark: boolean;
@ -14,6 +14,12 @@ export const DarkModeProvider = ({
}) => { }) => {
const [isDark, setIsDark] = React.useState(true); 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 // Set dark theme according to system preference
React.useEffect(() => { React.useEffect(() => {
if (window.matchMedia("(prefers-color-scheme: light)").matches) if (window.matchMedia("(prefers-color-scheme: light)").matches)
@ -29,7 +35,6 @@ export const DarkModeProvider = ({
height: "100%", height: "100%",
backgroundColor: isDark ? Colors.DARK_GRAY2 : Colors.GRAY4, backgroundColor: isDark ? Colors.DARK_GRAY2 : Colors.GRAY4,
}} }}
className={isDark ? "bp4-dark" : ""}
> >
{children} {children}
</div> </div>