mirror of
https://git.sr.ht/~cadence/tube-docs
synced 2025-10-27 19:59:12 +00:00
47 lines
1.8 KiB
Markdown
47 lines
1.8 KiB
Markdown
# 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!
|