public-Repo-Mirrors/tube-docs
1
Fork 0
mirror of https://git.sr.ht/~cadence/tube-docs synced 2025-10-27 11:49:12 +00:00
Code Releases Activity

Fix inconsistencies in custom themes documentation

Browse Source
This commit is contained in:
Cadence Ember 2022-08-24 23:25:14 +12:00
parent d805c160b7
commit b73251753c
No known key found for this signature in database
GPG Key ID: BC1C2C61CF521B17
1 changed files with 26 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
docs/cloudtube/Adding custom themes.md
View File

@ -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 ```sass
@use "themes/custom" as * @use "themes/custom" as *
@use "includes/main" with ($_theme: $theme) @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: 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.)
```js
... 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") ```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: 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.
```pug
... ```diff
{value: "2", text: "Edgeless light"}, ...
{value: "3", text: "Custom"} {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) ```
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.
6. Edit `pug/includes/layout.pug` and append the name of the theme in the array on line 6:
```pug ```pug
... ...
- const theme = settings && ["dark", "light", "edgeless-light", "custom"][settings.theme] || "dark" - 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! That's it, enjoy your snazzy new theme!