lx-theme

Theme provider for MUI. Responds to system light/dark setting.

install

npm i lx-theme

themes

GENERAL CODING KIDS REDBLUE

usage

fixed

import React from "react";
import { Theme, themes } from "lx-theme";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";

const App = () => {
  return (
    <Theme theme={themes["GENERAL"]}>
      <Stack>
        <Button>Button</Button>
      </Stack>
    </Theme>
  );
};

selectable

import React from "react";
import { Theme, Select, themes } from "lx-theme";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";

const App = () => {
  const [theme, setTheme] = useState();

  return (
    <Theme theme={theme}>
      <Stack>
        <Select themes={themes} setTheme={setTheme} />
        <Button>Button</Button>
      </Stack>
    </Theme>
  );
};

custom

import React from "react";
import { Theme } from "lx-theme";

const THEME = {
  light: {
    palette: {
      mode: "light",
      background: {
        default: "#ffff00",
        paper: "white",
      },
    },
  },
  dark: {
    palette: {
      mode: "dark",
      background: {
        default: "black",
        paper: "#ff0000",
      },
    },
  },
};

const App = () => <Theme theme={THEME}>...</Theme>;