Seasonal calendar

schedule maps periods of the year to themes. Halloween in October, Christmas in December, and the default theme the rest of the time.

Recipes

christmas, halloween, new-year, winter, spring, summer, autumn and birthday are not built in. Copy their folder from recipes/ into your themes/ directory, then schedule them like any other theme.

Declaring the slots

Each slot has a theme, a start date from and an end date to, in MM-DD format, bounds included. The first matching slot wins. If to comes before from, the slot spans New Year (12-01 to 02-15). With no match, defaultTheme applies.

The date is read in timeZone (for example Europe/Paris), not in the visitor’s, so the theme changes at the same instant for everyone.

charpente.config.ts

import { defineCharpente } from 'charpente'

export default defineCharpente({
  defaultTheme: 'solid',
  timeZone: 'Europe/Paris',
  schedule: [
    { theme: 'halloween', from: '10-24', to: '11-02' },
    { theme: 'christmas', from: '12-15', to: '12-31' },
    { theme: 'winter', from: '12-01', to: '02-15' },
  ],
})

Slot order

In the example, winter is declared after christmas: from December 15 to 31, christmas wins, as expected.

This site’s calendar

schedule from site/charpente.config.ts

Theme	From	To
winter	01-01	02-15
spring	03-20	05-31
summer	07-01	08-31
autumn	09-22	10-23
halloween	10-24	11-02
christmas	12-15	12-31
solid	the rest of the year (defaultTheme)

Which theme on that day?

Date

Active theme: solid

activeTheme()

Camille DurandProject lead

A short introduction spanning two or three lines, to show how text is painted line by line.

FollowMessage

themeAt

themeAt(config, date) is the pure function behind everything else. The date defaults to “now” when omitted.

import { themeAt } from 'charpente'
import config from './charpente.config'

themeAt(config, new Date('2026-10-31T12:00:00Z'))
themeAt(config)

virtual:charpente.theme

The Vite plugin provides a virtual module with defaultTheme, timeZone and schedule already bundled. It exports activeTheme(date?).

import { activeTheme } from 'virtual:charpente.theme'

const root = document.documentElement
root.dataset.charpenteTheme = activeTheme()
root.dataset.charpenteTheme = activeTheme(new Date('2026-12-25T12:00:00Z'))

For TypeScript, declare the module in an env.d.ts file:

declare module 'virtual:charpente.theme' {
  export const activeTheme: (date?: Date) => string
}

charpente theme –date

The command prints the active theme, useful in a deploy script or to check a calendar. Without --date, it uses today. Here are the results for this site’s configuration:

$ charpente theme --date 2026-03-01
solid

$ charpente theme --date 2026-10-31
halloween

$ charpente theme --date 2026-12-25
christmas

$ charpente theme --date 2026-06-15
solid