Theme component for Hudoro UI
npm install @hudoro/themeThe @hudoro/theme package provides theming capabilities for React applications. It allows you to define and apply custom themes to your components easily.
Using npm:
``bash`
npm install @hudoro/theme
Using yarn:
`bash`
yarn add @hudoro/theme
Using pnpm:
`bash`
pnpm add @hudoro/theme
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(
`
For full theme configuration please check https://github.com/hudoro-solusi-digital/hudoro-theme/blob/main/src/default.json
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;
`
`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(
`
#### Props
- value: The theme object to be applied to the component tree.
#### Returns
- theme: The current theme object.setTheme`: A function to update the theme.
-
This project is licensed under the MIT License - see the LICENSE file for details.