Theme
Change your site's colors, typography, spacing, and visual style using the theme editor.
Every site has its own Theme — a set of design tokens (colors, fonts, spacing, borders) that control how the site looks. The Theme editor lets you customize all of these without writing any CSS.
Navigate to your site → Theme tab.
Screenshot placeholder
Theme editor panel
Choosing a Preset
TDC Site Builder ships with a collection of professionally designed theme presets. Select one as a starting point and customize from there.
Available presets include:
- Bubblegum — Playful pinks and rounded corners
- Twitter — Clean blues inspired by social media
- Amethyst Haze — Deep purples with soft gradients
- Caffeine — Warm browns and earthy tones
- Pastel Dreams — Soft pastels with gentle shadows
- And more...
Click a preset to apply it immediately. You can always switch presets — your manual customizations override the preset values.
Colors
The color system is split into Light Mode and Dark Mode variants. Toggle between them to configure both.
| Token | Description |
|---|---|
| Background | Page background color |
| Foreground | Default text color |
| Primary | Main brand color — buttons, links, accents |
| Primary Foreground | Text on primary-colored surfaces |
| Secondary | Supporting accent color |
| Muted | Subtle background for cards, inputs |
| Border | Border color for cards and inputs |
| Destructive | Error and danger state color |
Click any color swatch to open the color picker. You can enter hex values, RGB, or HSL.
Typography
| Setting | Description |
|---|---|
| Heading Font | Font family for H1–H6 tags |
| Body Font | Font family for paragraphs and UI text |
| Mono Font | Font family for code blocks |
| Base Font Size | Root rem size in pixels |
Fonts are sourced from Google Fonts. Type any Google Font name into the font selector.
Google Fonts are loaded via your own Google Fonts API key configured in your profile. Set yours at Profile → Unsplash / Google Fonts API Key.
Radius & Spacing
| Setting | Description |
|---|---|
| Border Radius | Corner rounding applied to cards, buttons, and inputs (none / sm / md / lg / full) |
| Shadow | Elevation shadow style applied to cards and modals |
Publishing Theme Changes
Click Publish in the theme editor to make your theme changes live. The new theme is applied to the site immediately for all visitors.
Theme changes apply site-wide instantly on publish. Preview your site before publishing to confirm the look across all pages.
Light vs. Dark Mode on Your Site
Your site can support a dark mode toggle for visitors if your theme has both light and dark color variants configured. This is controlled by the theme engine — when both variants are set, a toggle is available to visitors automatically.