---
title: "Website Theme\n"
space: "ERPNext"
url: "https://docs.frappe.io/erpnext/website-theme"
updated: "2026-02-28"
---


ERPNext provides advanced theming capabilities to customize the look and feel of
your website and make it match your brand.

> Home > Website > Setup > Website Theme

## 1. How to create a Website Theme

1. Go to the Website Theme list and click on New.
1. Enter a Theme Name.
2. Customize your theme.
3. Click on Save.

> **Note:** Make sure you set the Website Theme in Website Settings for the
> theme to be applied.

![Select Website Theme in Website Settings](/files/website-theme.png)

## 2. Features

### 2.1 Theme Configuration

The section "Theme Configuration" is there for bootstrapping a basic theme. Here
you can choose your color scheme, font and button styles.

### 2.2 Stylesheet

If you know [SCSS](https://sass-lang.com/guide) and [Bootstrap 4 theming](https://getbootstrap.com/docs/4.3/getting-started/theming/),
you can manually write custom SCSS.

In the "Custom Overrides" field you can overwrite the variables defined by any
app's theme file. The content of this field will be included *before* importing
any other SCSS. For example, the variable `$spacer` is set to `1rem` by default.
Just redefine it to `$spacer: 2rem;` to make all spaces twice as big.

In the "Custom SCSS" field you can add your own styles. This will be included
*after* importing the app's themes. You can also override any specific style.
For example, if you don't like our buttons, just include the following:

```scss
.btn-primary {
 background-color: $teal;
 color: $orange;
}
```

### 2.3 Included Theme Files

If you take a look at the default theme generated by the configure dialog, it
imports `frappe/public/scss/website` and `erpnext/public/scss/website`. These
are the default theme files for `frappe` and `erpnext` app. If you have any other
apps installed, they might also provide their own `website.scss` file.

The section "Included Theme Files" lists all installed apps. Each app can bring
it's own theme file (`[app]/public/scss/website.scss`). A theme might be complete,
providing styles for the entire website, or just an add-on. For example, it might
style only the elements it introduces. By checking the boxes you can choose which
theme should be included in your website.

![Included Theme Files](/files/website-theme-included-theme-files.gif)

### 2.4 Custom JS

You can also write custom JavaScript that will run when your theme is applied.
Use it add/remove classes from elements, or any script that helps you change how
your elements look.