@hudoro/theme

@hudoro/theme

The @hudoro/theme package provides theming capabilities for React applications. It allows you to define and apply custom themes to your components easily.

Installation

Using npm:

npm install @hudoro/theme

Using yarn:

yarn add @hudoro/theme

Using pnpm:

pnpm add @hudoro/theme

Usage

ThemeProvider

Wrap your application with the ThemeProvider component to provide the theme context to all child components.

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "@hudoro/theme";

const theme = {
  colors: {
    main: {
      primary: {
        "background-color": "red",
      },
    },
  },
};

const App = () => {
  return (
    <ThemeProvider value={theme}>
      {/* Your application content */}
    </ThemeProvider>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

For full theme configuration please check https://github.com/hudoro-solusi-digital/hudoro-theme/blob/main/src/default.json

useTheme Hook

Use the useTheme hook to access the current theme object and functions for updating the theme.

import React from "react";
import { Button } from "@hudoro/button";
import { useTheme } from "@hudoro/theme";

const AppContent = () => {
  const { theme, setTheme } = useTheme();

  const handleThemeChange = () => {
    const newTheme = {
      colors: {
        main: {
          primary: {
            "background-color": "green",
            hover: {
              "background-color": "green",
            },
          },
        },
      },
    };
    setTheme(newTheme);
  };

  return (
    <div>
      <Button onClick={handleThemeChange}>Change Theme</Button>
    </div>
  );
};

export default AppContent;

Example

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "@hudoro/theme";
import AppContent from "./AppContent";

const theme = {
  colors: {
    main: {
      primary: {
        "background-color": "red",
      },
    },
  },
};

const App = () => {
  return (
    <ThemeProvider value={theme}>
      <AppContent />
    </ThemeProvider>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

API

ThemeProvider

Props

• value: The theme object to be applied to the component tree.

useTheme Hook

Returns

• theme: The current theme object.
• setTheme: A function to update the theme.

License

This project is licensed under the MIT License - see the LICENSE file for details.