From b73251753c34ce5df67517881825ad800056518d Mon Sep 17 00:00:00 2001 From: Cadence Ember Date: Wed, 24 Aug 2022 23:25:14 +1200 Subject: [PATCH] Fix inconsistencies in custom themes documentation --- docs/cloudtube/Adding custom themes.md | 51 +++++++++++++------------- 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/docs/cloudtube/Adding custom themes.md b/docs/cloudtube/Adding custom themes.md index 851197b..8499d10 100644 --- a/docs/cloudtube/Adding custom themes.md +++ b/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! -- 2.38.5