Skip to content

Discord+ 2.1

Compare
Choose a tag to compare
@PlusInsta PlusInsta released this 14 May 07:04
· 712 commits to master since this release

This release is a big one. For once, I focused primarily on adding a bunch of new features, and bringing the dark and light theme closer in terms of functionality. There aren't going to be a lot of screenshots, so let's get right to it.

Additions

3ff01ac: New dynamic settings page

This is probably one of the biggest changes done to the theme in this update.
The Settings page now follows rule #2.

dark_dream_settings
light_dream_settings

Note: you might want to increase the zoom on ridiculously large-DPI screens.

5d20a45: Add settings sidebar buttons

The sidebar buttons now have smooth animations as you hover and click them.

8e7dd3c: Add animation for switching between themes

I always talk "added to light theme" and "fixed in the dark theme" and "broken across all themes to the point where I'm no longer able to fix it", but have you ever actually tried to switch themes at any point? If so, you'd notice it's a really sudden effect. Thankfully, CSS is a genius tool that allows us to do some really cool stuff.
Noticeably, clicking another theme will trigger a transition between dark and light.

19b1521: Add tooltips

Not much of a difference is made here, primarily because there's no way for me to check whether or not you're using the light theme. At least the background is more semi-transparent now.

aeb89b5: Add attachments

Now the files you upload, including audio and video, are round, transparent, and accent-colored!

7fb1335: Fix server settings for light theme

Because I'm stupid, only the dark theme was themed. Now the light theme can enjoy some rounded-accentcolored-transparented-goodness too.

c797514: [Light] Add changelog modal

You can barely tell, but yes, the changelog modal is now semi-transparent in the light theme.

42b842a: Add audit log

Not much to say. The audit log is now themed.

cbe698e: Add Settings textboxes

I feel like I'm running out of big changes to talk about. Uhh, textbox colored.

c270211: Finish implementing roundness in server settings

This is a continuation of the previous commits related to the server settings. This adds the emoji/members backgrounds and a few other things to the list of accent-colored, rounded, semi-transparent surfaces.

bbc3026: Introducing new buttons

Tired of seeing that ugly shade of Discord-branded blue when you hover over the buttons, instead of your accent color? Now it's the other way around: the buttons are dark/light, and when you hover over them, you see your accent color! No more Discord-branded blue!

7e16b71: Rewrite channels for compatibility

This is possibly the longest time I've spent on fixing something.

I'm going to start by breaking down the problems:
Dark theme had no animations.
Light theme had some areas broken.
Dark theme had a lot of inconsistencies with the light theme, and vice versa.

My solution? Rewrite the damn thing.
I spent a while hunting for values, finding out what's the most efficient solution for both themes. I also finally fixed the light theme channel icons, the dark theme animations (or the lack thereof), compatibility with every channel type, and probably more things.

Most people aren't going to see a noticeable difference, but it's subtle enough to be good. I hope.

d0e5955: Add "Upload image" button

The "Upload image" buttons throughout Settings now look like the rest of the website's buttons.

bc00a93: Add avatar uploader

Due to me never changing my profile picture (except I do, almost every day), I never noticed the "upload avatar" icon not being rounded like the other avatars. That's a thing of the past though; it now follows the almighty var(--roundness) variable.

707a0a5: Add half-baked video support

First, it was the images in the chat. Now, it's the videos in your chat too. They're both round now.

"What do you mean by half-baked?" Oh, nothing. Just that there's an insanely annoying Discord Nitro iframe'd video in the Settings that I can't theme. That's all.

a4516bc: [Light] Minor improvements to profile popouts

I noticed there was an awfully bad contrast between the notes and the profile popout background. I checked the code; I never actually added separate code for the light theme. Instead, I just hacked off of the dark theme. I decided to stop being lazy and actually write out a second set of rules for the light theme, and the popouts now look cool and good. 😎

73fa06f: Add questionmark

This is minor and you won't even see if it you have Nitro, but the "Discord Nitro feature" questionmark, mainly seen in your account settings, is now round.

13d12d1: Add many things in Settings

I'm pretty sure almost all of Settings is now round.

fc3cee8: [Light] Add server categories

Like with channels, categories now have smooth transitions, as well as legible text in the light theme.

68a64eb: Add server member background

The background of hovered server members was grey.
I spent a couple minutes hacking something together, and now it's round-transparent-ish.

Known issues

HTML iframe videos aren't themed

Thanks to the Discord Nitro video in settings being the ONLY video on the goddamn website that uses an iframe, I can't make it round after you click on it. I've tried everything from advanced selectors to class names, and nothing makes it any better. This issue isn't really on me, it's on the Custom CSS for not supporting iframe styles.

It's not like anyone would watch that video anyway...right?

Changes

0ff2221: Better fix for DevilBro's notices

Previously, I'd just thrown a .flexChild-faoVW3 > div > div to brute-force a property onto .DevilBro-notice. This fixed the fact that the normal border-radius used !important. Little did I know, I actually affected several areas in Settings with the margin I set, unnecessarily. Now only the roundness (which is the only one that actually needs !important anyway) is in .flexChild-faoVW3 > div > div, and the rest is applied directly to .DevilBro-notice.

afff43e: Fix colors for BD switches

Not a bug as much as a fatal consequence of my stupidity. I tried splitting this across lines, which obviously does not work.
The selectors are now in the same line, and BetterDiscord switches are all purple when selected.

863fd5d: Cleanup code

A huge cleanup of the Channels code, left over from 7e16b71. Notably, I removed every unnecessary line of code, and re-organized the lines so that they made sense.
Also, I moved one line that was from "friends list" to "channels".

73193c4: Remove obsolete code

Ah, yes. Don't you just love it when Discord changes perfectly valid class names like .channel-members to .members-1998pB? Well, I DON'T. I poked around for some seconds before realizing this code was obsolete. Just to make sure, I tested it. The lines are ancient leftovers from very early versions of the theme, and when applied to the newest version, do not look good at all. Needless to say, it had to go.

482ad48: Fix BetterDiscord top buttons not being clickable

Ah yes, all changes come with a price. That major settings overhaul I did came with a change to the padding. This padding, however, made the javascript-powered BetterDiscord buttons unclickable. I checked the minimum padding I could have where the buttons were still functional, and it was 45px. It's a huge step down from 20px (which is the usual padding I use), but it's still better than the whopping 60 pixels that Discord likes to use.