Unify client mod toggle

MiniDiscordThemes · May 26, 2024 · d996b54 · d996b54
1 parent 5bb5afd
commit d996b54
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 35 deletions.
diff --git a/Demonstration.theme.css b/Demonstration.theme.css
@@ -17,9 +17,7 @@
     --demo-font-variant:    Circular;
     --demo-font-emoji:      Noto;
     --demo-text:            censor;
-    --demo-betterdiscord:   visible;
-    --demo-replugged:       visible;
-    --demo-vencord:         visible;
+    --demo-clientmod:       visible;
     --demo-emoji-radius:    4px;
     --demo-emoji-opacity:   0.5;
     --demo-icon-hue:        240;

diff --git a/README.md b/README.md
@@ -80,21 +80,18 @@
 
 ## Customisation
 
-| Variable                | Description                           | Valid values                       | Default value |
-| ----------------------- | ------------------------------------- | ---------------------------------- | ------------- |
-| `--demo-font-variant`   | Censored font style                   | `Circular` or `Rounded` or `Block` | `Circular`    |
-| `--demo-font-emoji`     | Emoji font style                      | `Noto` or `none`                   | `Noto`        |
-| `--demo-betterdiscord`  | Show or hide BetterDiscord elements   | `visible` or `hidden`              | `visible`     |
-| `--demo-replugged`      | Show or hide Replugged elements       | `visible` or `hidden`              | `visible`     |
-| `--demo-vencord`        | Show or hide Vencord elements         | `visible` or `hidden`              | `visible`     |
-| `--demo-emoji-radius`   | Additional corner rounding for emojis | Any [length][css-length].          | `4px`         |
-| `--demo-emoji-opacity`  | Opacity for emojis                    | `0` to `1`.                        | `0.5`         |
-| `--demo-icon-hue`       | Hue for icons, emojis, badges         | `0` to `360`.                      | `240`         |
-| `--demo-image-hue`      | Hue for image attachments             | `0` to `360`.                      | `270`         |
-| `--demo-banner-hue`     | Hue for server banners                | `0` to `360`.                      | `180`         |
-| `--demo-self-hue`       | Hue for your own avatar               | `0` to `360`.                      | `300`         |
-| `--demo-font-read`      | Uncensored font                       | Any installed font.                | `none`        |
-| `--demo-font-code-read` | Uncensored code font                  | Any installed font.                | `none`        |
+| Variable               | Description                           | Valid values                       | Default value |
+| ---------------------- | ------------------------------------- | ---------------------------------- | ------------- |
+| `--demo-font-variant`  | Censored font style                   | `Circular` or `Rounded` or `Block` | `Circular`    |
+| `--demo-font-emoji`    | Emoji font style                      | `Noto` or `none`                   | `Noto`        |
+| `--demo-text`          | Show or censor text                   | `normal` or `censor`               | `censor`      |
+| `--demo-clientmod`     | Show or hide client mod elements      | `visible` or `hidden`              | `visible`     |
+| `--demo-emoji-radius`  | Additional corner rounding for emojis | Any [length][css-length].          | `4px`         |
+| `--demo-emoji-opacity` | Opacity for emojis                    | `0` to `1`.                        | `0.5`         |
+| `--demo-icon-hue`      | Hue for icons, emojis, badges         | `0` to `360`.                      | `240`         |
+| `--demo-image-hue`     | Hue for image attachments             | `0` to `360`.                      | `270`         |
+| `--demo-banner-hue`    | Hue for server banners                | `0` to `360`.                      | `180`         |
+| `--demo-self-hue`      | Hue for your own avatar               | `0` to `360`.                      | `300`         |
 
 ### BetterDiscord
 1. Open `Settings` > `BetterDiscord` > `Themes`.
@@ -104,7 +101,7 @@
 ### Replugged
 1. Enable `Automatically Apply Quick CSS` in `Settings` > `Replugged` > `General`.
 2. Open `Settings` > `Replugged` > `Quick CSS`.
-3. Copy and paste lines 15-30 of [`Demonstration.theme.css`][.theme.css].
+3. Copy and paste lines 15-27 of [`Demonstration.theme.css`][.theme.css].
 4. Edit the variable values and save.
 
 ### Vencord
@@ -114,7 +111,7 @@
 3. Edit the variable values and save.
 #### Online
 1. `Enable Custom CSS` in `Settings` > `Vencord` > `Vencord` and click `Open QuickCSS File`.
-2. Copy and paste lines 15-30 of [`Demonstration.theme.css`][.theme.css].
+2. Copy and paste lines 15-27 of [`Demonstration.theme.css`][.theme.css].
 3. Edit the variable values.
 
 ## License

diff --git a/scss/mod/_BetterDiscord.scss b/scss/mod/_BetterDiscord.scss
@@ -1,4 +1,4 @@
-// Hide BetterDiscord elements if user sets --demo-betterdiscord to hidden
+// Hide BetterDiscord elements if user sets --demo-clientmod to hidden
 
-@container demo-betterdiscord style(--demo-betterdiscord: hidden) {
+@container demo-clientmod style(--demo-clientmod: hidden) {
 }
diff --git a/scss/mod/_Replugged.scss b/scss/mod/_Replugged.scss
@@ -1,4 +1,4 @@
-// Hide Replugged elements if user sets --demo-replugged to hidden
+// Hide Replugged elements if user sets --demo-clientmod to hidden
 
-@container demo-replugged style(--demo-replugged: hidden) {
+@container demo-clientmod style(--demo-clientmod: hidden) {
 }
diff --git a/scss/mod/_Vencord.scss b/scss/mod/_Vencord.scss
@@ -1,6 +1,6 @@
 // Hide Vencord elements if user sets --demo-vencord to hidden
 
-@container demo-vencord style(--demo-vencord: hidden) {
+@container demo-clientmod style(--demo-clientmod: hidden) {
     // Hide Vencord Toolbox
     .vc-toolbox-btn {
         display: none;

diff --git a/scss/themesettings/_container.scss b/scss/themesettings/_container.scss
@@ -1,4 +1,4 @@
 // Containers for showing or hiding client mod elements and text
 :root {
-    container: demo-betterdiscord demo-replugged demo-vencord demo-text;
+    container: demo-clientmod demo-text;
 }
diff --git a/scss/themesettings/_mod.scss b/scss/themesettings/_mod.scss
@@ -1,12 +1,7 @@
 // Show or hide client mod elements based on user settings
 // Default to visible unless user sets to hidden
-
-$_mods: betterdiscord, replugged, vencord;
-
-@each $_mod in $_mods {
-    @property --demo-#{$_mod} {
-        syntax: "visible | hidden";
-        inherits: false;
-        initial-value: visible;
-    }
+@property --demo-clientmod {
+    syntax: "visible | hidden";
+    inherits: false;
+    initial-value: visible;
 }