1 files changed, 25 insertions(+), 26 deletions(-)

M docs/cloudtube/Adding custom themes.md

@@ 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!