refact0r/midnight-discord

A dark, rounded discord theme.

https://refact0r.dev

midnight-discord's Issues

yeah so right, found an div where theres no rounded corners

view server as role popup

It currently got cut out when using the theme
Vanilla:

Midnight:

The css class is viewAsRolesWarning__4bb09 (idk about discord theming, but I assume the last 5 letter is added by react?)

Glowing

The "New Message" bar, mention "strip", and so are the dots to the left of the servers to indicate if you're on the server are glowing. If it was intentional, is there a way to remove it? Note: I did customize colors

dm scrollbar background

Hi refact0r,

Thanks for a wonderful theme. I recently installed it however I am facing some alignment issues with the theme. The chat bubble as shown below on the right side is misaligned. I have tried to mark it to give it better visibility. The blue outline shows the misalignment and the red line on the left shows it perfectly aligned.

I have not changed any configurations given in the file and it seems to be case with the main theme alignment.

Images got cut off

what it should look like

you can see the top part got cut off (I'm using Stylus extension)

Colour does not apply correctly to online icon in options

in the profile options it looks like this

but renders correctly everywhere else (using the css shown below)
--online-indicator: #23a55a;

UI on private call is not well designed

When you're in a private voice call, the theme design is buggy. Here is how it is (image edited to hide content):

Here is how expected (an idea):

message search looks good in servers but bad in dms due to extra "show user profile" button

also looks bad with vencord toolbox button.

Overview of broken theme elements after rehash.

Instead of creating 12 new issues, I will create a single one with some issues and inconsistencies as to not spam you full of tickets. Screenshots attached obviously so you'll have a broad idea of the issues.

1. The server list now has a very unfitting and ugly bar.
   

2. Color overwrite only applies when hovering.
   

3. Color overwrite no longer applied to folders.
   

4. Color overwrite no longer applies to create + find server button.
   

5. Color overwrite no longer applies to the add friend button.
   

6. Color overwrite no longer applies to online status.
   

7. Color overwrite no longer applies to "Voice Connected"
   

8. Default theming clashes with midnight theme when deleting a message, making the date unreadable.
   

9. Text color applies to "start an activity" button. Horrible contrast, makes it unreadable.
   

10. Old bordering bug in fullscreen mode when calling returned.
    

11. Join Voice button no longer color overwritten (not sure if that was the case before the rehash either but it's just something I noticed)
    

12. Delete button is color overwritten, but only when you're not hovering. Hover over it and it will become red.
    
    

13. Scroll wheel is missing in the menu.
    

Rounding and top bar

Rounding missing, server and DMs top message search bar broken, very weird

Weird User Profule

should be lighter where the buttons are

Midnight theme buggin

Midnight theme is broken, colors aren't where they are supposed to be

Music Player

Hi :)

Could you say me, how I can get this music player into my Discord?

Discord UI Updates

I don't know what they're updating, but I noticed some thing breaks, like the midnight icon, the member list color, etc.
For example midnight icon, the react random class is changed. From childWrapper__01b9c to childWrapper_a6ce15

Not an issue

More of an appreciation

Thanks for continuously updating this throughout Discords infinite changes! (I am on Canary)

By far my favourite theme!

Billing isn't themed.

The smallest issue I found yet that has basically no relevance, but I thought I'd let you know anyway.

Online Indicator color Issue

The online indicator is colored red instead of green. I did edit the CSS to change color of pings and unread back to red from blue.

/* color of unread dividers and some indicators */
	--accent-2: hsl(0, 100%, 65%);

The above accent was the only one changed, is there a way to keep the online indicators green and pings and such red?

Embeds not showing embed color on the side

A Discord update probably broke something with embed colors

With current version of midnight (1.4.0)

Without midnight theme

Weird backgroud because of the role="tablist"

Reply alignment issue

First of all thank you for making this wonderful theme, I found an issue with the alignment after I screwed around with the colors a bit..

I was wondering if this was just me or if this is a bug, but when someone replies to me, those replies seem to be moved a little to the right. this issue is only on the left side of the message, the right is perfectly aligned. Thank you in advance

New moon in-app icon cuts out Nitro in-app icons.

theme doesnt apply in "Channels & Roles" menu background in community servers

Unstabble CPU Usage

when aplying this themes, after that when write something on chat bar, sudenly my cpu usage raising into 30-50% sometimes into 80-90% make my discord lagging so hard, while i am take off the themes, the problem is gone. (look at bottom right, at electric emote, thats cpu usage)

Accent colour does not apply to mentions and channel links properly

I copied the default midnight.theme.css and set all accent colours to red to make this more obvious
It looks like this when not hovered

But applies correctly when hovered

Message bar transparency

message bar is partially transparent seemingly only when you don't have permissions

Theme no longer applies correctly.

Built config changed for better optimization. Theme no longer applies correctly tho.

Rounded corner mask incorrectly applied and crops full size images

Top part of full size images gets cropped off, rounded corner is only applied to the top of the image (I don't know if it should be applied at all while viewing full size images). See picture for example, original image in the background where the missing top part is visible.

midnight.theme.css - commit f4022d0

theme color no longer changes

Yesterday everything was fine, I had a pink discord theme. I went in this morning and the color does not change anymore, it remains blue even after changing the color directly in the code

Incorrect margins in fullscreen voice channel

New Discord update has gotten rid of roundness

Opened up Discord this morning to see the theme has lost its roundness in multiple areas across the app (members list, friends list, DMs, channel shadows, etc). Could be the result of a Discord client update, tested on both Stable and Canary clients with the same results.

"Explore discoverable servers" button when adding friends is unthemed.

Another small issue of something that isn't themed. Hopefully, I don't appear as if I'm nitpicking (although I am a little).

Make theme compatible with "Horizontal Server List" theme

Horizontal Server List is a great plugin that changes the server list position on Discord. It would be great if the Midnight theme is compatible with it.

This is how it looks like with with Horizontal Server List enabled (image edited to censor content):

uncolored theme object

the NEW indicator on new discord forum posts seems to not be colored by the theme (using the vencord theme) so it looks a bit out of place

other than that the theme is awesome, i love it

[Suggestion] About rounded corner

is it just me or the element seems too close to the border when we round it. So can we make the gap a bit farther away by adding some padding (if the box-sizing is content-box)
example:
Change Decoration Popup (Setting > Profile)

Corners no longer round

Corners no longer rounded on the channel list section

Embed borders are distracting

Recently, a change was made to give embeds a pixel border. However, the UI design clashes with the rest of the theme in the following ways:

• The pixel border is too bright, which harshly contrasts with the background. It is very distracting!
  • A YouTube embed now looks much more alarming than it should, because of the bright red embed color that envelops the embedded content. This also makes it harder to focus on the thumbnail, or the content within the embed.
  • A plain blue link embed invokes the feeling of the embed itself having been "selected", in a way.
  • However, plain embeds (with no color) look beautiful as they are. But that's because there is no distracting color surrounding the embed in the first place.

I see what you were going for by making this change, but I think it needs some work. Is there a way you could make only the top of the embed red, or maybe the left side, but still make it look elegant?

What if you messed around with rounded corners? My idea would be, make the top of the embed colored, but keep the top corners sharp, and the bottom ones round.

Compare this to the default theme:

EDIT: Whoops, haha, sorry about that old issue title. I still think it's a good start.

member list gradient thing bug

the black gradient at the bottom of members list scrolls with the list instead of staying locked to the bottom

Color change for the status indicators

the status indicator (Online, Idle...etc) colors for catppuccin (mocha mauve) are a bit pale and hurt the eye in a way,
would be much better if the colors were a bit more vibrant, it would still match the theme still, even better in my opinion
and thank you <3

Mod View Red Text?

If you go to Mod View and then clicking on the Mod Permissions the text would be in full red?

Vanilla:

Midnight:

I found 2 classes,
the first is permissionItemHeader__327be > permissionTitle_ffc8c2 > text-xs-normal__56c35 (--header-muted by default)
the second is permissionItemDescription__284c1 > text-sm-normal_e612c7 (--text-secondary by default)

Idk why you set most of the variable to red in the css file
Jump ↗

--text-primary: red;
--text-secondary: red;

Jump ↗

--header-muted: red;

Font color is inconsistent on profiles.

Font colors are very washed out when viewing a profile. Looks fine when only tapping on the avatar, so I'm assuming this is not the way it's meant to be.

Betterfolder sidebar misplaced

When i use BetterFolders plugin, the sidebar goes under chat/server screen.
Midnight theme

Vanilla

Server joining or creation menu is not themed

Stop adding new CSS files.

I noticed you keep adding new CSS files for each release, this makes it quite painful to upgrade as I cannot link this as a dependency of my Discord module. Is there any particular reason for this?

Rounded corners in fullscreened image hides the rest.

When using this theme I have encountered an issue where the corners of an image will be so aggressive, I cannot see the full image and only half. This is worse for smaller images.

Custom CSS no longer applying

Worked fine last night and in the morning when I started the app it reverted to default styling, completely ignoring changes.
Stuff tried:

• Changing colors at random, nothing applies at all
• Uninstalling the theme and reinstalling it
• Reinstalling BetterDiscord

Just to clarify I'm talking about changing colors within the theme's file, not custom CSS outside of it.

biscuit logo doesn't show up on the direct messages button

the last time i used the biscuit theme was around a month back and it wa working perfectly fine. I tried getting it back today and this is what it looks like.

note: im not the only one facing the issue, it doesnt seem to work for my friends either

Non-classic theme not round.

The BD site preview shows that it should be fine, but in my client it isn't round. Classic looks the same but with slightly different colors

I am on BD on regular Discord.

Note: Some of my other themes are also not working properly so maybe on my end?

online indicator

scuffed blue square is scuffed

This is literally the best discord theme

Hello,
I tried all the themes from BetterDiscord and this one is the best because it adds a cool UI, but is really similar to native experience.

Few suggestions:

• I did have to put normal text to brighter colors since it was to close to background color and therefore hard to read

/* text colors */
--text-1: hsl(220, 40%, 95%); /* bright text on colored elements */
--text-2: hsl(220, 32%, 82%); /* headings and important text */
--text-3: hsl(220, 25%, 70%); /* normal text */
--text-4: hsl(220, 15%, 40%); /* icon buttons and channels */
--text-5: hsl(220, 15%, 25%); /* muted channels/chats and timestamps */

• I also had to change animation speed because it looked too slow when quickly hovering. I found 0.05s to be the best

/* animations */
--hover-push: 0.05s ease; /* channels/members when hovered */

• I would suggest declining the different accents gradient from a common hue so that it's easy to change the accent color throughout the theme

/* accent colors */
--base-hue: 190; /* set the base hue */

--accent-1: hsl(var(--base-hue), 80%, 60%); /* links */
--accent-2: hsl(var(--base-hue), 80%, 48%); /* general unread/mention elements */
--accent-3: hsl(var(--base-hue), 80%, 42%); /* accent buttons */
--accent-4: hsl(var(--base-hue), 80%, 36%); /* accent buttons when hovered */
--accent-5: hsl(var(--base-hue), 80%, 30%); /* accent buttons when clicked */
--mention: hsla(var(--base-hue), 80%, 52%, 0.1); /* mentions & mention messages */
--mention-hover: hsla(var(--base-hue), 80%, 52%, 0.05); /* mentions & mention messages when hovered */

Toolbar items overlap some UI elements.