Add more colour customisation options

Saltssaumure · Jul 14, 2023 · bccdbdb · bccdbdb
1 parent da343ee
commit bccdbdb
Show file tree

Hide file tree

Showing 12 changed files with 103 additions and 69 deletions.
diff --git a/Exponent.theme.css b/Exponent.theme.css
@@ -2,9 +2,9 @@
  * @name Exponent
  * @author Saltssaumure
  * @authorLink https://github.com/Saltssaumure
- * @description A Windows XP style theme built for BetterDiscord.
+ * @description A Windows XP style theme.
  * @license GPL-3.0
- * @version 1.3
+ * @version 1.4
  * @invite uy8nKQVatp
  * @source https://github.com/Saltssaumure/xp-discord-theme
  * @donate https://ko-fi.com/saltssaumure
@@ -14,32 +14,44 @@
 
 /* See https://github.com/Saltssaumure/xp-discord-theme#customisation for customisation settings. */
 :root {
-    --xp-background-image: url(https://saltssaumure.github.io/xp-discord-theme/img/bliss.avif);
-    --xp-background-color: #0066CC;
-    --bsod-color:   navy;
-    --bsod-text:    "A problem has been detected and Windows has been shut down to prevent damage to your computer. \A\A A clock interrupt was not received on a secondary processor within the allocated time interval. \A\A If this is the first time you've seen this stop error screen, restart your computer. If this screen appears again, follow these steps: \A\A Check to make sure any new hardware or software is properly installed. If this is a new installation, ask your hardware or software manufacturer for any Windows updates you might need. \A\A If problems continue, disable or remove any newly installed hardware or software. Disable BIOS memory options such as caching or shadowing. If you need to use Safe Mode to remove or disable components, restart your computer, press F8 to select Advanced Startup Options, and then throw away the whole computer. \A\A Technical information: \A\A *** STOP: USING_DISCORD \A\A ***       discord.exe - Address DEADBEEF base at 8BADF00D, DateStamp 1337C0D3 \A\A\A\A\A\A\A\A\A\A Collecting data for crash dump ... \A Initializing disk for crash dump ... \A Beginning dump of all your belongings ... \A Dumping physical memory to disk: 100% \A Physical memory dump complete. \A Contact your system administrator or technical support group for further assistance.";
+    --xp-background-image:  url(https://saltssaumure.github.io/xp-discord-theme/img/bliss.avif);
+    --xp-background-color:  #0066CC;
+    --xp-window-color-1:    #005AE7;
+    --xp-window-color-2:    #0372FF;
+    --xp-taskbar-color-1:   #108CE4;
+    --xp-taskbar-color-2:   #578CD0;
+    --xp-taskbar-color-3:   #1665CA;
+    --xp-start-color-1:     #008000;
+    --xp-start-color-2:     #38C438;
+    --xp-shortcut-color-1:  #0CA80C;
+    --xp-shortcut-color-2:  #008000;
+    --xp-ping-color:        #E64D1C;
+    --bsod-color:           #000080;
+    --bsod-text:            "A problem has been detected and Windows has been shut down to prevent damage to your computer. \A\A A clock interrupt was not received on a secondary processor within the allocated time interval. \A\A If this is the first time you've seen this stop error screen, restart your computer. If this screen appears again, follow these steps: \A\A Check to make sure any new hardware or software is properly installed. If this is a new installation, ask your hardware or software manufacturer for any Windows updates you might need. \A\A If problems continue, disable or remove any newly installed hardware or software. Disable BIOS memory options such as caching or shadowing. If you need to use Safe Mode to remove or disable components, restart your computer, press F8 to select Advanced Startup Options, and then throw away the whole computer. \A\A Technical information: \A\A *** STOP: USING_DISCORD \A\A ***       discord.exe - Address DEADBEEF base at 8BADF00D, DateStamp 1337C0D3 \A\A\A\A\A\A\A\A\A\A Collecting data for crash dump ... \A Initializing disk for crash dump ... \A Beginning dump of all your belongings ... \A Dumping physical memory to disk: 100% \A Physical memory dump complete. \A Contact your system administrator or technical support group for further assistance.";
 }
 
 .theme-dark {
-    --xp-bg-color:          #000;
+    --xp-bg-color:          #000000;
     --xp-set-color:         #FFFFFFB3;
-    --xp-hover-color:       #123;
-    --xp-zing-color:        #A50;
-    --xp-txt-color:         #FFF;
-    --xp-bg-bright-color:   #234;
-    --xp-bg-tint-color:     #222;
-    --xp-bg-shade-color:    #111;
+    --xp-hover-color:       #112233;
+    --xp-selected-color:    #1665CA;
+    --xp-zing-color:        #AA5500;
+    --xp-txt-color:         #FFFFFF;
+    --xp-bg-bright-color:   #223344;
+    --xp-bg-tint-color:     #222222;
+    --xp-bg-shade-color:    #111111;
     --xp-border-color:      #1665CA;
 }
 
 .theme-light {
-    --xp-bg-color:          #FFF;
+    --xp-bg-color:          #FFFFFF;
     --xp-set-color:         #000000B3;
     --xp-hover-color:       #D3D3D3;
+    --xp-selected-color:    #1665CA;
     --xp-zing-color:        #FFA500;
-    --xp-txt-color:         #000;
+    --xp-txt-color:         #000000;
     --xp-bg-bright-color:   #F0EFED;
     --xp-bg-tint-color:     #EBE8D7;
     --xp-bg-shade-color:    #808080;
-    --xp-border-color:      #000;
+    --xp-border-color:      #000000;
 }
diff --git a/README.md b/README.md
@@ -1,7 +1,8 @@
-[light]: https://user-images.githubusercontent.com/29710355/229367843-ad03f107-ad47-4c63-9692-89cd781d40f8.png
-[dark]: https://user-images.githubusercontent.com/29710355/229367846-78bf3675-a091-4f60-8ff0-4427697a2ef2.png
-[bsod-text]: https://github.com/Saltssaumure/xp-discord-theme/blob/main/scss/top/_vars-scss.scss
-[addons]: https://github.com/Saltssaumure/xp-discord-theme/tree/main/addon
+[light]:        https://user-images.githubusercontent.com/29710355/229367843-ad03f107-ad47-4c63-9692-89cd781d40f8.png
+[dark]:         https://user-images.githubusercontent.com/29710355/229367846-78bf3675-a091-4f60-8ff0-4427697a2ef2.png
+[customised]:   https://github.com/Saltssaumure/xp-discord-theme/assets/29710355/e076daf4-23d5-40f2-9a86-ca3fdf0e251c
+[bsod-text]:    https://github.com/Saltssaumure/xp-discord-theme/blob/main/scss/top/_vars-scss.scss
+[addons]:       https://github.com/Saltssaumure/xp-discord-theme/tree/main/addon
 
 [css-color]:        https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
 [discord]:          https://discord.gg/uy8nKQVatp
@@ -13,22 +14,23 @@
 [shield-donate]:    https://img.shields.io/badge/Donate-ko--fi-orange?style=flat-square&logo=kofi&logoColor=orange
 [ko-fi]:            https://ko-fi.com/saltssaumure "Buy me a coffee!"
 
-[shield-bd-dl]:  https://img.shields.io/github/downloads/Saltssaumure/xp-discord-theme/Exponent.theme.css?color=purple&label=BD%20GitHub%20downloads&style=flat-square
+[shield-bd-dl]:     https://img.shields.io/github/downloads/Saltssaumure/xp-discord-theme/Exponent.theme.css?color=purple&label=BD%20GitHub%20downloads&style=flat-square
 [shield-asar-dl]:   https://img.shields.io/github/downloads/Saltssaumure/xp-discord-theme/net.saltssaumure.Exponent.asar?color=purple&label=Replugged%20downloads&style=flat-square
 [shield-repo-size]: https://img.shields.io/github/repo-size/Saltssaumure/xp-discord-theme?style=flat-square "Total size"
 
 [license]:          https://github.com/Saltssaumure/xp-discord-theme/blob/main/LICENSE
 [issues]:           https://github.com/Saltssaumure/xp-discord-theme/issues
 [.theme.css]:       https://github.com/Saltssaumure/xp-discord-theme/blob/main/Exponent.theme.css
 
-[release-gh]:       https://github.com/Saltssaumure/xp-discord-theme/releases/latest "Latest release"
 [release-bd]:       https://betterdiscord.app/theme/?id=823 "BetterDiscord store page"
-[release-rp]:       https://replugged.dev/install?identifier=Saltssaumure/xp-discord-theme&source=github "Replugged addon installer"
+[release-bd-gh]:    https://github.com/Saltssaumure/xp-discord-theme/releases/latest/download/Exponent.theme.css "Latest Exponent.theme.css"
+[release-rp]:       https://replugged.dev/store/net.saltssaumure.Exponent "Replugged store page"
+[release-rp-gh]:    https://github.com/Saltssaumure/xp-discord-theme/releases/latest/download/net.saltssaumure.Exponent.asar "Replugged addon installer"
 
 # Exponent 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 XP style Discord theme.***
@@ -42,8 +44,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`
@@ -52,8 +54,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].
@@ -62,21 +64,28 @@
 
 ## Customisation
 
-| Description                 | Variable name           | Valid values                               | Default value                                                        |
-| --------------------------- | ----------------------- | ------------------------------------------ | -------------------------------------------------------------------- |
-| Background image            | `--xp-background-image` | Any image link encased in `url()`. | `url(https://saltssaumure.github.io/xp-discord-theme/img/bliss.avif)` |
-| Background colour           | `--xp-background-color` | Any [colour][css-color].                   | `#003300`                                                            |
-| BSOD background colour      | `--bsod-color`          | Any [colour][css-color].                   | `navy`                                                               |
-| BSOD text                   | `--bsod-text`           | Any quoted text. Use `\A` for new lines.   | [Read here][bsod-text].                                              |
-| Panel background colour     | `--xp-bg-color`         | Any [colour][css-color].                   | `#000` (dark) / `#FFF` (light)                                       |
-| Panel settings icon colour  | `--xp-set-color`        | Any [colour][css-color].                   | `#FFFFFFB3` (dark) / `#000000B3` (light)                             |
-| Panel hovered item colour   | `--xp-hover-color`      | Any [colour][css-color].                   | `#102030` (dark) / `#D3D3D3` (light)                                 |
-| Panel top decoration colour | `--xp-zing-color`       | Any [colour][css-color].                   | `#A05000` (dark) / `#FFA500` (light)                                 |
-| Panel text colour           | `--xp-txt-color`        | Any [colour][css-color].                   | `#FFF` (dark) / `#000` (light)                                       |
-| Button highlight colour     | `--xp-bg-bright-color`  | Any [colour][css-color].                   | `#203040` (dark) / `#F0EFED` (light)                                 |
-| Button background colour    | `--xp-bg-tint-color`    | Any [colour][css-color].                   | `#202020` (dark) / `#EBE8D7` (light)                                 |
-| Button shadow colour        | `--xp-bg-shade-color`   | Any [colour][css-color].                   | `#101010` (dark) / `#808080` (light)                                 |
-| Button/panel border colour  | `--xp-border-color`     | Any [colour][css-color].                   | `#1665CA` (dark) / `#000000` (light)                                 |
+![Screenshot of Exponent with customised colours][customised]
+
+| Description                 | Variable name                      | Valid values                                     | Default value                                                         |
+| --------------------------- | ---------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------- |
+| Background image            | `--xp-background-image`            | Any image link encased in `url()`.               | `url(https://saltssaumure.github.io/xp-discord-theme/img/bliss.avif)` |
+| Background colour           | `--xp-background-color`            | Any [colour][css-color].                         | `#003300`                                                             |
+| Window titlebar colours     | `--xp-window-color-1`, `-2`        | Any [colour][css-color].                         | `#005AE7`, `#0372FF`                                                  |
+| Taskbar control colours     | `--xp-taskbar-color-1`, `-2`, `-3` | Any [colour][css-color].                         | `#108CE4`, `#578CD0`, `#1665CA`                                       |
+| Start button colours        | `--xp-start-color-1`, `-2`         | Any [colour][css-color].                         | `#008000`, `#38C438`                                                  |
+| Shortcut icon colours       | `--xp-shortcut-color-1`, `-2`      | Any [colour][css-color].                         | `#0CA80C`, `#008000`                                                  |
+| Ping bubble colour          | `--xp-ping-color`                  | Any [colour][css-color].                         | `#E64D1C`                                                             |
+| BSOD background colour      | `--bsod-color`                     | Any [colour][css-color].                         | `navy`                                                                |
+| BSOD text                   | `--bsod-text`                      | Any quoted text. Use `\A` for new lines.         | [Read here][bsod-text].                                               |
+| Panel background colour     | `--xp-bg-color`                    | Any [colour][css-color].                         | `#000` (dark) / `#FFF` (light)                                        |
+| Panel settings icon colour  | `--xp-set-color`                   | Any [colour][css-color], preferably translucent. | `#FFFFFFB3` (dark) / `#000000B3` (light)                              |
+| Panel hovered item colour   | `--xp-hover-color`                 | Any [colour][css-color].                         | `#102030` (dark) / `#D3D3D3` (light)                                  |
+| Panel top decoration colour | `--xp-zing-color`                  | Any [colour][css-color].                         | `#A05000` (dark) / `#FFA500` (light)                                  |
+| Panel text colour           | `--xp-txt-color`                   | Any [colour][css-color].                         | `#FFF` (dark) / `#000` (light)                                        |
+| Button highlight colour     | `--xp-bg-bright-color`             | Any [colour][css-color].                         | `#203040` (dark) / `#F0EFED` (light)                                  |
+| Button background colour    | `--xp-bg-tint-color`               | Any [colour][css-color].                         | `#202020` (dark) / `#EBE8D7` (light)                                  |
+| Button shadow colour        | `--xp-bg-shade-color`              | Any [colour][css-color].                         | `#101010` (dark) / `#808080` (light)                                  |
+| Button/panel border colour  | `--xp-border-color`                | Any [colour][css-color].                         | `#1665CA` (dark) / `#000000` (light)                                  |
 
 ### BetterDiscord
 1. Open `Settings` > `BetterDiscord` > `Themes`.
@@ -85,7 +94,7 @@
 
 ### Replugged
 1. Open `Settings` > `Replugged` > `Quick CSS`.
-2. Copy and paste lines 15-45 of [`Exponent.theme.css`][.theme.css].
+2. Copy and paste lines 15-57 of [`Exponent.theme.css`][.theme.css].
 3. Edit the variable values and apply changes.
 
 ### Vencord
@@ -94,7 +103,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-45 of [`Exponent.theme.css`][.theme.css].
+3. Copy and paste lines 15-57 of [`Exponent.theme.css`][.theme.css].
 4. Edit the variable values.
 
 ## Addons

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

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "exponent-discord-theme",
-    "version": "1.3.4",
+    "version": "1.4.0",
     "description": "A Windows XP style Discord theme.",
     "repository": "https://github.com/Saltssaumure/xp-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: "xp-discord-theme",
         /** The version of your theme. */
-        version: "1.3.4"
+        version: "1.4.0"
     }
 };
diff --git a/scss/main/_taskbar.scss b/scss/main/_taskbar.scss
@@ -6,7 +6,7 @@
 // Servers sidebar / Taskbar
 .guilds-2JjMmN {
     z-index: 0;
-    --status-danger: #{$red-bright};
+    --status-danger: var(--xp-ping-color);
 
     // Unread indicator
     .unreadMentionsIndicatorBottom-3RJMnQ,
@@ -15,7 +15,7 @@
 
         .bar-2eAyLE {
             border-radius: 0;
-            background: linear-gradient(to bottom, transparent, $red-bright);
+            background: linear-gradient(to bottom, transparent, var(--xp-ping-color));
         }
     }
 
@@ -25,11 +25,11 @@
     }
 
     .scroller-3X7KbA {
-        @include box.barGradient(true, $blue-max, $blue-vivid);
+        @include box.barGradient(true, var(--xp-window-color-1), var(--xp-window-color-2));
 
         // DMs icon / Start button
         .tutorialContainer-1pL9QS {
-            @include box.barGradient(true, $green-max, $green-bright);
+            @include box.barGradient(true, var(--xp-start-color-1), var(--xp-start-color-2));
             position: relative;
             padding: 5px 0 30px 0;
             border-radius: 0 0 100% 100% / 0 0 12px 12px;
@@ -64,17 +64,17 @@
 
         // Folder
         .folder-241Joy {
-            background: radial-gradient(circle at 12px 12px, white, $blue-bright, $blue-select);
+            background: radial-gradient(circle at 12px 12px, white, var(--xp-taskbar-color-1), var(--xp-taskbar-color-3));
         }
 
         // Open folder
         .expandedFolderBackground-1kSAf6 {
-            background: linear-gradient(to bottom, $blue-bright, $blue-mild);
+            background: linear-gradient(to bottom, var(--xp-taskbar-color-1), var(--xp-taskbar-color-2));
         }
 
         // Add server and community servers
         .circleIconButton-1VxDrg {
-            background: linear-gradient(to bottom, $blue-bright, $blue-mild);
+            background: linear-gradient(to bottom, var(--xp-taskbar-color-1), var(--xp-taskbar-color-2));
             color: $white-overlay;
         }
     }
@@ -88,7 +88,7 @@
     bottom: -1px;
     left: calc(100vw - $panel-width);
     z-index: 0;
-    @include box.barGradient(false, $blue-bright, $blue-mild);
+    @include box.barGradient(false, var(--xp-taskbar-color-1), var(--xp-taskbar-color-2));
 
     &:hover {
         z-index: 2;
@@ -162,7 +162,7 @@
     .withTagAsButton-OsgQ9L:hover,
     .withTagless-10ooWt:hover,
     .button-12Fmur.enabled-9OeuTA:hover {
-        background: linear-gradient(to bottom, $blue-select, $blue-bright);
+        background: linear-gradient(to bottom, var(--xp-taskbar-color-3), var(--xp-taskbar-color-1));
     }
 
     .button-12Fmur.enabled-9OeuTA:hover {

diff --git a/scss/main/_threads.scss b/scss/main/_threads.scss
@@ -17,7 +17,7 @@
 }
 
 .resizeHandle-PBRzPC {
-    background: $blue-vivid;
+    background: var(--xp-window-color-2);
 }
 
 // Floating thread panel