@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:

``bash
npm install @hudoro/theme
`

Using yarn:

`bash
yarn add @hudoro/theme
`

Using pnpm:

`bash
pnpm add @hudoro/theme
`

Usage

$3

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

`javascript
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 (

{/ Your application content /}

);
};

ReactDOM.render(, document.getElementById("root"));
`

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

$3

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

`javascript
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 (


export default AppContent;
`

Example

`javascript
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 (



);
};

ReactDOM.render(, document.getElementById("root"));
`

API

$3

#### Props

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

$3

#### 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.