Light and dark sites

Your site can have a light look (light background, dark text) or a dark one. In FromScratch you choose this when you create the project, and the agent then keeps the whole site in that mode. This page explains the setting, how to change it later, and the difference with the theme of the FromScratch interface itself.

Choose the mode with the template

On the Home page, next to « Or start from a template », the « Site theme » toggle offers Light and Dark. By default it matches the theme you use for FromScratch. Pick the mode you want, then click a template (or describe your idea): the new site is created in that mode only.

For shops, the same choice appears in « Choose your shop design »: each of the four designs exists in light and dark.

Note

the templates are designed in both modes. Choosing one up front removes the other, so every page, button and form is consistent from the first preview.

Why the choice is made up front

Many websites switch between light and dark automatically, following the visitor's device setting. Inside the FromScratch preview, that automatic setting follows your FromScratch theme: a site built that way would flip when you switch FromScratch to dark mode, and you could never be sure what visitors would see. Fixing the mode at creation avoids that surprise. The agent knows which mode you picked and keeps new pages in it.

Change the mode later

You can switch at any time by asking the agent. It updates the colours of every page.

Switch the whole site to a dark look: dark background, light text, and keep our orange accent colour for buttons and links.

Check the result in the preview on Desktop and Mobile, then republish if the site is online. If you don't like it, open Versions and click Go back here on the previous version.

Light and dark that follow the visitor

If you really want your site to follow each visitor's device setting, ask for it explicitly. Keep in mind that in the FromScratch preview, what you see will then depend on your own FromScratch theme (switch it from the user menu to check both).

Make the site follow the visitor's device: light by default, dark when their phone or computer is in dark mode. Keep the same accent colour in both.

The FromScratch interface theme

The user menu has its own light/dark switch for the FromScratch application (the Home page, the chat, the menus). It only changes how FromScratch looks to you: it never changes your site's colours once its mode is set.

Tips for a good result

• Give the agent your brand colours as values or as a reference (« the green of our logo »); it builds the rest of the palette around them.
• In dark mode, ask for photos that work on a dark background, and check that text over images stays readable.
• For a shop, the design's own colours come in both modes; change the accent colour by asking the agent.

FAQ

Related

• Make it yours
• What you can build
• Write prompts that work