mirror of
https://git.sr.ht/~cadence/tube-docs
synced 2025-10-27 11:49:12 +00:00
48 lines
1.5 KiB
Markdown
48 lines
1.5 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. Copy `sass/themes/_dark.scss` (or whatever base you prefer) into `sass/themes/_custom.scss`
|
|
|
|
2. Edit the new file by setting the colors you want the custom theme to use
|
|
|
|
3. Make a new file called `sass/custom.sass` and put
|
|
```sass
|
|
@use "themes/custom" as *
|
|
@use "includes/main" with ($_theme: $theme)
|
|
```
|
|
in it, optionally add
|
|
```sass
|
|
@use "theme-modules/edgeless" with ($_theme: $theme)
|
|
```
|
|
if you want to hide borders around the navigation bar and recommended videos list
|
|
|
|
4. Edit `server.js` and add a new entry at line 28:
|
|
```js
|
|
...
|
|
server.addRoute("/static/css/edgeless-light.css", "sass/edgeless-light.sass", "sass")
|
|
server.addRoute("/static/css/custom.css", "sass/custom.sass", "sass")
|
|
...
|
|
```
|
|
|
|
5. Edit `pug/settings` and add a new entry at line 46:
|
|
```pug
|
|
...
|
|
{value: "2", text: "Edgeless light"},
|
|
{value: "3", text: "Custom"}
|
|
...
|
|
```
|
|
This will be the name shown in the settings menu when you go to select it, make sure to put a comma at the end of the previous entry (line 45)
|
|
|
|
6. Edit `pug/includes/layout.pug` and append the name of the theme in the array on line 6:
|
|
```pug
|
|
...
|
|
- const theme = settings && ["dark", "light", "edgeless-light", "custom"][settings.theme] || "dark"
|
|
...
|
|
```
|
|
This must be the same name you put in steps 1 and 3
|
|
|
|
7. Restart CloudTube
|
|
|
|
That's it, enjoy your snazzy new theme!
|