A sleek, customizable Discord theme.
Bot releases are visible (Hide)
Published by PlusInsta almost 2 years ago
Changed domain back. Running GitHub Pages on a custom domain isn't as cool as I thought it would be.
Published by PlusInsta about 2 years ago
Published by PlusInsta over 3 years ago
Published by PlusInsta over 3 years ago
:root
so GooseMod can recognize them as separate variables.Published by PlusInsta over 3 years ago
64px
so it looks sharperPublished by PlusInsta over 3 years ago
Published by PlusInsta over 3 years ago
I had an epiphany and worked for several long hours to implement things I've wanted to add for a long time.
Variables added include spacing, background covers for each type of element, and the ability to change the size of avatars and server icons. Some other stuff is in there too.
Published by PlusInsta almost 4 years ago
• Rewrote some things
• Changed spacing so it looks better with Notepad and Notepad++
• Added blur scale variable (in percent. 100 is default, set to 0 to disable)
• Commented the bg variables so they don't mess with our defaults
Published by PlusInsta about 4 years ago
Customizing CSS is hard, and my unclear instructions certainly didn't help the problem.
In fact, I screwed up so hard, some of you didn't even know how to open the theme file!
That's why, with this release, I'm making the theme as user-friendly as I possibly can. I've included several detailed help texts in the file, to ensure you can make the theme look just the way you want it!
Variables have been simplified and streamlined, two variables were added to let you customize the avatar and server icon roundness (meaning that I can finally close https://github.com/PlusInsta/discord-plus/issues/34!), and much of the code loads faster than ever, since, well, much of the pointless code I had lying around is gone.
This release now pulls the theme from GitHub Pages! For years, I thought you couldn't pull CSS from GitHub. Then I realized… GitHub isn't a hosting site. So I put the theme file in my GitHub Pages that I already have built, and now Discord can load from it just fine.
This means faster load times, and my updated code gets delivered to you almost instantly!
Published by PlusInsta over 4 years ago
If you already have the theme downloaded from the website, you can ignore this.
Published by PlusInsta about 5 years ago
This is the latest release of the theme, intended to fix #21, #22, and #23, as well as make the theme more user-friendly.
Among the things changed since the previous release, the user variables have better names (and are prefixed with --dplus
to avoid conflicting with other themes), the default accent color was simplified from RGB to an easy-to-remember hex value, you can adjust the color and opacity of the element backdrops, and the CSS file itself contains comments about what each variable does.
Please note that the original release of this theme file was broken. It pointed to the beta branch instead of master. The updated release is identified as v2.3.0
instead of v2.3
.
Published by PlusInsta over 5 years ago
The file below used to load the latest version of the theme from the master
branch, so you could receive updates seamlessly. This allowed me support the theme faster, since I didn't have to worry about making new releases all the time. Because of the changed variable names, this release is now obsolete.
Published by PlusInsta about 6 years ago
Discord made another surprise update overnight. We all know what that means, right?
Yep. It's hotfix time.
Changelog:
Known issues:
Published by PlusInsta over 6 years ago
Discord has launched a brand new tab in what used to be the "Friends" section, and rebranded said section to Home! Give a warm welcome to the Games tab!
This release adds the Games tab to the list of themed areas, and fixes a bug with the calling UI.
NOTE: As of release, there's a bug with the carousel mode of the news section. If your window is small enough horizontally to trigger the carousel, you'll notice that sliding to any other news article breaks the roundness. This is not my fault, it's Discord's. To prevent this from happening, make your window at least 720p in size, or zoom the page out.
Published by PlusInsta over 6 years ago
The problem:
System messages, such as calling and pinning, were completely broken.
This release is otherwise identical to v2.1.2.
Published by PlusInsta over 6 years ago
I wasn't actually going to make this release, but GOD DAMN WHAT IS THIS
This mysterious margin change happened overnight, for absolutely no reason at all. What the hell, Discord???
The Facebook notice that nags you to add your friends is now round.
Remember when I removed channel notices altogether? Well, I decided to stop being lazy and just theme them.
The Friends list now has the same animations and transparency as regular guilds!
Does what you think it does. The button animations now work in the settings too.
So yeah, the entire reason this update exists. I took the liberty of fixing what Discord fucked up. And yes, one of the commits fixes your friends being one pixel off. Exactly one pixel.
Was this really necessary, guys? For real? One PIXEL?
The font selector no longer forces the font onto every single element on the page. This has a meaningful impact on performance, and also prevents the BetterDiscord Custom CSS box from breaking.
Due to a horrendous oversight, box shadows weren't actually being removed where I wanted them to. Oops.
Removes an ugly border beneath certain tabs.
Published by PlusInsta over 6 years ago
Because The Last Update Just Wasn't Polished Enough™
The plugin and theme lists now look better.
The loading page is now 100% Discord+ Certified™.
Notably, the attribution text is gone, and the "Tweet us" and "Status" texts are gone too in favor of minimalism. I also removed the annoying Uppercase text filter.
Just like the Channel code and Settings code before it, the Friends list has been redone from the ground up to improve your experience. Animated backgrounds galore, and I even themed the "Friends" tab! Long story short, it looked odd if you unhovered it, so I made a workaround: animated padding.
Here's a before and after comparison for the light theme:
The Quick Switcher notices and the "Add friends to the server" notices are both hidden. Any future notices will be gone too. Yay, minimalism!
EDIT: Instead of being lazy and remove them, future releases are going to actually theme these things, starting with commit fd154c0.
Man am I good at leaving oversights in my theme. The bar at the top of the chat is round again now.
I somehow forgot to add roundness to the dark version of the friends list when polishing up the friends list code. That has now been fixed.
The theme credits should now fit in with the BetterDiscord ones.
By accident, I called a property "text-size" and not "font-size", resulting in everything but "Connecting" becoming hidden. Whoops.
Because of my lackluster testing, I never actually tried changing the border-radius to 0px. When I did, however, I discovered the scrollbar stayed round. Now it won't be.
Does what it says. The changelog video, changelog modal and switches are now border-radius'd like they should be.
Published by PlusInsta over 6 years ago
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.
This is probably one of the biggest changes done to the theme in this update.
The Settings page now follows rule #2.
Note: you might want to increase the zoom on ridiculously large-DPI screens.
The sidebar buttons now have smooth animations as you hover and click them.
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.
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.
Now the files you upload, including audio and video, are round, transparent, and accent-colored!
Because I'm stupid, only the dark theme was themed. Now the light theme can enjoy some rounded-accentcolored-transparented-goodness too.
You can barely tell, but yes, the changelog modal is now semi-transparent in the light theme.
Not much to say. The audit log is now themed.
I feel like I'm running out of big changes to talk about. Uhh, textbox colored.
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.
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!
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.
The "Upload image" buttons throughout Settings now look like the rest of the website's buttons.
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.
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.
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. 😎
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.
I'm pretty sure almost all of Settings is now round.
Like with channels, categories now have smooth transitions, as well as legible text in the light theme.
The background of hovered server members was grey.
I spent a couple minutes hacking something together, and now it's round-transparent-ish.
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?
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
.
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.
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".
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.
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.
Published by PlusInsta over 6 years ago
This update brings with it a few improvements, as well as more compatibility outside of Windows.
Disclaimer:
The screenshots taken for this release were taken at different times.
I cannot guarantee that every screenshot matches the final product.
Ever popped up someone's profile and noticed the icon of the game they're playing isn't round?
Well, fear no more! You can now see your own roundness value applied to those icons.
BetterDiscord notices are not only colored with your accent color now, they're also squeezed in-between the titlebar and main content.
BetterDiscord's own plugin notice isn't the only one that was added; if you have PluginRepo, you'll be seeing a sleeker bar too.
To celebrate BandagedBD working again, I finished theming the window buttons.
In case you wanted a before-and-after, well...
Here's the blind edit I made previously.
And here's the fix I did.
Thanks to the way Discord implemented Apple's window buttons, the buttons can be "integrated" with the scrollbar, which matches the theme's look and feel. GG, Apple!
The BetterDiscord Custom CSS box is now var(--roundness)
just like the rest of @import url(DiscordPlus.theme.css)
! I can't wait to #bd-customcss-editor:active
!
Note: #6
Although this commit mainly fixed a bug that involved odd corners in the dark theme settings, this commit also colored the checkboxes you find around Discord.
I hope you're ready to have a bad time.
macOS doesn't like TrueType fonts at all.
Although I set up Apple's beautiful San Francisco Display as a fallback font, I'd prefer one consistent look across platforms.
You'll have to manually add Product Sans to your Font Book if you want to use Google's *cough* proprietary, unlicensed font. More on that later.
This commit, done by @intrnl, fixes the last remaining class names.
In English, that means "everything which was once broken is now fixed."
Thanks!
I don't feel this is GIF-worthy, but instead of pinned messages being greyscale until hovered over, the borders light up when hovered. This unnecessary effect always felt weird to me, so it was about time I got rid of it.
Due to an oversight, I accidentally made "Jump" in pinned messages use the transparency value. The text is now white, like the X button.
This was done because certain surfaces looked odd unless the accent color was solid.
I'll look into making the accent color's backgrounds semi-transparent through another method.
Minor padding change along with the above commit leads to a better-looking scrollbar.
This affects the titlebar on Windows.
Essentially, I changed pixels and percentages to the W3C-recommended "view-width" and "view-height" units. The titlebar looks exactly the same, and the difference is less than a pixel. If you have a 4K display, you might notice a marginal difference, but other than that nothing really changed. I guess if you have a mod that lets you downsize the window below the minimum size, you'll notice the titlebar no longer protrudes the main content.
A pointless change for now, but a necessary one to ensure forwards-compatibility.
Another not-immediately-noticeable change, but the theme and page now both use Product Sans.
Uh, by that I mean it now uses Google's official font API to deliver Product Sans.
What this means for the end user is nothing, if not for better loading times.
This also reduces bandwidth to the repository, though honestly, I don't expect to reach the gigabyte limit this early.
Yes, I realize the stylesheet Google sends back says it's not licensed. No, that didn't stop people from publishing their paid apps on Google's Play Store, or modifying Android to use their unlicensed font.
Published by PlusInsta over 6 years ago
This update brings with it lots of small changes, most of which are thanks to Discord having broken everything last week.
First, let's talk about the Windows titlebar.
The logo now looks 300% more radical with that extra plus. Not much was changed besides that.
Speaking of titlebars,
Now, like I said, everything broke after 0.0.301 came out. And by that I mean BetterDiscord will not work on macOS anymore. Despite this, I got ahold of the macOS window buttons div, and made some quick mods.
Once BetterDiscord works again, your Mac window buttons shouldn't look out of place with the theme.
For obvious reasons, I can't provide a screenshot.
EDIT (5/6/2018):
This "fix" actually looks abysmal.
I highly recommend you use v2.0.3 or higher if you're on macOS.
Now, for the fixes:
If your Internet connection suddenly drops out while posting a meme, you won't be staring at a grey wall anymore.
If you previously couldn't see Product Sans, it's because I messed up the links.
It should work now, even if you don't have Product Sans installed.
You probably never pay attention to this box, but that doesn't stop me from painting it.
The upload modal now has your accent color, both before and after releasing the mouse button.
And lastly:
No more big ugly grey boxes in Settings.
That goes for both the dropdowns and the emoji section.
Unrelated to the theme itself, this repository now has a GitHub Pages page.
You can check it out here.