Theme

Set the active theme by name. Binary Window ships a built-in dark theme; to author your own, see General — Theme.

Set the theme

Pass the initial theme through the Window component's theme prop. When omitted, the default (light) theme is used.

<Window theme="dark" panes={...} />

If you authored a custom theme (see General — Theme), import its CSS and pass the matching name:

<Window theme="my-theme" panes={...} />

Toggle the theme

The theme prop is only read once, when the window is first created, so changing it later has no effect. To switch themes at runtime (for example, a light/dark toggle), call the setTheme API from the useWindow hook. Passing an empty value reverts to the default (light) theme.

Example

Click the buttons to switch the window between the dark and light themes.

import { Window, WindowProvider, useWindow } from 'react-bwin';
import 'react-bwin/react-bwin.css';

function Toggle() {
  const { setTheme } = useWindow();

  return (
    <>
      <button onClick={() => setTheme('dark')}>Dark</button>
      <button onClick={() => setTheme('')}>Light</button>
      <Window panes={...} />
    </>
  );
}

export default function App() {
  return (
    <WindowProvider>
      <Toggle />
    </WindowProvider>
  );
}