The complete guide to custom themes

I want you to create a custom theme for Slate (an eLearning course builder). Generate a complete theme configuration that I can import.

**My desired theme:** [Describe your theme here, e.g., "A warm, earthy dark theme with amber/gold accents, inspired by a cozy library. Use rounded corners and elegant serif headings."]

---

## OUTPUT FORMAT

Produce TWO outputs:

### 1. Theme Settings JSON

A JSON object in this exact format:

```json
{
  "_slateThemeExport": true,
  "exportVersion": "1.0",
  "exportedAt": "[current ISO date]",
  "theme": {
    "primaryColor": "#HEXCOLOR",
    "primaryForegroundColor": "",
    "hoverColor": "#HEXCOLOR",
    "outlineColor": "#HEXCOLOR or rgba()",
    "outlineThickness": 1,
    "borderRadius": 8,
    "spacing": 16,
    "headingFont": "font-id",
    "bodyFont": "font-id",
    "headingFontWeight": 700,
    "bodyFontWeight": 400,
    "customCss": "[full CSS from output 2 as a JSON string — escape newlines as \n and double-quotes as \". The string can be long; max 50,000 characters.]",
    "logoUrl": "",
    "navigationLayout": "classic",
    "contentLayout": "standard",
    "lockedNavigation": false,
    "assessmentAutoscroll": true,
    "showExitCourse": false,
    "knowledgeChecks": {
      "maxAttempts": 0,
      "revealCorrectAnswer": true,
      "revealAnswersPerAttempt": false,
      "showFeedback": true,
      "eliminateWrongOptions": false
    }
  }
}
```

**Field notes** (so the model fills these in correctly):
- `primaryForegroundColor` — text colour on primary buttons and active nav. Leave as empty string `""` to let Slate auto-derive (light text on dark buttons, dark text on light ones). Set explicitly only when you want a specific brand pairing.
- `logoUrl` — empty string is fine; logos are uploaded via the builder rather than embedded in theme JSON.
- `contentLayout` — `"standard"` keeps text in a comfortable reading column; `"wide"` gives images, videos, tables, and multi-column blocks edge-to-edge room with a hamburger nav. Pick `"wide"` for visually heavy or editorial-style courses.
- `knowledgeChecks` — course-wide defaults for retry behaviour and feedback on knowledge checks. `maxAttempts: 0` means unlimited.

### 2. Custom CSS

The complete CSS to paste into the Custom CSS editor.

---

## CONSTRAINTS

**Color formats:** Use hex (#XXXXXX) or rgba() only. No named colors, hsl(), or 3-digit hex.

**Value ranges:**
- outlineThickness: 0-4 (integer)
- borderRadius: 0-24
- spacing: 0-32
- Font weights: 100-900 in steps of 100

**Blocked CSS patterns (these will be stripped):**
- @import
- javascript: in url()
- expression()
- behavior:
- </style>

**Available font IDs (pick from these only):**

Sans-serif: inter, open-sans, roboto, lato, poppins, nunito, work-sans, dm-sans, source-sans-3, noto-sans, mulish, rubik

Serif: playfair-display, merriweather, lora, source-serif-pro, crimson-pro, libre-baskerville, bitter

Display: montserrat, raleway, oswald, bebas-neue, archivo, sora

Handwriting: caveat, dancing-script, pacifico

Monospace: fira-code, jetbrains-mono

---

## CSS VARIABLE SYSTEM

The player uses CSS custom properties on :root. Override these to control the theme:

**Color Scale (the foundation - invert for dark themes):**
--slate-50 through --slate-900

Default light values: #F8FAFC, #F1F5F9, #E2E8F0, #CBD5E1, #94A3B8, #64748B, #475569, #334155, #1E293B, #0F172A

**Semantic colors:**
--primary-color, --primary-foreground, --accent-color, --accent-hover, --accent-light
--outline-color, --outline-thickness
--success / --success-light, --error / --error-light

`--primary-foreground` is the text colour drawn on top of `--primary-color` (buttons, active nav). Slate auto-derives a readable colour from luminance when `primaryForegroundColor` is left empty.

**Typography:**
--font-family-heading / --font-family-body
--font-weight-heading / --font-weight-body

**Spacing:** --space-1 (0.25rem) through --space-16 (4rem)
**Border radius:** --radius-sm through --radius-2xl, --radius-full

---

## TARGETABLE SELECTORS

### Shell
body, #slate-player, #player-content

### Header
#player-header, #course-title, #progress-bar, #progress-fill, #progress-text

### Navigation Sidebar
#player-nav, .nav-header, .nav-header-title, .nav-section-title
.nav-lesson, .nav-lesson:hover, .nav-lesson.active, .nav-lesson.viewed:not(.active)::after

### Footer
#player-footer, #btn-prev, #btn-next

### Text Content
.block-text, .block-text h1/h2/h3/h4, .block-text a, .block-text code, .block-text blockquote

### Buttons
.button-primary/.slate-button.button-primary, .button-secondary, .button-outline (+ :hover)

### Media
.block-image figure / img / figcaption
.block-video .video-wrapper, .block-video .video-caption
.audio-block, .audio-block audio, .audio-block figcaption  (note: the audio block's class is "audio-block", NOT "block-audio")
.block-iframe .iframe-wrapper

### Interactive Blocks
.block-accordion, .block-tabs, .tab-button.active
.card, .card-style-*, .flip-card-face, .carousel-card, .carousel-dot.active

### Tables
.slate-table th/td, .slate-table thead th, .slate-table.table-stripe-*

### Knowledge Checks
.kc-option, .kc-option.selected, .kc-option.correct/.incorrect, .kc-submit, .kc-feedback

### Assessment
.assessment-intro, .assessment-results, .assessment-results.passed/.failed
.assessment-score-circle, .assessment-start-btn, .assessment-submit-btn

---

## TIPS FOR GREAT THEMES

1. Dark themes: Invert the --slate-* scale (50=darkest, 900=lightest)
2. Use var() references instead of hardcoding colors
3. Gradients on #progress-fill, #course-title, .button-primary, .nav-lesson.active
4. Glassmorphism: backdrop-filter: blur(12px) + rgba() backgrounds on header/footer
5. Glow effects: box-shadow: 0 0 Npx rgba(accent, 0.3-0.5) on active elements
6. Gradient text: background: linear-gradient(...), -webkit-background-clip: text
7. Always style both .button-primary AND .slate-button.button-primary
8. Match scrollbar styling to your color scheme
9. Test all block types: accordions, tabs, knowledge checks, cards, tables, assessments

Now generate the theme based on my description above.

#3B82F6          (hex)
#18181B          (hex)
rgba(139, 92, 246, 0.3)   (rgba with alpha)
rgb(59, 130, 246)          (rgb)

body { }                        /* Page background (outside the player) */
#slate-player { }               /* The entire player container */
#player-content { }             /* Main content area */

#player-header { }              /* Top bar with title and progress */
#course-title { }               /* Course title text */
#progress-bar { }               /* Progress bar track */
#progress-fill { }              /* Progress bar filled portion */
#progress-text { }              /* "75% Complete" text */

#player-nav { }                 /* Sidebar container */
.nav-header { }                 /* Sidebar header area */
.nav-header-title { }           /* Course name in sidebar */
.nav-header-subtitle { }        /* Section subtitle */
.nav-section-title { }          /* Section headings */
.nav-lesson { }                 /* Individual lesson links */
.nav-lesson:hover { }           /* Lesson hover state */
.nav-lesson.active { }          /* Currently active lesson */
.nav-lesson.viewed { }          /* Previously completed lessons */
.nav-toggle { }                 /* Sidebar toggle button */
.nav-close { }                  /* Sidebar close button (mobile) */
.nav-overlay { }                /* Mobile backdrop overlay */

#player-footer { }              /* Bottom navigation bar */
#btn-prev { }                   /* Previous button */
#btn-next { }                   /* Next button */
#btn-prev:disabled { }          /* Disabled previous */
#btn-next:disabled { }          /* Disabled next */

.block-text { }                 /* Text block container */
.block-text h1 { }              /* Heading 1 */
.block-text h2 { }              /* Heading 2 */
.block-text h3 { }              /* Heading 3 */
.block-text h4 { }              /* Heading 4 */
.block-text p { }               /* Paragraphs */
.block-text strong { }          /* Bold text */
.block-text a { }               /* Links */
.block-text a:hover { }         /* Link hover */
.block-text ul, .block-text ol { } /* Lists */
.block-text code { }            /* Inline code */
.block-text blockquote { }      /* Blockquotes */

.block-image figure { }            /* Image wrapper */
.block-image img { }               /* Image element */
.block-image figcaption { }        /* Image caption */
.block-video .video-wrapper { }    /* Video container — selector is scoped under .block-video for specificity */
.block-video .video-caption { }    /* Video caption */
.audio-block { }                   /* Audio block figure (the audio block's class is .audio-block, not .block-audio) */
.audio-block audio { }             /* Audio element */
.audio-block figcaption { }        /* Audio caption */
.block-iframe .iframe-wrapper { }  /* Embed container */

/* Accordion */
.block-accordion { }            /* Accordion container */
.accordion-item { }             /* Individual accordion item */
.accordion-trigger { }          /* Clickable header */
.accordion-trigger:hover { }    /* Header hover */
.accordion-icon { }             /* Expand/collapse icon */
.accordion-content { }          /* Expanded content area */

/* Tabs */
.block-tabs { }                 /* Tabs container */
.tabs-header-wrapper { }        /* Tab bar */
.tab-button { }                 /* Individual tab */
.tab-button:hover { }           /* Tab hover */
.tab-button.active { }          /* Active tab */
.tab-panel { }                  /* Tab content area */

/* Cards */
.card { }                       /* Card container */
.card-title { }                 /* Card title */
.card-subtitle { }              /* Card subtitle */
.card-content { }               /* Card body */
.card-style-default { }         /* Default card variant */
.card-style-outlined { }        /* Outlined card */
.card-style-elevated { }        /* Elevated (shadow) card */
.card-style-filled { }          /* Filled background card */

/* Flip Cards */
.flip-card-face { }             /* Card face (front & back) */
.flip-card-body { }             /* Card face content */
.flip-card-hint { }             /* "Click to flip" hint */

/* Card Carousel */
.carousel-card { }              /* Carousel card */
.carousel-card-body { }         /* Carousel card content */
.carousel-nav { }               /* Prev/next arrows */
.carousel-dot { }               /* Pagination dot */
.carousel-dot.active { }        /* Active pagination dot */

.button-primary, .slate-button.button-primary { }
.button-primary:hover, .slate-button.button-primary:hover { }
.button-secondary, .slate-button.button-secondary { }
.button-secondary:hover, .slate-button.button-secondary:hover { }
.button-outline, .slate-button.button-outline { }
.button-outline:hover, .slate-button.button-outline:hover { }

.divider-line { }               /* Line divider */
.divider-dots::before { }       /* Dotted divider */

.block-table .table-wrapper { }
.slate-table { }                /* Table element */
.slate-table th { }             /* Table header cells */
.slate-table td { }             /* Table body cells */
.slate-table thead th { }       /* Top header row */
.slate-table th[scope="row"] { } /* Row headers */
.slate-table.table-border-all th,
.slate-table.table-border-all td { }       /* All borders variant */
.slate-table.table-border-horizontal th,
.slate-table.table-border-horizontal td { } /* Horizontal borders */
.slate-table.table-stripe-even tbody tr:nth-child(even) { }
.slate-table.table-stripe-odd tbody tr:nth-child(odd) { }
.block-table figcaption { }     /* Table caption */

.hotspot-popover { }            /* Popover container */
.hotspot-popover-header { }     /* Popover header */
.hotspot-popover-body a { }     /* Links inside popovers */
.hotspot-marker.active { }      /* Active hotspot marker */

.block-knowledge-check { }      /* Quiz container */
.kc-question { }                /* Question text */
.kc-hint { }                    /* Hint text */
.kc-option { }                  /* Answer option */
.kc-option::before { }          /* Radio/checkbox indicator */
.kc-option:hover { }            /* Option hover */
.kc-option.selected { }         /* Selected option */
.kc-option.correct { }          /* Correct answer (after submit) */
.kc-option.incorrect { }        /* Incorrect answer (after submit) */
.kc-submit { }                  /* Submit button */
.kc-feedback.correct { }        /* Correct feedback message */
.kc-feedback.incorrect { }      /* Incorrect feedback message */

.assessment-intro { }           /* Assessment intro card */
.assessment-intro-icon { }      /* Icon container */
.assessment-intro-title { }     /* Assessment title */
.assessment-detail { }          /* Stats (questions, passing score) */
.assessment-start-btn { }       /* Start button */
.assessment-header { }          /* In-progress header */
.assessment-question-wrapper { } /* Question card */
.assessment-submit-btn { }      /* Submit assessment */
.assessment-results { }         /* Results card */
.assessment-results.passed { }  /* Passed state */
.assessment-results.failed { }  /* Failed state */
.assessment-results.locked { }  /* No retries remaining */
.assessment-score-circle { }    /* Score display */
.assessment-retry-btn { }       /* Retry button */

::-webkit-scrollbar { }         /* Scrollbar (WebKit) */
::-webkit-scrollbar-track { }   /* Scrollbar track */
::-webkit-scrollbar-thumb { }   /* Scrollbar handle */
:focus-visible { }              /* Keyboard focus outline */
.skip-link { }                  /* Skip navigation link */

:root {
  /* Inverted color scale: dark backgrounds, light text */
  --slate-50: #18181b;   /* Was near-white, now near-black */
  --slate-100: #1f1f23;
  --slate-200: #27272a;
  --slate-300: #3f3f46;
  --slate-400: #71717a;
  --slate-500: #a1a1aa;
  --slate-600: #d4d4d8;
  --slate-700: #e4e4e7;
  --slate-800: #f4f4f5;
  --slate-900: #fafafa;  /* Was near-black, now near-white */
}

body {
  background: #09090b;   /* Darkest background for the page */
}

{
  "primaryColor": "#8B5CF6",
  "hoverColor": "#7C3AED",
  "outlineColor": "rgba(139, 92, 246, 0.3)",
  "outlineThickness": 1,
  "borderRadius": 12,
  "spacing": 16
}

{
  "primaryColor": "#3B82F6",
  "hoverColor": "#2563EB",
  "outlineColor": "rgba(63, 63, 70, 0.8)",
  "outlineThickness": 1,
  "borderRadius": 8,
  "spacing": 16
}

{
  "_slateThemeExport": true,
  "exportVersion": "1.0",
  "exportedAt": "2026-05-27T12:00:00.000Z",
  "courseName": "My Course",
  "theme": {
    "primaryColor": "#8B5CF6",
    "primaryForegroundColor": "",
    "hoverColor": "#7C3AED",
    "outlineColor": "rgba(139, 92, 246, 0.3)",
    "outlineThickness": 1,
    "borderRadius": 12,
    "spacing": 16,
    "headingFont": "playfair-display",
    "bodyFont": "inter",
    "headingFontWeight": 700,
    "bodyFontWeight": 400,
    "customCss": "/* Your custom CSS here */",
    "logoUrl": "",
    "showScrollIndicator": false,
    "enableSearch": true,
    "navigationLayout": "classic",
    "contentLayout": "standard",
    "lockedNavigation": false,
    "assessmentAutoscroll": true,
    "showExitCourse": false,
    "knowledgeChecks": {
      "maxAttempts": 0,
      "revealCorrectAnswer": true,
      "revealAnswersPerAttempt": false,
      "showFeedback": true,
      "eliminateWrongOptions": false
    }
  }
}

/* Teal Dark Theme */
:root {
  /* Inverted slate scale for dark mode */
  --slate-50: #0f1419;
  --slate-100: #151c22;
  --slate-200: #1c252d;
  --slate-300: #2a3541;
  --slate-400: #5c6b7a;
  --slate-500: #8899a8;
  --slate-600: #b0c0cf;
  --slate-700: #d0dbe5;
  --slate-800: #e8eff4;
  --slate-900: #f5f8fa;

  /* Teal accent colors */
  --accent-color: #14b8a6;
  --accent-hover: #0d9488;
  --accent-light: rgba(20, 184, 166, 0.15);
  --primary-color: #14b8a6;

  /* Status colors */
  --success: #22c55e;
  --success-light: rgba(34, 197, 94, 0.15);
  --error: #f43f5e;
  --error-light: rgba(244, 63, 94, 0.15);

  --outline-color: rgba(20, 184, 166, 0.3);
  --outline-thickness: 1px;
}

body {
  background: #0a0f13;
  color: var(--slate-700);
}

#slate-player {
  background: var(--slate-50);
}

#player-header {
  background: rgba(15, 20, 25, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(20, 184, 166, 0.15);
}

#course-title { color: var(--slate-900); }
#progress-bar { background: rgba(20, 184, 166, 0.1); border: 1px solid rgba(20, 184, 166, 0.2); }
#progress-fill { background: var(--accent-color); }

#player-footer {
  background: rgba(15, 20, 25, 0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(20, 184, 166, 0.15);
}

#btn-next { background: var(--accent-color); color: #fff; }
#btn-next:hover:not(:disabled) { background: var(--accent-hover); }
#btn-prev { background: var(--slate-200); color: var(--slate-800); border: 1px solid var(--slate-300); }

#player-nav {
  background: rgba(10, 15, 19, 0.98);
  border-right: 1px solid rgba(20, 184, 166, 0.1);
}

.nav-header { background: var(--slate-50); border-bottom: 1px solid rgba(20, 184, 166, 0.1); }
.nav-header-title { color: var(--slate-900); }
.nav-section-title { color: #2dd4bf; }

.nav-lesson { color: var(--slate-600); border: 1px solid transparent; }
.nav-lesson:hover { background: rgba(20, 184, 166, 0.08); color: var(--slate-800); }
.nav-lesson.active { background: var(--accent-color); color: #fff; }

.block-text a { color: #2dd4bf; }
.block-text a:hover { color: #5eead4; }
.block-text code { background: var(--slate-200); color: #2dd4bf; }
.block-text blockquote { border-left: 3px solid var(--accent-color); background: var(--slate-100); }

.button-primary, .slate-button.button-primary { background: var(--accent-color); color: #fff; }
.button-primary:hover, .slate-button.button-primary:hover { background: var(--accent-hover); }