Add more customisation options

Saltssaumure · Jul 14, 2023 · 506daca · 506daca
1 parent b42b07e
commit 506daca
Show file tree

Hide file tree

Showing 14 changed files with 103 additions and 56 deletions.
diff --git a/NineX.theme.css b/NineX.theme.css
@@ -4,7 +4,7 @@
  * @authorLink https://github.com/Saltssaumure
  * @description A Windows 9x style Discord theme.
  * @license GPL-3.0
- * @version 1.2
+ * @version 1.3
  * @invite uy8nKQVatp
  * @source https://github.com/Saltssaumure/w9x-discord-theme
  * @donate https://ko-fi.com/saltssaumure
@@ -16,7 +16,18 @@
 :root {
     --w9x-background-image: none;
     --w9x-background-color: #008080;
-    --w9x-start-text: "Windows95";
+    --w9x-start-text:       "Windows95";
+
+    --w9x-titlebar-color:   #000080;
+    --w9x-warning-color:    #FF0000;
+    --w9x-positive-color:   #008000;
+    --w9x-highlight-color:  #0000FF;
+
+    --w9x-box-color-1:      #FFFFFF;
+    --w9x-box-color-2:      #DFDFDF;
+    --w9x-box-color-3:      #C0C0C0;
+    --w9x-box-color-4:      #808080;
+    --w9x-box-color-5:      #000000;
 }
 
 .theme-light {

diff --git a/README.md b/README.md
@@ -20,14 +20,15 @@
 [issues]:           https://github.com/Saltssaumure/w9x-discord-theme/issues
 [.theme.css]:       https://github.com/Saltssaumure/w9x-discord-theme/blob/main/NineX.theme.css
 
-[release-gh]:       https://github.com/Saltssaumure/w9x-discord-theme/releases/latest "Latest release"
 [release-bd]:       https://betterdiscord.app/theme/?id=933 "BetterDiscord store page"
-[release-rp]:       https://replugged.dev/install?identifier=Saltssaumure/w9x-discord-theme&source=github "Replugged addon installer"
+[release-bd-gh]:    https://github.com/Saltssaumure/w9x-discord-theme/releases/latest/download/NineX.theme.css "Latest release"
+[release-rp]:       https://replugged.dev/store/net.saltssaumure.NineX "Replugged store page"
+[release-rp-gh]:    https://github.com/Saltssaumure/w9x-discord-theme/releases/latest/download/net.saltssaumure.NineX.asar "Latest release"
 
 # NineX Discord Theme
 [![Buy me a coffee on ko-fi][shield-donate]][ko-fi]
-[![BetterDiscord GitHub downloads][shield-bd-dl]][release-gh]
-[![Replugged downloads][shield-asar-dl]][release-rp]
+[![BetterDiscord GitHub downloads][shield-bd-dl]][release-bd-gh]
+[![Replugged GitHub downloads][shield-asar-dl]][release-rp-gh]
 ![Total size][shield-repo-size]
 
 ***A Windows 9x style Discord theme.***
@@ -41,8 +42,8 @@
 ### BetterDiscord
 1. Install [BetterDiscord][BetterDiscord].
 2. Download the theme file:
-    - [GitHub][release-gh]
-    - [BD Store][release-bd]
+    - [BetterDiscord store][release-bd]
+    - [GitHub][release-bd-gh]
 3. Place theme file in the `themes` folder:
     - Windows: `%AppData%/BetterDiscord/themes`
     - Mac: `~/Library/Application Support/betterdiscord/themes`
@@ -51,8 +52,8 @@
 ### Replugged
 1. Install [Replugged][Replugged].
 2. Install the theme:
-    - [GitHub][release-gh]
-    - [Installer][release-rp]
+    - [Replugged store][release-rp]
+    - [GitHub][release-rp-gh]
 
 ### Vencord
 1. Install [Vencord][Vencord].
@@ -61,13 +62,18 @@
 
 ## Customisation
 
-| Description             | Variable name            | Valid values                       | Default value                        |
-| ----------------------- | ------------------------ | ---------------------------------- | ------------------------------------ |
-| Background image        | `--w9x-background-image` | Any image link encased in `url()`. | `none`                               |
-| Background colour       | `--w9x-background-color` | Any [colour][css-color].           | `#008080`                            |
-| Inner background colour | `--w9x-bg-color`         | Any [colour][css-color].           | `#FFFFFF` (light) / `#000000` (dark) |
-| Inner text colour       | `--w9x-text-color`       | Any [colour][css-color].           | `#000000` (light) / `#DFDFDF` (dark) |
-| Start menu text         | `--w9x-start-text`       | Any quoted text.                   | `"Windows95"`                        |
+| Description             | Variable name                           | Valid values                       | Default value                                         |
+| ----------------------- | --------------------------------------- | ---------------------------------- | ----------------------------------------------------- |
+| Background image        | `--w9x-background-image`                | Any image link encased in `url()`. | `none`                                                |
+| Background colour       | `--w9x-background-color`                | Any [colour][css-color].           | `#008080`                                             |
+| Start menu text         | `--w9x-start-text`                      | Any quoted text.                   | `"Windows95"`                                         |
+| Titlebar colour         | `--w9x-titlebar-color`                  | Any [colour][css-color].           | `#000080`                                             |
+| Warning colour          | `--w9x-warning-color`                   | Any [colour][css-color].           | `#FF0000`                                             |
+| Positive colour         | `--w9x-positive-color`                  | Any [colour][css-color].           | `#008000`                                             |
+| Highlight ring colour   | `--w9x-highlight-color`                 | Any [colour][css-color].           | `#0000FF`                                             |
+| Box colour              | `--w9x-box-color-1`, `2`, `3`, `4`, `5` | Any [colour][css-color].           | `#FFFFFF`, `#DFDFDF`, `#C0C0C0`, `#808080`, `#000000` |
+| Inner background colour | `--w9x-bg-color`                        | Any [colour][css-color].           | `#FFFFFF` (light) / `#000000` (dark)                  |
+| Inner text colour       | `--w9x-text-color`                      | Any [colour][css-color].           | `#000000` (light) / `#DFDFDF` (dark)                  |
 
 ### BetterDiscord
 1. Open `Settings` > `BetterDiscord` > `Themes`.
@@ -76,7 +82,7 @@
 
 ### Replugged
 1. Open `Settings` > `Replugged` > `Quick CSS`.
-2. Copy and paste lines 15-30 of [`NineX.theme.css`][.theme.css].
+2. Copy and paste lines 15-41 of [`NineX.theme.css`][.theme.css].
 3. Edit the variable values and apply changes.
 
 ### Vencord
@@ -85,7 +91,7 @@
 #### Recommended method
 1. Open `Settings` > `Vencord` > `Vencord`.
 2. Toggle on `Enable Custom CSS` and click `Open QuickCSS File`.
-3. Copy and paste lines 15-30 of [`NineX.theme.css`][.theme.css].
+3. Copy and paste lines 15-41 of [`NineX.theme.css`][.theme.css].
 4. Edit the variable values.
 
 ## License

diff --git a/manifest.json b/manifest.json
@@ -7,7 +7,7 @@
         "discordID": "134142022092062720",
         "github": "Saltssaumure"
     },
-    "version": "1.2.3",
+    "version": "1.3.0",
     "updater": {
         "type": "store",
         "id": "net.saltssaumure.NineX"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ninex-discord-theme",
-    "version": "1.2.3",
+    "version": "1.3.0",
     "description": "A Windows 9x style Discord theme.",
     "repository": "https://github.com/Saltssaumure/w9x-discord-theme.git",
     "author": "Saltssaumure <[email protected]>",

diff --git a/scss-compile.config.js b/scss-compile.config.js
@@ -8,6 +8,6 @@ export default {
         /** The name of your theme repository. */
         repo: "w9x-discord-theme",
         /** The version of your theme. */
-        version: "1.2.3"
+        version: "1.3.0"
     }
 };
diff --git a/scss/_main.scss b/scss/_main.scss
@@ -23,7 +23,7 @@
 
 // Overall background
 .bg-1QIAus {
-    background: var(--w9x-background-color, #{$turquoise}) var(--w9x-background-image, none) center/cover;
+    background: var(--w9x-background-color) var(--w9x-background-image) center/cover;
 }
 
 // Transparency

diff --git a/scss/_part.scss b/scss/_part.scss
@@ -1,5 +1,7 @@
 @use "part/bd";
 @use "part/buttons";
+@use "part/css-default";
+@use "part/css-vars";
 @use "part/HorizontalServerList";
 @use "part/icons";
 @use "part/scrollbar";

diff --git a/scss/main/_channels.scss b/scss/main/_channels.scss
@@ -190,7 +190,7 @@
 
 // Drag voice user
 .containerUserOver-SDa1HW::after {
-    background: transparentize($darkblue, 0.7);
+    background: $darkblue;
     border-color: $darkblue;
     left: 0;
 }

diff --git a/scss/overlay/popovers/_emotes.scss b/scss/overlay/popovers/_emotes.scss
@@ -101,7 +101,8 @@
 
     // Favourites
     .categoryFadeBlurple-1l49_Q {
-        background: transparentize($darkblue, 0.2);
+        background: $darkblue;
+        opacity: 0.7;
     }
 
     // Gif / Category

diff --git a/scss/part/_css-default.scss b/scss/part/_css-default.scss
@@ -0,0 +1,28 @@
+@use "../top/color" as *;
+
+:root {
+    --w9x-background-image: none;
+    --w9x-background-color: #008080;
+    --w9x-start-text:       "Windows95";
+
+    --w9x-titlebar-color:   #000080;
+    --w9x-warning-color:    #FF0000;
+    --w9x-positive-color:   #008000;
+    --w9x-highlight-color:  #0000FF;
+
+    --w9x-box-color-1:      #FFFFFF;
+    --w9x-box-color-2:      #DFDFDF;
+    --w9x-box-color-3:      #C0C0C0;
+    --w9x-box-color-4:      #808080;
+    --w9x-box-color-5:      #000000;
+}
+
+.theme-light {
+    --w9x-bg-color:     #{$white};
+    --w9x-text-color:   #{$black};
+}
+
+.theme-dark {
+    --w9x-bg-color:     #{$black};
+    --w9x-text-color:   #{$lightgrey};
+}
diff --git a/scss/top/_vars-css.scss → scss/part/_css-vars.scss b/scss/top/_vars-css.scss → scss/part/_css-vars.scss
@@ -1,5 +1,5 @@
-@use "vars-scss" as *;
-@use "font";
+@use "../top/vars-scss" as *;
+@use "../top/font";
 
 @font-face {
     font-family: w95;
@@ -186,14 +186,3 @@
     --button-secondary-background-disabled: #{$grey};
     --button-secondary-background-hover: #{$grey};
 }
-
-// Everything not grey boxes?
-.theme-light {
-    --w9x-bg-color: #{$white};
-    --w9x-text-color: #{$black};
-}
-
-.theme-dark {
-    --w9x-bg-color: #{$black};
-    --w9x-text-color: #{$lightgrey};
-}
diff --git a/scss/top/_color.scss b/scss/top/_color.scss
@@ -0,0 +1,18 @@
+// ---- Colour palette ----
+// DO NOT USE ANYWHERE BUT _DEFAULT-CSS
+
+$white:     #FFFFFF;
+$lightgrey: #DFDFDF;
+$grey:      #C0C0C0;
+$darkgrey:  #808080;
+$black:     #000000;
+
+$blue:      #0000FF;
+$darkblue:  #000080;
+
+$turquoise: #008080;
+
+$red:       #FF0000;
+$green:     #008000;
+
+$beige:     #FFFFEE;
diff --git a/scss/top/_vars-scss.scss b/scss/top/_vars-scss.scss
@@ -1,21 +1,15 @@
 // ---- Colours -----
 
-$white:     #FFFFFF;
-$lightgrey: #DFDFDF;
-$grey:      #C0C0C0;
-$darkgrey:  #808080;
-$black:     #000000;
-
-$blue:      #0000FF;
-$darkblue:  #000080;
-
-$turquoise: #008080;
-
-$red:       #FF0000;
-
-$green:     #008000;
-
-$beige:     #FFFFEE;
+$darkblue:  var(--w9x-titlebar-color);
+$red:       var(--w9x-warning-color);
+$green:     var(--w9x-positive-color);
+$blue:      var(--w9x-highlight-color);
+
+$white:     var(--w9x-box-color-1);
+$lightgrey: var(--w9x-box-color-2);
+$grey:      var(--w9x-box-color-3);
+$darkgrey:  var(--w9x-box-color-4);
+$black:     var(--w9x-box-color-5);
 
 // ---- Sizes ----
 

diff --git a/scss/w9x.scss b/scss/w9x.scss
@@ -1,5 +1,3 @@
-@use "top/vars-css";
-
 @use "main";
 @use "overlay";
 @use "part";