Changing Template Colors in Genesis

Genesis is pre-configured with two colors – light and dark. Changing the template color is as simple as changing a tag in the index.html file.

Switching the Colors

You can switch the template colors by following these instructions:

  1. Open the index.html file in your code editor.
  2. To switch to a light color, change the id to the <body> tag to theme-light.
  3. To switch to a dark color, change the id to the <body> tag to theme-dark.
  4. Save the index.html file and view the changes in your web browser.

Here is the code which you need to modify to switch to a light color:

<body id="theme-light">

Here is the code which you need to modify to switch to a dark color:

<body id="theme-dark">