~cadence/tube-docs

b73251753c34ce5df67517881825ad800056518d — Cadence Ember 9 months ago d805c16 main
Fix inconsistencies in custom themes documentation
1 files changed, 25 insertions(+), 26 deletions(-)

M docs/cloudtube/Adding custom themes.md
M docs/cloudtube/Adding custom themes.md => docs/cloudtube/Adding custom themes.md +25 -26
@@ 1,47 1,46 @@
## Adding custom themes to CloudTube
# 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
**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`
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 by setting the colors you want the custom theme to use
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:

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")
...
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")
 ...
```

5. Edit `pug/settings` and add a new entry at line 46:
```pug
...
{value: "2", text: "Edgeless light"},
{value: "3", text: "Custom"}
...
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"},
 ...
```
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:
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"
...
```
This must be the same name you put in steps 1 and 3

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

That's it, enjoy your snazzy new theme!