Skip to main content

Theming

Kaal provides two approaches to theming: themeOverrides prop (recommended for web and flexible theming) and KaalProvider (for native apps using react-native-unistyles).

The themeOverrides prop lets you customize colors directly on the component without any provider setup. This is the recommended approach for:

  • Web applications (Next.js, Expo Web)
  • Integrating with your existing design system
  • Quick customization without theme providers

Live Example - Light/Dark Mode Toggle​

Integrating with Your Design System​

The themeOverrides approach makes it easy to integrate Kaal with your existing design system. Here's an example of how you might integrate with a theme from your app:

import { DatePicker, TimePicker, type TimeValue } from '@dreamstack-us/kaal';
import { useTheme } from 'your-theme-library'; // e.g., unistyles, styled-components, etc.

function ScheduleModal() {
  const { theme } = useTheme();
  const [date, setDate] = useState(new Date());
  const [time, setTime] = useState<TimeValue>({ hours: 9, minutes: 0 });

  return (
    <View>
      <DatePicker
        value={date}
        onChange={setDate}
        weekStartsOn={0}
        themeOverrides={{
          primaryColor: theme.colors.primary,
          cellSelectedColor: theme.colors.primary,
          cellTodayColor: theme.colors.primaryMuted,
          textColor: theme.colors.text,
          textSelectedColor: theme.colors.textOnPrimary,
          textDisabledColor: theme.colors.textTertiary,
          backgroundColor: theme.colors.surface,
          borderRadius: theme.borderRadius.lg,
        }}
      />

      <TimePicker
        value={time}
        onChange={setTime}
        minuteInterval={15}
        themeOverrides={{
          primaryColor: theme.colors.primary,
          wheelContainerBackground: theme.colors.surface,
          wheelTextColor: theme.colors.text,
          backgroundColor: theme.colors.surface,
        }}
      />
    </View>
  );
}

Brand Colors Example​

Customize the pickers to match your brand:

Week Start Configuration​

Use weekStartsOn to set the first day of the week:

// Sunday first (US, most of the Americas, Japan)
<DatePicker weekStartsOn={0} ... />

// Monday first (Europe, most of Asia, Australia)
<DatePicker weekStartsOn={1} ... />

KaalProvider (Alternative)​

For native apps using react-native-unistyles, you can also use the theme provider approach:

import { KaalProvider } from '@dreamstack-us/kaal';
import { kaalNativeTheme } from '@dreamstack-us/kaal-themes';

export default function App() {
  return (
    <KaalProvider theme={kaalNativeTheme}>
      {/* Your app */}
    </KaalProvider>
  );
}

Built-in Themes​

import {
  kaalNativeTheme,   // Cross-platform native look
  kaalIOSTheme,      // iOS-specific styling
  kaalMaterialTheme, // Material Design 3
} from '@dreamstack-us/kaal-themes';

Next Steps​