@bimetal/themes

Framework-agnostic calendar themes — CSS custom properties for colors, typography, spacing, and component styles.

Usage

Default (included automatically)

Component packages already import themes:

import '@bimetal/react-components/styles';   // includes Base Light + Dark + component CSS
import '@bimetal/vue-components/styles';
import '@bimetal/svelte-components/styles';
import '@bimetal/angular-components/styles';

This gives you the Base (iOS) theme with Light and Dark mode support. Toggle dark mode via the darkMode prop on <Calendar>.

Alternative Themes

Override the Base theme with Material Design or Tailwind:

// After your component styles import:
import '@bimetal/themes/material/light';   // Material Design 3
// or
import '@bimetal/themes/tailwind/light';   // Tailwind palette

For dark mode with alternative themes, also import the dark variant:

import '@bimetal/themes/material/light';
import '@bimetal/themes/material/dark';

Runtime Theme Switching

For dynamic theme switching (e.g. a theme selector), import CSS as raw text and inject via <style>:

import materialLight from '@bimetal/themes/material/light.css?raw';
import materialDark from '@bimetal/themes/material/dark.css?raw';

const style = document.createElement('style');
style.textContent = materialLight + '\n' + materialDark;
document.head.appendChild(style);

Available Themes

| Theme | Light | Dark | Style | |-------|-------|------|-------| | Base | Included by default | Included by default | iOS / Apple Design | | Material | @bimetal/themes/material/light | @bimetal/themes/material/dark | Material Design 3 | | Tailwind | @bimetal/themes/tailwind/light | @bimetal/themes/tailwind/dark | Tailwind Default |

Custom Themes

Override CSS custom properties on .calendar:

.calendar {
  --cal-color-primary: #your-brand-color;
  --cal-color-primary-hover: #darker;
  --cal-font-family: 'Your Font', sans-serif;
}

See src/base/light.css for the full list of 40+ customizable properties.

Exports

| Import | Contents | |--------|----------| | @bimetal/themes | Base Light + Dark + all component CSS | | @bimetal/themes/components | Component CSS only (no theme variables) | | @bimetal/themes/base/light | Base Light theme variables | | @bimetal/themes/base/dark | Base Dark overrides | | @bimetal/themes/material/light | Material Design 3 Light | | @bimetal/themes/material/dark | Material Design 3 Dark | | @bimetal/themes/tailwind/light | Tailwind Light | | @bimetal/themes/tailwind/dark | Tailwind Dark |