theme
Provides the currently active application theme.
Theming
Customize Your Application Theme
SHIVMS UI provides a flexible theming system that lets you customize colors, typography, spacing, border radius and dark mode across your entire application.
Example
<ThemeProvider
theme="light"
>
<App />
</ThemeProvider>Theme Features
Configure the appearance of your application with a powerful and flexible theming system.
Theme Provider
Wrap your application with a shared theme provider.
Dark Mode
Switch between light and dark themes.
Design Tokens
Customize colors, spacing, radius and typography.
Basic Usage
Wrap your application with the theme provider and configure the active theme.
import {
ThemeProvider,
} from "@shivms/ui";
export default function App() {
return (
<ThemeProvider
theme="light"
>
<Dashboard />
</ThemeProvider>
);
}Why Use Theming?
01
Consistent Design
Keep colors, typography and spacing consistent throughout your application.
02
Dark Mode
Easily switch between light and dark themes.
03
Fully Customizable
Customize design tokens to match your brand.
Continue Reading
Explore more SHIVMS UI documentation and guides.
Learn what SHIVMS UI is and how to begin.
Install the library into your project.
Reusable React hooks for state, themes and responsiveness.
Use built-in icons throughout your application.
Configure light and dark themes.
Reusable helper functions for everyday development.
Build accessible user interfaces.
Customize colors, spacing and components.
See what's new in each release.