> ## Documentation Index
> Fetch the complete documentation index at: https://ej3mplo.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Seasonal events

> Halloween and the rest: what the SDK does on its own, and how to give your theme its own touch.

On their dates, ejGames dresses for the occasion. The first is **ejGames Scream** (Halloween, from October 3
to November 2). The user chooses it in **Settings → Appearance → Halloween mode**: *On its dates*, *Always*
or *Never*. The host decides whether an event is active and sends that to your theme.

## What the SDK does without you doing anything

While the event lasts:

* It sets `data-season="halloween"` on `<html>` and the variables `--ejg-season-accent` (pumpkin orange),
  `--ejg-season-green`, `--ejg-season-violet`, `--ejg-season-bg`, `--ejg-season-panel` and `--ejg-season-text`.
* It changes your `accent`, `bg`, `panel` and `play` color options, turns `dark` on, and puts its background
  in the `wallpaper` image option (`ejg.settings` already has them). When it ends, the user's values come back.
* It loads an atmosphere layer over everything (`#ejg-season`): fog along the floor, embers and the occasional
  bat. It does not receive clicks, and it stays still with "reduce motion".

For what does not come from your options (fixed colors, logos, decoration), use the selector in your CSS:

```css theme={null}
:root[data-season="halloween"] .topbar {
  background: linear-gradient(90deg, #1d1330, #120c1c);
  box-shadow: inset 0 -1px 0 var(--ejg-season-accent);
}
```

## In JavaScript

| | |
| - | - |
| `ejg.season.id` | `"halloween"` or `null` |
| `ejg.season.event` | the event: `name`, `dates`, `banner`, `video`, `wallpaper`, `wallpaperVideo`, `wallpaperAlt`, `palette`, `genre`, `title`, `subtitle` |
| `ejg.season.mode` | the user's setting: `"auto"`, `"on"` or `"off"` |
| `ejg.season.onChange(fn)` | an event starts or ends, or the setting changes (`fn({ mode, season })`) |

When it changes, the `settings` event also arrives (with the palette already applied, or removed).

## The store: banner and picks

`/_sdk/kit/events.js` has the pieces for your store's front page:

```js theme={null}
import { seasonOf, seasonBanner, seasonPicks } from "/_sdk/kit/events.js";

const ev = seasonOf(ejg);   // null when there is no event
if (ev) {
  front.prepend(seasonBanner(ev));   // the looping animated banner (2000×297)
  const { items, loading } = seasonPicks(ejg, ev, home.sections, repaint);
  // items: the ones in its genre (Horror), popular first; with `loading`, repaint() fires when the rest arrive
  front.append(myRow(ev.title, items, () => openCatalog({ genres: [ev.genre] })));
}
ejg.season.onChange(repaint);
```

The art is in `/_sdk/events/<id>/`: `banner.webp` and `banner.mp4`, `hero.webp` and `hero.mp4` (the large header, with `seasonBanner(ev, cls, { hero: true })`), `wallpaper-street.jpg` (and its animated `.mp4`) and `wallpaper-graveyard.jpg`. The built-in themes use it. Look at Steam's
(`themes/steam/store.js`, `eventFront`) as an example.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.