Themes & Customization

3dSynth supports full theme customization, allowing you to personalize the interface colors and create your own themes.

Built-in Themes

Seven themes are included by default, covering everything from quick day-to-day use to specialized creative or engineering setups:

Dark - A dark interface optimized for extended use
Light - A light interface for bright environments
Modern Light - Clean SaaS look with cool slate neutrals and a sky-blue accent
Playful Creative - Warm cream surfaces with vivid magenta accents for creative work
Neon Dark - Deep near-black layers with electric cyan and magenta accents
CAD Engineering - Calm blueprint neutrals tuned for long CAD and engineering sessions
Premium Dark - Charcoal layers with a single violet jewel accent

Use the Dark/Light toggle button in the viewer controls (bottom-right) to flip between the standard Dark and Light themes, or open the Theme Editor to pick any of the other built-ins.

Theme Editor

Access the Theme Editor by clicking the Theme Editor button in the viewer controls.

Overview

The Theme Editor allows you to:

Switch between available themes
View and edit all color settings
Create new custom themes
Duplicate, rename, and delete themes
Import and export themes as JSON files

Color Categories

Themes control colors in three main areas:

UI Colors

Interface elements throughout the application:

Setting	Description
Background Primary	Main application background
Background Secondary	Panel and card backgrounds
Background Tertiary	Input and nested element backgrounds
Background Elevated	Elevated surfaces (tooltips, dropdowns)
Border Default	Standard borders
Border Input	Input field borders
Text Primary	Main text color
Text Secondary	Supporting text
Text Muted	Labels and hints
Text Disabled	Disabled elements
Accent Primary	Primary accent (highlights, focus)
Accent Secondary	Secondary accent
Focus Ring	Keyboard focus indicator

Status Colors

Feedback and notification colors:

Setting	Description
Danger	Errors and critical warnings
Warning	Caution messages
Success	Confirmations and positive feedback
Info	Informational messages

Viewer Colors

3D preview colors:

Setting	Description
Background	3D viewport background
Toolpath	Default toolpath line color
Grid Major	Major grid lines
Grid Minor	Minor grid lines
Bed Plate	Print bed surface
Ambient Light	Scene ambient lighting
Key Light	Main directional light
Model Color	Default model/material color seeded into the active design when you switch themes

Creating Custom Themes

New from Scratch

Open the Theme Editor
Click Duplicate Theme on any existing theme
Enter a name for your new theme
Edit colors as desired
Click Save to confirm changes

Duplicate & Modify

Select a theme similar to what you want
Click Duplicate Theme
Give it a unique name
Make your adjustments
Save the changes

Managing Themes

Rename

Select your custom theme
Edit the name field at the top
Click Save to apply

Delete

Select the custom theme you want to remove
Click Delete Theme
Confirm the deletion

Import & Export

Export a Theme

Select the theme to export
Click Export Theme
Save the JSON file to your computer

Exported files use the naming format theme-name-theme.json.

Import a Theme

Click Import Theme in the Theme Editor
Select a .json theme file
The theme is added to your custom themes list

Auto-Save Drafts

The Theme Editor automatically saves your unsaved changes to browser storage. If you close the editor accidentally:

Reopen the Theme Editor
Your draft is automatically restored
Continue editing or click Save to finalize

Drafts are cleared when you:
- Save the theme
- Cancel editing
- Switch to a different theme

Storage

Themes are stored locally:

Custom themes: Saved in browser localStorage
Active theme preference: Persisted between sessions
Desktop app: Settings remain after updates

Keyboard Shortcuts

Key	Action
Escape	Close Theme Editor (without saving)