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
tube-docs/docs/cloudtube/Adding custom themes.md
PowerMan2206 d805c160b7
Add a guide for adding custom themes
2022-08-24 23:16:28 +12:00

1.5 KiB
Raw Blame History

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

@use "themes/custom" as *
@use "includes/main" with ($_theme: $theme)

in it, optionally add

@use "theme-modules/edgeless" with ($_theme: $theme)

if you want to hide borders around the navigation bar and recommended videos list

  1. Edit server.js and add a new entry at line 28:
...
server.addRoute("/static/css/edgeless-light.css", "sass/edgeless-light.sass", "sass")
server.addRoute("/static/css/custom.css", "sass/custom.sass", "sass")
...
  1. Edit pug/settings and add a new entry at line 46:
...
{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)

  1. Edit pug/includes/layout.pug and append the name of the theme in the array on line 6:
...
 - const theme = settings && ["dark", "light", "edgeless-light", "custom"][settings.theme] || "dark"
...

This must be the same name you put in steps 1 and 3

  1. Restart CloudTube

That's it, enjoy your snazzy new theme!