Mark/esolang
1
0
Fork 0
Code Issues Packages Activity

Add support for dark mode

Browse Source
This commit is contained in:
Nilay Majorwar
2021-12-17 20:07:12 +05:30
parent f060b1bac9
commit 0f3664eb63
8 changed files with 127 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ui/MainLayout.tsx
View File

@ -1,5 +1,6 @@
import React from "react";
import { Mosaic, MosaicNode, MosaicWindow } from "react-mosaic-component";
import { useDarkMode } from "./providers/dark-mode-provider";
// IDs of windows in the mosaic layout
type WINDOW_ID = "editor" | "renderer" | "input" | "output";
@ -20,6 +21,9 @@ type Props = {
};
export const MainLayout = (props: Props) => {
const { isDark } = useDarkMode();
const mosaicClass = "mosaic-blueprint-theme" + (isDark ? " bp3-dark" : "");
const MOSAIC_MAP = {
editor: props.renderEditor,
renderer: props.renderRenderer,
@ -43,7 +47,7 @@ export const MainLayout = (props: Props) => {
return (
<Mosaic<keyof typeof MOSAIC_MAP>
className="mosaic-blueprint-theme bp3-dark"
className={mosaicClass}
initialValue={INITIAL_LAYOUT}
renderTile={(windowId, path) => (
<MosaicWindow<number>