Skip to content

Commit

Permalink
deploy: fb87fd1
Browse files Browse the repository at this point in the history
  • Loading branch information
Saltssaumure committed May 26, 2024
1 parent 32a7871 commit 9c69ce2
Show file tree
Hide file tree
Showing 32 changed files with 381 additions and 370 deletions.
7 changes: 3 additions & 4 deletions Demonstration.theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* @authorLink https://github.com/Saltssaumure
* @description A Discord theme for demonstrating Discord themes.
* @license MIT
* @version 1.0
* @version 1.1
* @invite uy8nKQVatp
* @source https://github.com/MiniDiscordThemes/Demonstration
* @donate https://ko-fi.com/saltssaumure
Expand All @@ -16,13 +16,12 @@
:root {
--demo-font-variant: Circular;
--demo-font-emoji: Noto;
--demo-vencord-display: block;
--demo-text: censor;
--demo-clientmod: visible;
--demo-emoji-radius: 4px;
--demo-emoji-opacity: 0.5;
--demo-icon-hue: 240;
--demo-image-hue: 270;
--demo-banner-hue: 180;
--demo-self-hue: 300;
--demo-font-read: none;
--demo-font-code-read: none;
}
29 changes: 14 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,19 +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-vencord-display` | Hide or display Vencord elements | `block` or `none` | `block` |
| `--demo-emoji-radius` | Additional corner rounding for emojis | Any [length][css-length]. | `4px` |
| `--demo-emoji-opacity` | Opacity of 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`.
Expand All @@ -102,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-28 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
Expand All @@ -112,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-28 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
Expand Down
2 changes: 1 addition & 1 deletion demo.min.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"discordID": "134142022092062720",
"github": "Saltssaumure"
},
"version": "1.0.0",
"version": "1.1.0",
"updater": {
"type": "store",
"id": "net.saltssaumure.Demonstration"
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "demonstration-discord-theme",
"version": "1.0.0",
"version": "1.1.0",
"description": "A Discord theme for demonstrating Discord themes.",
"repository": "github:MiniDiscordThemes/Demonstration",
"author": "Saltssaumure <[email protected]>",
Expand Down
11 changes: 11 additions & 0 deletions scss/_funcs.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@use "sass:list";
@use "sass:string";

// Generate unquoted list of selectors from list
@function unquoteSelectors($selectors) {
$unquoted: ();
@each $selector in $selectors {
$unquoted: list.append($unquoted, string.unquote($selector), comma);
}
@return $unquoted;
}
15 changes: 12 additions & 3 deletions scss/_vars.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,16 @@ $gradient: linear-gradient($color 0 100%);
// );

// // Weird marble (nice)
// $gradient: radial-gradient(circle at 25% 25% in oklch longer hue, var(--demo-gradient-color), transparent),
// radial-gradient(circle at 75% 75% in oklch longer hue, transparent, hsl(from var(--demo-gradient-color) calc(h + 60) calc(s + 1) l)),
// hsl(from var(--demo-gradient-color) calc(h + 60) calc(s - 1) l);
// $gradient: radial-gradient(
// circle at 25% 25% in oklch longer hue,
// var(--demo-gradient-color),
// transparent
// ),
// radial-gradient(
// circle at 75% 75% in oklch longer hue,
// transparent,
// hsl(from var(--demo-gradient-color) calc(h + 60) calc(s + 1) l)
// ),
// hsl(from var(--demo-gradient-color) calc(h + 60) calc(s - 1) l)
// ;
// }
5 changes: 3 additions & 2 deletions scss/demo.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@forward "./part";
@forward "./override";
@forward "./main";
@forward "./mod";
@forward "./part";
@forward "./themesettings";
40 changes: 19 additions & 21 deletions scss/main/_emojipicker.scss
Original file line number Diff line number Diff line change
@@ -1,39 +1,37 @@
@use "../vars" as *;
@use "../mixins" as *;
@use "../funcs" as func;
@use "../vars" as var;
@use "../mixins" as mixin;

// Emoji picker

// Server icon
.guildIcon_ed1ab4 {
content: $gradient;
content: var.$gradient;
}

// Emoji, emoji, sticker
.emoji__92b46,
.image__43623,
.stickerAsset_ab864f {
content: $gradient;
@include addRoundedCorners;
@include addTransparency;
content: var.$gradient;
@include mixin.addRoundedCorners;
@include mixin.addTransparency;
object-fit: unset;
}

// Server list
.listItems__49027 > div {
@include genColors;
$_locations: (
// In server list
".listItems__49027 > div",
// In emoji grid
".emojiListRow__6d732 > li",
// In sticker grid
".row_b3c4f2"
);
:is(#{func.unquoteSelectors($_locations)}) {
@include mixin.genColors;
}

// Emoji grid
.emojiListRow__6d732 > li {
@include genColors;
}

// Sticker grid
.row_b3c4f2 {
@include genColors;
}

// Bottom bar current emoji info
// In bottom bar current emoji info
.inspector__80c84 {
@include genOneColor(var(--demo-icon-hue));
@include mixin.genOneColor(var(--demo-icon-hue));
}
23 changes: 9 additions & 14 deletions scss/main/_image.scss
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
@use "../vars" as *;
@use "../mixins" as *;
@use "../vars" as var;
@use "../mixins" as mixin;

// Uploaded images
// Attachment images

// Images and videos in chat
.loadingOverlay__35a04 {
@include genOneColor(var(--demo-image-hue));
@include mixin.genOneColor(var(--demo-image-hue));
&::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: $gradient;
background: var.$gradient;
position: absolute;
z-index: 1;
}
}

// Before upload attachment preview
.upload_c98ecb {
@include genColors(4);
@include mixin.genColors(4);
.mediaContainer_e3d4b8 {
background: $gradient;
background: var.$gradient;
height: 100%;
.media__47d7e {
display: none;
Expand All @@ -31,11 +31,6 @@

// Edit attachment details modal
.expandable__6a921 .icon__4bc4d {
@include genOneColor(var(--demo-image-hue));
content: $gradient;
}

// Profile banner
.banner__6d414 {
background-image: none !important;
@include mixin.genOneColor(var(--demo-image-hue));
content: var.$gradient;
}
37 changes: 23 additions & 14 deletions scss/main/_misc.scss
Original file line number Diff line number Diff line change
@@ -1,38 +1,47 @@
@use "../vars" as *;
@use "../mixins" as *;
@use "../vars" as var;
@use "../mixins" as mixin;

// Stuff I'm not sure where to put yet
// Misc content

// Profile banner
.banner__6d414 {
background-image: none !important;
}

// Server banner
.bannerImg_fe5c1b {
@include genOneColor(var(--demo-banner-hue));
content: $gradient;
@include mixin.genOneColor(var(--demo-banner-hue));
content: var.$gradient;
}

// Emoji, role icon, clan badge
.emoji,
.roleIcon__92480,
.badge_d12073 {
@include genOneColor(var(--demo-icon-hue));
content: $gradient;
@include addRoundedCorners;
@include addTransparency;
@include mixin.genOneColor(var(--demo-icon-hue));
content: var.$gradient;
@include mixin.addRoundedCorners;
@include mixin.addTransparency;
aspect-ratio: 1 / 1;
object-fit: unset;
}

// Activity icon
.assetsLargeImage__57902,
.assetsSmallImage__4c2f1,
.gameIcon_f19d1f {
@include genOneColor(var(--demo-icon-hue));
content: $gradient;
.largeImage_afc95a,
.smallImage__5c837,
.gameIcon_f19d1f,
.headerIcon__8b290,
.multipleIconWrapper__8dd58 {
@include mixin.genOneColor(var(--demo-icon-hue));
content: var.$gradient;
}

// Authorised apps
.authedApp__71a52 {
@include genColors;
@include mixin.genColors;
.appAvatar__1fa87 {
content: $gradient;
content: var.$gradient;
}
}
43 changes: 22 additions & 21 deletions scss/main/_server.scss
Original file line number Diff line number Diff line change
@@ -1,43 +1,44 @@
@use "../vars" as *;
@use "../mixins" as *;
@use "../funcs" as func;
@use "../vars" as var;
@use "../mixins" as mixin;

// Server icon

// Full size server and active DM user
.listItem__48528:not(.tutorialContainer_b06ae6 .listItem__48528) {
@include genColors;
@include mixin.genColors;
.icon__11cf1 {
content: $gradient;
content: var.$gradient;
}
}

// Mini server icons
.icon__94164 {
background: $gradient !important;
background: var.$gradient !important;
}

// In inbox unreads
.recentMentionsPopout__40c54 .scroller_e3927b > [style="opacity: 1; height: auto;"] {
@include mixin.genColors;
}

// In collapsed folder
.guildIcon_b6bfa7 {
@include genColors(4);
@include mixin.genColors(4);
}

// In profile popout mutual servers
.avatar__611fe,
.memberSince__2eba7 {
@include genColors(3);
$_locations: (
// In profile popout mutual servers
".avatar__611fe",
".memberSince__2eba7",
// In settings boost tab
".guildContainer_fef06f"
);
:is(#{func.unquoteSelectors($_locations)}) {
@include mixin.genColors(3);
}

// In profile popout server-specific about me
.aboutMeGuildIcon_b141fb {
@include genOneColor(var(--demo-icon-hue));
}

// In inbox unreads
.recentMentionsPopout__40c54 .scroller_e3927b > [style="opacity: 1; height: auto;"] {
@include genColors;
}

// In settings boost tab
.guildContainer_fef06f {
@include genColors(3);
@include mixin.genOneColor(var(--demo-icon-hue));
}
Loading

0 comments on commit 9c69ce2

Please sign in to comment.