@hudoro/theme
v0.0.2-beta.9
Published
Theme component for Hudoro UI
Downloads
1,361
Readme
@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.