From bccdbdba52d47a51c12c5cf77325f27498337afd Mon Sep 17 00:00:00 2001 From: Saltssaumure Date: Fri, 14 Jul 2023 23:01:59 +0100 Subject: [PATCH] Add more colour customisation options --- Exponent.theme.css | 44 ++++++++++++++--------- README.md | 69 +++++++++++++++++++++---------------- manifest.json | 2 +- package.json | 2 +- scss-compile.config.js | 2 +- scss/main/_taskbar.scss | 18 +++++----- scss/main/_threads.scss | 2 +- scss/top/_boxes.scss | 8 ++--- scss/top/_buttons.scss | 2 +- scss/top/_shortcutIcon.scss | 2 +- scss/top/_vars-css.scss | 20 ++++++++--- scss/top/_vars-scss.scss | 1 + 12 files changed, 103 insertions(+), 69 deletions(-) diff --git a/Exponent.theme.css b/Exponent.theme.css index 5e1493e..a86045f 100644 --- 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; } \ No newline at end of file diff --git a/README.md b/README.md index 3e36ed7..613a779 100644 --- 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,7 +14,7 @@ [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" @@ -21,14 +22,15 @@ [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 index 9f7439a..36f3701 100644 --- 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 index 015d3d1..b282efe 100644 --- 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 ", diff --git a/scss-compile.config.js b/scss-compile.config.js index 1cc207b..bf80f3e 100644 --- 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 index 07e8510..86ed7cf 100644 --- 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 index dbb8f07..9a24dc2 100644 --- 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 diff --git a/scss/top/_boxes.scss b/scss/top/_boxes.scss index 6ad4109..2e5b2b9 100644 --- a/scss/top/_boxes.scss +++ b/scss/top/_boxes.scss @@ -2,7 +2,7 @@ @use "shadows" as shd; @mixin windowBox($vertical-offset) { - border: 2px solid x.$blue-select; + border: 2px solid var(--xp-window-color-1); border-top: 0; box-shadow: 2px #{$vertical-offset} 3px 2px hsla(0, 0%, 0%, 0.4); } @@ -27,7 +27,7 @@ } @mixin windowTitle() { - @include barGradient(false, x.$blue-max, x.$blue-vivid); + @include barGradient(false, var(--xp-window-color-1), var(--xp-window-color-2)); border-radius: 8px 8px 0 0; height: x.$title-height; --font-display: Tahoma, sans-serif; @@ -56,7 +56,7 @@ } @mixin startMenuList() { - --background-modifier-selected: #{x.$blue-select}; + --background-modifier-selected: var(--xp-selected-color); --background-modifier-hover: var(--xp-hover-color); --channels-default: var(--xp-txt-color); --channel-icon: var(--xp-txt-color); @@ -69,7 +69,7 @@ font-family: var(--font-primary); background: var(--xp-bg-color); - border: 1px solid x.$blue-max; + border: 1px solid var(--xp-window-color-1); // orange stripe &::after { diff --git a/scss/top/_buttons.scss b/scss/top/_buttons.scss index d7b0980..5b70f2c 100644 --- a/scss/top/_buttons.scss +++ b/scss/top/_buttons.scss @@ -37,6 +37,6 @@ } @else { - background: radial-gradient(circle at 20% 20%, x.$white-overlay, x.$blue-vivid, x.$blue-max); + background: radial-gradient(circle at 20% 20%, x.$white-overlay, var(--xp-window-color-2), var(--xp-window-color-1)); } } \ No newline at end of file diff --git a/scss/top/_shortcutIcon.scss b/scss/top/_shortcutIcon.scss index f1bd7f0..431e1cb 100644 --- a/scss/top/_shortcutIcon.scss +++ b/scss/top/_shortcutIcon.scss @@ -8,7 +8,7 @@ justify-content: center; :is(#{$inner-element}) { - background: linear-gradient(rgb(12, 168, 12), green); + background: linear-gradient(var(--xp-shortcut-color-1), var(--xp-shortcut-color-2)); border-radius: 4px; padding: 5px; margin: 5px; diff --git a/scss/top/_vars-css.scss b/scss/top/_vars-css.scss index eaa5b37..89a81c2 100644 --- a/scss/top/_vars-css.scss +++ b/scss/top/_vars-css.scss @@ -7,11 +7,18 @@ /* Spacing between each server icon | DEFAULT: 10px */ --HSL-server-direction: column; /* Direct of the server list. | Options: column, column-reverse | DEFAULT: column */ -} -code, -.markup-eYLPri pre { - font-family: var(--font-code); + --xp-window-color-1: #{$blue-max}; + --xp-window-color-2: #{$blue-vivid}; + --xp-taskbar-color-1: #{$blue-bright}; + --xp-taskbar-color-2: #{$blue-mild}; + --xp-taskbar-color-3: #{$blue-select}; + --xp-start-color-1: #{$green-max}; + --xp-start-color-2: #{$green-bright}; + --xp-shortcut-color-1: #{$green-vivid}; + --xp-shortcut-color-2: #{$green-max}; + --xp-ping-color: #{$red-bright}; + --xp-selected-color: #{$blue-select}; } .theme-dark { @@ -36,4 +43,9 @@ code, --xp-set-color: #{$black-overlay}; --xp-hover-color: lightgrey; --xp-zing-color: orange; +} + +code, +.markup-eYLPri pre { + font-family: var(--font-code); } \ No newline at end of file diff --git a/scss/top/_vars-scss.scss b/scss/top/_vars-scss.scss index 27d5caf..a1ca8ba 100644 --- a/scss/top/_vars-scss.scss +++ b/scss/top/_vars-scss.scss @@ -27,6 +27,7 @@ $red-bright: rgb(230, 77, 28); $red-max: rgb(199, 50, 7); $green-bright: rgb(56, 196, 56); +$green-vivid: rgb(12, 168, 12); $green-max: green; $test-color: rgb(56, 57, 121);