@reactivers/hooks Github link@reactivers/hooks NPM link



  • 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.
  • 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 Preview - CodeSandbox