PACKAGES

Rasengan Theme

Easily manage your application's theme in Rasengan.js.

Installation

To install the @rasenganjs/theme package, run one of the following commands:

Terminal

bashnpm install @rasenganjs/theme

Usage

1. Wrap your application with ThemeProvider

To enable theme management, wrap your app with the ThemeProvider component.

main.tsx

tsximport { type AppProps } from 'rasengan'; 
import AppRouter from '@app/app.router';
import ThemeProvider from '@rasenganjs/theme';
 
export default function App({ Component, children }: AppProps) {
  return (
    <ThemeProvider>
      <Component router={AppRouter}>{children}</Component>
    </ThemeProvider>
  );
}

2. Access and update the theme with useTheme

Use the useTheme hook to get the current theme and modify it dynamically.

ThemeSwitcher.tsx

tsximport { useTheme } from '@rasenganjs/theme';
 
const ThemeSwitcher = () => {
  const { theme, actualTheme, setTheme, isDark } = useTheme();
 
  return (
    <div>
      <p>Current Theme: {actualTheme}</p>
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
      <button onClick={() => setTheme('system')}>System Default</button>
    </div>
  );
};

API

ThemeProvider

The ThemeProvider component is used to wrap your application and enable theme management.

ThemeProvider.tsx

tsximport { ThemeProvider } from '@rasenganjs/theme';

useTheme

The useTheme hook is used to access and modify the current theme.

useTheme.ts

tsximport { useTheme } from '@rasenganjs/theme';

The useTheme hook returns the following properties:

Property	Type	Description	Possible Values
`theme`	`string`	The user-selected theme.	`light`, `dark`, `system`
`actualTheme`	`string`	The currently applied theme.	`light`, `dark`
`setTheme`	`(theme: string) => void`	Function to change the theme.	-
`isDark`	`boolean`	Checks if the active theme is dark.	`true` or `false`

Themes

The @rasenganjs/theme package provides two themes out of the box:

light: Light mode theme.
dark: Dark mode theme.
system: Theme based on the user's system preferences.

This is useful when you don't want to use plain text values for themes in your application.

See this example:

ThemeSwitcher.tsx

tsximport { useTheme, Themes } from '@rasenganjs/theme';
 
const ThemeSwitcher = () => {
  const { theme, actualTheme, setTheme, isDark } = useTheme();
 
  return (
    <div>
      <p>Current Theme: {actualTheme}</p>
      <button onClick={() => setTheme(Themes.light)}>Light Mode</button>
      <button onClick={() => setTheme(Themes.dark)}>Dark Mode</button>
      <button onClick={() => setTheme(Themes.system)}>System Default</button>
    </div>
  );
};

ThemesType

The ThemesType is used to define the type of themes available in your application.

ThemesType.ts

tsximport { ThemesType } from '@rasenganjs/theme';

You can use it like follow:

ThemeSwitcher.tsx

tsximport { useTheme, Themes, ThemesType } from '@rasenganjs/theme';
 
const ThemeSwitcher = () => {
  const { theme, actualTheme, setTheme, isDark } = useTheme();
 
  const updateTheme = (theme: ThemesType) => {
    setTheme(theme);
  }
 
  return (
    <div>
      <p>Current Theme: {actualTheme}</p>
      <button onClick={() => updateTheme(Themes.light)}>Light Mode</button>
      <button onClick={() => updateTheme(Themes.dark)}>Dark Mode</button>
      <button onClick={() => updateTheme(Themes.system)}>System Default</button>
    </div>
  );
};

Community

Join the Rasengan.js community to get support, ask questions, and share your projects:

Rasengan Theme

Installation

Usage

1. Wrap your application with ThemeProvider

2. Access and update the theme with useTheme

API

ThemeProvider

useTheme

Themes

ThemesType

Community

License