Introduction

• useTheme helps building your own Light/Dark theme on Web/Mobile app.
• You can create your theme easily. It fully supports Typescript

const { theme, current } = useTheme();

Getting Started

• You need to import createTheme function from @reactivers/hooks. This function will provide necessary components for you.

From Collection

import { createTheme } from "@reactivers/hooks";

From Package

import { createTheme } from "@reactivers/use-theme";

• You should define your ThemeStyle. Name of the interface is not important!

interface ThemeStyle {
  backgroundColor: string;
  titleColor: string;
  buttons: {
    primary: string;
    secondary: string;
    danger: string;
  }
}

• And you should pass the interface to createTheme to get the useTheme which is hook and ThemeProvider.

const { ThemeProvider, useTheme } = createTheme<ThemeStyle>();

• You must wrap your entry component with ThemeProvider to use useTheme.

<ThemeProvider>
  <YourEntryApp/>
</ThemeProvider>

• And of course you must have a style object that contains light and dark theme.

interface AppStyles {
  light: ThemeStyle;
  dark: ThemeStyle;
}

const styles: AppStyles = {
  light: {
    backgroundColor: "#eeeeee",
    titleColor: "black",
    buttons: {
      primary: "blue",
      secondary: "cyan",
      danger: "red"
    }
  },
  dark: {
    backgroundColor: "#a0a0a0",
    titleColor: "white",
    buttons: {
      primary: "darkblue",
      secondary: "darkcyan",
      danger: "darkred"
    }
  }
}

• Next step is creating useTheme hook and it's provider ThemeProvider.

Example

Run Example