Theming

@taqwim/themes is a plain CSS package. It knows nothing about any framework — every selector keys off the data-* attributes @taqwim/calendar-core emits, so one stylesheet serves all five adapters.

All thirty-three, live

amber andalus crimson cyberpunk dark default eid emerald indigo islamic luxurious madinah masjid material mihrab minimal minimalist modern najd nature neon ocean qamar ramadan rose sahara slate stone sunset teal violet zellige zinc

Rabi' al-awwal 1448

Sun

Mon

Tue

Wed

Thu

Fri

Sat

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

1

Calendar for Rabi' al-awwal 1448

Markup<div data-taqwim-theme="islamic" data-taqwim-size="default">

One stylesheet is loaded, not thirty-three: switching theme here changes an attribute, which is why several themes can coexist on a page and why the same CSS serves all five adapters. size and layout are orthogonal to it — a theme sets colours, a size sets metrics, a layout sets arrangement.

Switching themes

The theme prop sets data-taqwim-theme on the calendar. Because it is an attribute rather than a stylesheet, several themes can coexist on one page and switching costs a single setAttribute.

<div data-taqwim-theme="islamic">
  <!-- any Taqwim calendar -->
</div>

Thirty-three are bundled:

Neutral default · dark · slate · stone · zinc · minimal · minimalist · material

Brand rose · violet · emerald · amber · indigo · teal · crimson · modern · ocean · sunset · nature · neon · cyberpunk · luxurious

Hijri & regional islamic · ramadan · eid · masjid · madinah · andalus · sahara · mihrab · zellige · qamar · najd

size is orthogonal — compact, default, large — and sets data-taqwim-size. A theme sets colours; a size sets metrics; they compose.

Loading less

Importing @taqwim/themes brings in all thirty-three. To ship one:

import '@taqwim/themes/variables.css'
import '@taqwim/themes/core.css'
import '@taqwim/themes/themes/islamic.css'

variables.css must come before core.css, and themes after both.

Your own theme

Set the tokens you care about under your own attribute value. Anything you leave out falls back to :root.

[data-taqwim-theme='brand'] {
  --hc-primary: #6d28d9;
  --hc-primary-hover: #5b21b6;
  --hc-accent: #ede9fe;
  --hc-accent-foreground: #5b21b6;
  --hc-border-radius: 1rem;
}

That is all a bundled theme is: about thirty token overrides. Structure lives once in core.css, which contains no literal colour — a test fails the build if one appears.

Check your contrast

Every bundled theme except minimal is measured against WCAG AA on every run. packages/themes/tests/contrast.test.ts resolves each text-on-surface pair core.css produces — following var() chains, compositing translucent layers and sampling along gradients — and fails below 4.5:1, or 3:1 for the focus ring. minimal is exempt on purpose: it inherits the host page, so its contrast is yours to check. axe additionally checks the rendered default theme.

If you write your own, muted-foreground and outside-month against your surface are the two that fail most easily.

See the full list under Design tokens.

Tailwind

The preset is generated from variables.css at build time, so the two cannot drift.

/* Tailwind v4 */
@import 'tailwindcss';
@import '@taqwim/themes';
@import '@taqwim/themes/tailwind/theme.css';

/* Tailwind v3, or v4 via @config */
import taqwim from '@taqwim/themes/tailwind'

export default { presets: [taqwim] }

Either way you get bg-taqwim-primary, text-taqwim-foreground, rounded-taqwim-cell, text-taqwim-lg and so on. The values are var() references, so the utilities restyle themselves when data-taqwim-theme changes.

No theme at all

The headless packages ship no CSS. If you want to write every rule yourself, depend on @taqwim/vue (or the React, Svelte, Solid, Angular equivalent) and style the data attributes directly.