Themes - Rohit UI

Built-in Themes

Rohit UI comes with two built-in themes:

Windows 98 Theme

The default theme that recreates the classic Windows 98 look and feel.

<RohitUIProvider theme="windows98">
  /* Your app */
</RohitUIProvider>

Rohit Special Theme

A funky, colorful variation that adds unnecessary complexity to your UI.

<RohitUIProvider theme="rohitSpecial">
  /* Your app */
</RohitUIProvider>

Custom Themes

You can create your own custom theme by extending the default theme:

import { createTheme } from 'rohit-ui';

const myTheme = createTheme({
  colors: {
    primary: '#FF00FF',
    secondary: '#00FFFF',
    // ... other color overrides
  },
  fonts: {
    family: {
      base: "'Comic Sans MS', cursive",
      // ... other font overrides
    }
  }
});

function App() {
  return (
    <RohitUIProvider theme={myTheme}>
      /* Your app */
    </RohitUIProvider>
  );
}

Theme Properties

The theme object supports the following properties:

Colors

primary: Primary brand color
secondary: Secondary brand color
success: Success state color
error: Error state color
warning: Warning state color
info: Information state color

Typography

fontFamily: Font family for different text styles
fontSize: Font sizes for different text styles
fontWeight: Font weights for different text styles
lineHeight: Line heights for different text styles

Spacing

spacing: Spacing scale for margins and padding
borderRadius: Border radius values
shadows: Box shadow values