Color Schemes & Presets
TabletopForge ships with three carefully crafted color presets designed for the tabletop gaming and miniature hobby market. Each preset applies a complete visual identity across all sections of your store.
Selecting a Theme Preset
To apply a preset:
- In the Shopify theme editor, click the Theme Settings icon (⚙️ gear icon on the left sidebar).
- Expand the Colors panel.
- Locate the Color scheme dropdown and select one of the three presets below.
Available Presets
🌑 Dark Fantasy (Default)
The flagship immersive dark mode — ideal for fantasy RPG stores, dice makers, and gothic miniature brands.
| Token | Value | Usage |
|---|---|---|
| Background | #0F0D12 | Main page background |
| Surface | #1A1720 | Cards, Bento grids, tables |
| Text | #E8E0D0 | Body copy and headings |
| Accent | #C9973A | Buttons, links, focus rings |
| Button Text | #0F0D12 | Text inside primary CTA buttons |
🌌 Midnight Blue
A deep-space sci-fi theme for futuristic miniature brands, wargame publishers, or space opera stores.
| Token | Value | Usage |
|---|---|---|
| Background | #08101E | Main page background |
| Surface | #0F1E30 | Cards and panel surfaces |
| Text | #E8F0FF | High-contrast white body text |
| Accent | #00C2FF | Electric cyan highlights and links |
| Button Text | #08101E | Text inside primary CTA buttons |
🔴 Crimson Forge
A high-contrast industrial command theme for wargame publishers and serious hobby stores.
| Token | Value | Usage |
|---|---|---|
| Background | #0A0A0A | Pitch black surfaces |
| Surface | #141414 | Cards and panel backgrounds |
| Text | #F0F0F0 | High-legibility white text |
| Accent | #CC1020 | Warning-red CTA accents |
| Button Text | #FFFFFF | Button labels |
Customizing Individual Colors
If the presets don't perfectly match your brand, you can override individual color tokens:
- In the theme editor, navigate to Theme Settings → Colors.
- Click any color swatch to open the color picker.
- Enter a custom hex code or use the visual picker.
The following tokens are exposed for customization:
| Setting | Description |
|---|---|
| Background color | Main page backing (behind all content) |
| Surface color | Card and panel backgrounds |
| Text color | General body copy and headings |
| Accent color | Buttons, borders, and interactive focus states |
| Button text color | Font color inside primary action buttons |
:::note CSS Variables
These settings inject CSS custom properties into the theme at runtime. You can reference them in custom CSS using tokens like var(--tf-primary), var(--tf-surface-container), var(--tf-on-surface), etc.
:::
Applying Color Schemes Per Section
Individual sections can override the global color scheme to create visual contrast between page areas. To apply a per-section color scheme:
- Click any section in the theme editor sidebar.
- Look for the Color scheme setting within that section's configuration panel.
- Select an alternate scheme from the dropdown.
This is particularly useful for alternating dark and light sections on your homepage.