# Theme

A deck is styled by **CSS variables** (tokens) that `recit.config.ts` overrides. Every value accepts
hex, `rgb()`, `hsl()` or a bare HSL triplet (`"295 38% 25%"`).

```ts title="recit.config.ts"
import { defineConfig } from "@recit/core";

export default defineConfig({
  theme: {
    defaultMode: "light",
    colors: { primary: "#e11d48", background: "#fff7ed", card: "#ffffff" },
    dark: { primary: "#fb7185", background: "#1c1917", card: "#292524" },
    radius: "8px",
    fonts: { heading: "Georgia, serif" },
  },
  footer: { left: "{author}", right: "{slide}/{total}" },
  deck: { aspectRatio: "4:3", transition: "fade" },
});
```

<StoryEmbed slug="pitch" slide={3} />

A story can also name a whole theme, the same for its slides and its film: `theme: warm-editorial`.
See [Named themes](/theme/named-themes).

<FeatureGrid cols={3}>
  <FeatureCard icon="🎞️" title="Named themes" description="One theme for the deck and the film." href="/theme/named-themes" />
  <FeatureCard icon="🎨" title="Colors" description="Palette, light and dark modes." href="/theme/colors" />
  <FeatureCard icon="🔤" title="Typography & radius" description="Fonts and rounded corners." href="/theme/typography-and-radius" />
  <FeatureCard icon="🌗" title="Dark mode" description="Default mode and the T shortcut." href="/theme/dark-mode" />
  <FeatureCard icon="📎" title="Footer" description="Three zones, variables and logo." href="/theme/footer" />
  <FeatureCard icon="📐" title="Aspect ratio & transitions" description="16:9, 4:3, slide and fade." href="/theme/aspect-ratio-and-transitions" />
  <FeatureCard icon="🖌️" title="Custom CSS" description="Your stylesheet, loaded after the theme." href="/theme/custom-css" />
</FeatureGrid>