diff --git a/NineX.theme.css b/NineX.theme.css index 93612e9..b01855a 100644 --- 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 index 8cdc1ad..438cf47 100644 --- 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 index fd07d04..d6653f5 100644 --- 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 index 74db78a..2d63f84 100644 --- 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 ", diff --git a/scss-compile.config.js b/scss-compile.config.js index 8e04941..894afec 100644 --- 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 index 75398e3..9efc80a 100644 --- 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 index ad1a6d7..bfc2a10 100644 --- 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 index 26fc08a..94f577e 100644 --- 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 index e995758..25f3f6e 100644 --- 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 new file mode 100644 index 0000000..ba0bd61 --- /dev/null +++ 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 b/scss/part/_css-vars.scss similarity index 96% rename from scss/top/_vars-css.scss rename to scss/part/_css-vars.scss index a742b34..26aa635 100644 --- a/scss/top/_vars-css.scss +++ b/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 new file mode 100644 index 0000000..27da86a --- /dev/null +++ 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; \ No newline at end of file diff --git a/scss/top/_vars-scss.scss b/scss/top/_vars-scss.scss index 1772507..0a9f8df 100644 --- 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 index fc631a2..0663e6f 100644 --- a/scss/w9x.scss +++ b/scss/w9x.scss @@ -1,5 +1,3 @@ -@use "top/vars-css"; - @use "main"; @use "overlay"; @use "part";