Themes

Overview

Out of the box you get a default light theme and dark theme. The light theme contains all the necessary template files and assets (CSS and Javascript). While, the dark theme contains only one replacement CSS file with a different set of color variables, and inherits the rest of the files from the light theme.

You can switch themes in Configuration → Theme & Navigation, where you'll find three settings:

  • Site Theme
  • Mobile Theme
  • Fallback Theme

The Site Theme is loaded on desktop and tablets. The Mobile Theme is loaded on mobile devices, while the Fallback Theme is used when creating a new custom theme.

Any files not present in the selected site and mobile theme will be loaded from the fallback theme. Unless you are creating a new theme from scratch, the fallback theme should be the default one.

There isn't a dedicated mobile theme because the site theme is responsive and works well on all device sizes. There used to be a mobile theme in the past and for that reason we continue to keep the setting there because it can also be useful if you really want to have a different output on mobile, rather than just have the layout be responsive.

Customization Basics

Follow along and get started with theme customizations in just a few steps.

Theme Resources

Here's a list of useful theme and template customization resources