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
npm install @rasenganjs/theme

Usage

1. Wrap your application with ThemeProvider

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

main.tsx
import { 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
import { 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
import { ThemeProvider } from '@rasenganjs/theme';

useTheme

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

useTheme.ts
import { useTheme } from '@rasenganjs/theme';

The useTheme hook returns the following properties:

PropertyTypeDescriptionPossible Values
themestringThe user-selected theme.light, dark, system
actualThemestringThe currently applied theme.light, dark
setTheme(theme: string) => voidFunction to change the theme.-
isDarkbooleanChecks 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
import { 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
import { ThemesType } from '@rasenganjs/theme';

You can use it like follow:

ThemeSwitcher.tsx
import { 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>
  );
};

ThemeScript

template.tsx
import { ThemeScript } from '@rasenganjs/theme';
 
export default function Template({ Head, Body, Script }) {
  return (
    <html lang="en">
      <Head>
        <ThemeScript />
      </Head>
      <Body>
        <Script />
      </Body>
    </html>
  );
}

Community

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

Let's build something amazing with Rasengan.js! 🚀

License

This package is MIT licensed.