# Adding custom themes to CloudTube

**NOTE:** This file uses `custom` as the name of the custom theme, but it can be whatever you like, just make sure to stay consistent across all steps.

1. Choose a file in `sass/themes/` to be the base for your theme. Copy it into `sass/themes/_custom.scss`. This file represents the colours that your theme will have.

2. Edit the new file to have your desired colours.

3. Make a new file called `sass/custom.sass`. This file represents all of your custom styles. Put the following code in this new file:

```sass
@use "themes/custom" as *
@use "includes/main" with ($_theme: $theme)
```

4. If you wish to add custom styles, you can add any Sass code to the end of this file. (Sass is just like CSS but without the brackets and semicolons.)

5. Edit `server.js` and add a new entry around line 28, as shown in the following code block. This is required for internal reasons.

```diff
 ...
 server.addRoute("/static/css/edgeless-light.css", "sass/edgeless-light.sass", "sass")
+server.addRoute("/static/css/custom.css", "sass/custom.sass", "sass")
 ...
```

6. Edit `pug/settings` and add a new entry around line 46, as shown in the following code block. Make sure to put a comma at the end of the previous line. This defines a human-readable name for your theme, and allows it to be selected on the settings page.

```diff
 ...
 {value: "2", text: "Edgeless light"},
+{value: "3", text: "Custom"},
 ...
```

7. Edit `pug/includes/layout.pug` and add the name of the theme into the array on line 6, as shown in the following code block. This is required for internal reasons.

```pug
...
 - const theme = settings && ["dark", "light", "edgeless-light", "custom"][settings.theme] || "dark"
...
```

8. Restart CloudTube so it can detect the new files.

That's it, enjoy your snazzy new theme!