Theme Customization

Customize the look and feel of your DexCode slides with themes, colors, and typography.

Theme Configuration

Every deck has a deck.config.ts file that controls its visual appearance. The theme is defined under the theme key with nested colors, fonts, spacing, and radius fields:

typescript

import { defineConfig } from "../../src/lib/deck-config";
 
export default defineConfig({
  title: "My Presentation",
  theme: {
    colors: {
      primary: "#e17120",
      secondary: "#ffb56a",
      accent: "#ff8c42",
      background: "#111111",
      text: "#e8e8e8",
      textMuted: "#999999",
      surface: "#1a1a1a",
      surfaceAlt: "#222222",
      border: "#333333",
    },
    fonts: {
      heading: "Inter, system-ui, sans-serif",
      body: "Noto Sans JP, sans-serif",
      mono: "Fira Code, monospace",
      headingWeight: 700,
      bodyLineHeight: 1.6,
    },
    spacing: {
      scale: 1.0,
    },
    radius: "12px",
  },
});

Color Options

Theme Colors

Typography

Font Options

Custom Backgrounds

Set per-slide backgrounds using frontmatter:

mdx

---
type: content
background: "linear-gradient(135deg, #1a1a2e, #16213e)"
---
 
# Slide with Custom Background

Background Options

Solid color: background: "#1a1a2e"
Gradient: background: "linear-gradient(135deg, #1a1a2e, #16213e)"
Image: background: "url(/images/hero.jpg)"

Component Styling

Built-in components automatically adapt to your theme colors. You can also override individual component styles:

mdx

<Chart
  type="bar"
  data={chartData}
  colors={["#e17120", "#ffb56a", "#ff8c42"]}
/>