Showing revision #0c6f478c of page make_a_theme

Make a Theme

Go to the Themes page and click 'New Theme'.

The easiest way to get started writing a theme is to look at an existing theme's CSS:

Example theme

Copy / paste pieces of it into your new theme and play around with the variables to get a different look. After a bit of practice, you should be able to write your own code from scratch.

The "Common CSS" box is for code that will be the same on both the daytime and night modes. Use the Daytime CSS and Night CSS boxes for setting 2 different color schemes for each mode. For example:

Daytime CSS:


.site-nav {
  background: linear-gradient(135deg, blue 50%, red 50%);
  font-weight: 900;
}

Night CSS:


.site-nav {
  background: linear-gradient(135deg, darkblue 50%, darkred 50%);
  font-weight: 900;
}

Will make a banner with blue and red colors in daytime mode, and dark blue and dark red colors in night mode.

While you're making your theme, go to your User Settings > Appearance, and set your new theme to the Preferred theme for testing.

If you want to base your theme off of an already existing theme, enter the existing theme's name in the 'Parent theme' box e.g. 'material-beta'. You can then add more code to alter that theme. If you're creating an all-original theme, leave this box empty.

Embedding images in your theme is not supported at present.

Resources:

http://www.htmldog.com/guides/css/beginner/

https://developer.mozilla.org/en-US/docs/Web/CSS

https://www.w3schools.com/css/css_syntax.asp

http://stylus-lang.com/


Source code

Go to the [Themes](https://raddle.me/themes) page and click **'New Theme'**.

The easiest way to get started writing a theme is to look at an existing theme's CSS:

[Example theme](https://raddle.me/theme_source/99aa3fca-0dcb-4e97-a53b-a4188f5cebde)

Copy / paste pieces of it into your new theme and play around with the variables to get a different look. After a bit of practice, you should be able to write your own code from scratch.

The **"Common CSS"** box is for code that will be the same on both the daytime and night modes. Use the **Daytime CSS** and **Night CSS** boxes for setting 2 different color schemes for each mode. For example:

**Daytime CSS:**

```

.site-nav {
  background: linear-gradient(135deg, blue 50%, red 50%);
  font-weight: 900;
}

```

**Night CSS:**

```

.site-nav {
  background: linear-gradient(135deg, darkblue 50%, darkred 50%);
  font-weight: 900;
}

```

Will make a banner with blue and red colors in daytime mode, and dark blue and dark red colors in night mode.

While you're making your theme, go to your **User Settings > Appearance**, and set your new theme to the **Preferred theme** for testing.

If you want to base your theme off of an already existing theme, enter the existing theme's name in the **'Parent theme'** box e.g. 'material-beta'. You can then add more code to alter that theme. If you're creating an all-original theme, leave this box empty.

Embedding images in your theme is not supported at present.

**Resources:**

http://www.htmldog.com/guides/css/beginner/

https://developer.mozilla.org/en-US/docs/Web/CSS

https://www.w3schools.com/css/css_syntax.asp

http://stylus-lang.com/