Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

fix(web): dark mode for portals

Browse Source
This commit is contained in:
Paul Armstrong 2021-02-04 10:27:22 -08:00 committed by Blake Blackshear
parent ba0338e9d5
commit 5965da88c3
2 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/components/RelativeModal.jsx
View File

@ -1,6 +1,5 @@
import { h, Fragment } from 'preact';
import { createPortal } from 'preact/compat';
import { DarkModeProvider } from '../context';
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
const WINDOW_PADDING = 20;
@ -76,7 +75,7 @@ export default function RelativeModal({ className, role = 'dialog', children, on
}, [show, position.width, ref.current]);
const menu = (
<DarkModeProvider>
<Fragment>
<div className="absolute inset-0" onClick={handleDismiss} />
<div
className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto max-h-48 transition-all duration-75 transform scale-90 opacity-0 ${
@ -91,7 +90,7 @@ export default function RelativeModal({ className, role = 'dialog', children, on
>
{children}
</div>
</DarkModeProvider>
</Fragment>
);
return portalRoot ? createPortal(menu, portalRoot) : menu;

16
web/src/context/index.jsx
View File

@ -1,7 +1,7 @@
import { h, createContext } from 'preact';
import { get as getData, set as setData } from 'idb-keyval';
import produce from 'immer';
import { useCallback, useContext, useEffect, useState } from 'preact/hooks';
import { useCallback, useContext, useEffect, useLayoutEffect, useState } from 'preact/hooks';
const DarkMode = createContext(null);
@ -54,11 +54,15 @@ export function DarkModeProvider({ children }) {
handleMediaMatch(query);
}, [persistedMode]);
return (
<DarkMode.Provider value={{ currentMode, persistedMode, setDarkMode }}>
<div className={`${currentMode === 'dark' ? 'dark' : ''}`}>{children}</div>
</DarkMode.Provider>
);
useLayoutEffect(() => {
if (currentMode === 'dark') {
document.body.classList.add('dark');
} else {
document.body.classList.remove('dark');
}
}, [currentMode]);
return <DarkMode.Provider value={{ currentMode, persistedMode, setDarkMode }}>{children}</DarkMode.Provider>;
}
export function useDarkMode() {