Design Language

How to choose a color theme (and light or dark mode)

September 15, 2026
How to choose a color theme (and light or dark mode)

In TeleportHQ, you change your site's set of theme colors from the Color tab of the Design Language panel: pick a theme from the theme list, then use the sun/moon switch for the light or dark version. To change single theme colors, turn on Custom Theme Colors and click a color to edit it.

Before you start

  • Themes are available on every TeleportHQ plan.
  • You need a role that can edit the Design Language (Owner, Admin or Designer). Other roles see "Your current role does not have permission to update tokens."
  • In a site the TeleportHQ AI built, most colors come from the AI Generated list at the top of the Color tab, not from the theme. To change those, see How to create and edit your site's colors.

Where the theme controls are

In the TeleportHQ Color tab, the theme block shows the theme's name and its eight colors. In a site the AI built, it sits below the AI Generated list.

The theme block in the TeleportHQ Color tab with three controls numbered: 1 the theme list, 2 the Custom Theme Colors button, 3 the light and dark switch
  1. The theme list: shows the current theme's name, for example Cultural. Click it to pick another theme.
  2. Custom Theme Colors: the icon right of the theme name. It lets you edit single theme colors.
  3. The sun/moon switch: switches the theme between its light and dark version.

Steps

1. Pick a theme

  1. Press Esc, or click an empty part of the canvas, so no element is selected. The Design Language panel appears in the right panel.
  2. Click the Color tab.
  3. In the theme block, click the theme's name, for example Cultural. The list of themes opens. Each theme shows a preview of its colors.
  4. Click a theme, for example Eco.

The eight theme colors change, and every element that uses them updates. The available themes are Creative, Cultural, Default, Ebook, Eco, Financial, Kids, Nutrition, Sport, Startup and Yoga.

The open theme list in the TeleportHQ Color tab, showing each theme's name with a preview of its colors

2. Switch between light and dark

  1. Next to the theme name, click the sun/moon switch.

The theme colors change to the light or dark version of the same theme.

3. Edit single theme colors

Theme colors are locked until you turn on custom editing.

  1. Next to the theme name, click the Custom Theme Colors icon. The icon stays pressed.
  2. Click a theme color, for example primary1. The color editor opens.
  3. Pick a new color, or type a hex value such as #2E7D32.
  4. Click Update, or press Enter.

Check that it worked

The canvas updates right away. Buttons, backgrounds and text that use theme colors show the new colors. The page background and default text color change too, if they use theme colors.

Troubleshooting

I picked a new theme, but my site's colors barely changed Your site uses other colors, for example the AI Generated colors of a site the TeleportHQ AI built. Edit those colors instead. See How to create and edit your site's colors.

Nothing happens when I click a theme color Custom editing is off. Click the Custom Theme Colors icon next to the theme name first.

Edit is greyed out when I right-click a theme color Right-click Edit and Duplicate stay disabled on theme colors ("Theme colors cannot be edited"). Turn on Custom Theme Colors, then click the color.

My custom theme colors disappeared Turning Custom Theme Colors off brings back the theme's original colors. Your custom colors are saved separately for each theme and for light and dark, and come back when you turn it on again.

The fonts on my site changed too A theme also sets the fonts of its built-in heading and body classes (their names start with thq-heading and thq-body). Picking a theme, or turning Custom Theme Colors on or off, sets those fonts again. To change fonts afterwards, see How to change the fonts on your site.

Good to know

  • The eight TeleportHQ theme colors are primary1, primary2, secondary1, secondary2, accent1, accent2, neutral-dark and neutral-light. Theme colors can't be deleted, and you can't add new ones to the theme. Add your own colors in a separate category instead. See How to create and edit your site's colors.
  • Switching theme doesn't change your corner radius values.
  • When you switch theme, Google fonts that nothing uses any more are removed from the project.
  • New projects start with the Cultural theme in light mode.
  • In some sites the AI built with both light and dark colors, the AI Generated list has its own sun/moon switch. It shows the light or dark version of those colors on the canvas, so you can check both. It doesn't change the saved colors. It also switches the theme colors below to light or dark.
Share

Related Articles

What is the Design Language panel?

The TeleportHQ Design Language panel holds your site-wide colors, text styles, sizes and spacing, CSS variables and CSS classes; it shows in the editor's right panel when nothing is selected and in Project settings under Appearance, and when you change a value there every element that uses it updates.

How to create and edit your site's colors

In TeleportHQ, open the Color tab of the Design Language panel, click + in a category to save a named color or gradient, then pick it in any color field; editing a saved color updates every element that uses it.

How to change the fonts on your site

In TeleportHQ, change the font of one text element in the right panel under Text Style → Font Family, or change it for the whole site by editing the default text style in the Design Language panel's Text tab (or, in a site the AI built, the font-family-heading and font-family-body variables); fonts that aren't in the list must be imported or uploaded first in Project settings → Fonts.

How to create text styles

In TeleportHQ, open the Text tab of the Design Language panel, click +, name the style and set its font, weight, size, line height and letter spacing, then click Add; editing a text style updates every text that uses it.