~cadence/tube-devel

This thread contains a patchset. You're looking at the original emails, but you may wish to use the patch review UI. Review patch
1

[PATCH] Add a guide for adding custom themes

Details
Message ID
<TO9dVr-82Q-RRInRSgE79WoUCoXaPhAkUAuGiuUqYsXGaAGw-XM0IkeO5nDJJq9FcIF6gea3Tys3vsL_brwnR_DIbQD-cEwZW7Fk2si0xCM=@protonmail.com>
DKIM signature
pass
Download raw message
Patch: +47 -0
---
 docs/cloudtube/Adding custom themes.md | 47 ++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 docs/cloudtube/Adding custom themes.md

diff --git a/docs/cloudtube/Adding custom themes.md b/docs/cloudtube/Adding custom themes.md
new file mode 100644
index 0000000..851197b
--- /dev/null
@@ -0,0 +1,47 @@
## 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!
-- 
2.37.2
Details
Message ID
<20220824232731.5361975924aafe76e44c3197@disroot.org>
In-Reply-To
<TO9dVr-82Q-RRInRSgE79WoUCoXaPhAkUAuGiuUqYsXGaAGw-XM0IkeO5nDJJq9FcIF6gea3Tys3vsL_brwnR_DIbQD-cEwZW7Fk2si0xCM=@protonmail.com> (view parent)
DKIM signature
pass
Download raw message
Great job on using git-send-email! I added your documentation in
commit d805c160b7dfbe0387c616cc6c4dc5f5100bdd20
and then made my own changes on top of it in commit
b73251753c34ce5df67517881825ad800056518d.

Thanks so much for the contribution!
Reply to thread Export thread (mbox)