title: Themes
shell: standard

components:
  - type: header
    title: Stock themes
    eyebrow: Reference
    subtitle: "Set `theme: <name>` in your `kazam.yaml`. The seven rainbow themes pick up a muted, earth-toned accent on top of the neutral dark base (or a light base via `mode: light`). Readable content, quiet brand color."

  - type: section
    eyebrow: ROYGBIV
    heading: Rainbow set
    components:
      - type: markdown
        body: |
          <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;">
            <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;">
              <div style="height:64px;background:#BB7777;"></div>
              <div style="padding:14px 16px;">
                <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">red</div>
                <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#BB7777</div>
                <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: red</code>
              </div>
            </div>
            <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;">
              <div style="height:64px;background:#BB8C66;"></div>
              <div style="padding:14px 16px;">
                <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">orange</div>
                <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#BB8C66</div>
                <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: orange</code>
              </div>
            </div>
            <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;">
              <div style="height:64px;background:#B8A866;"></div>
              <div style="padding:14px 16px;">
                <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">yellow</div>
                <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#B8A866</div>
                <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: yellow</code>
              </div>
            </div>
            <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;">
              <div style="height:64px;background:#7A9878;"></div>
              <div style="padding:14px 16px;">
                <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">green</div>
                <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#7A9878</div>
                <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: green</code>
              </div>
            </div>
            <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;">
              <div style="height:64px;background:#7897B8;"></div>
              <div style="padding:14px 16px;">
                <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">blue</div>
                <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#7897B8</div>
                <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: blue</code>
              </div>
            </div>
            <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;">
              <div style="height:64px;background:#8A7FBB;"></div>
              <div style="padding:14px 16px;">
                <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">indigo</div>
                <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#8A7FBB</div>
                <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: indigo</code>
              </div>
            </div>
            <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;">
              <div style="height:64px;background:#AB7FBB;"></div>
              <div style="padding:14px 16px;">
                <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">violet</div>
                <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#AB7FBB</div>
                <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: violet</code>
              </div>
            </div>
          </div>

  - type: section
    eyebrow: Neutral
    heading: Base themes
    components:
      - type: markdown
        body: |
          <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;">
            <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;">
              <div style="height:64px;background:#899878;"></div>
              <div style="padding:14px 16px;">
                <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">dark</div>
                <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#899878 · sage accent on #121113</div>
                <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: dark</code>
              </div>
            </div>
            <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;">
              <div style="height:64px;background:#222725;"></div>
              <div style="padding:14px 16px;">
                <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">light</div>
                <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#222725 accent on #F7F7F2 paper</div>
                <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: light</code>
              </div>
            </div>
          </div>

  - type: section
    eyebrow: Usage
    heading: Apply a theme
    components:
      - type: code
        language: yaml
        code: |
          # kazam.yaml
          name: My Site
          theme: violet            # any rainbow color, or dark/light
          mode: light              # optional — flips rainbow themes onto light base
          texture: grid            # pairs with any theme
          glow: accent             # picks up the active accent

      - type: markdown
        body: |
          `mode` only affects the rainbow themes (`red` / `orange` / …). `theme: dark` and `theme: light` are self-contained and ignore it. Need a custom accent outside the stock set? Override any theme token directly with `colors:` — the named theme is just a starting point.

      - type: code
        language: yaml
        code: |
          # kazam.yaml — your brand color on top of the dark base
          theme: dark
          colors:
            accent: '#14B8B8'
            accent_soft: 'rgba(var(--accent-rgb), 0.08)'

  - type: callout
    variant: info
    title: Next up
    body: Once your theme looks right, the last step is shipping it. Any static host works — copy-paste recipes for the handful most people pick.
    links:
      - label: Deploy recipes →
        href: deploy.html
        variant: primary
