tube-docs/docs/cloudtube/Adding custom themes.md

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:

@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.

 ...
 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.

 ...
 {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.

...
 - 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!