Code Monkey home page Code Monkey logo

discordnight's Introduction

Requires the Discord desktop app with BetterDiscord or Vencord installed (Or any other Discord client mod that supports themes).

  • Download DiscordNight.theme.css and navigate to Settings > Themes and click Open Themes Folder or place the file in %appdata%/BetterDiscord/themes and then enable DiscordNight.
    If the theme does not show up refresh Discord using CTRL+R or restart Discord.
  • Method 1:
    • Download DiscordNight.theme.css and navigate to Settings > Themes and click Open Themes Folder or place the file in %appdata%/Vencord/themes and then enable DiscordNight.
  • Method 2:
    • Navigate to Settings > Themes and go to Online Themes tab and in the input field paste in this URL:
      https://raw.githubusercontent.com/KillYoy/DiscordNight/master/DiscordNight.theme.css

Important info

  • Dark Theme needs to be enabled in Settings > Appearance > Theme and select Dark.
  • Nitro exclusive theme appearance colors are not supported and may look broken.

Keep in mind that things may break at any time because of Discords background updates which may cause you to have to reinstall BetterDiscord or wait for the theme to be updated.
In case there is anything that has not yet been fixed or any plugin related issues feel free to either make a new issue or contact me KillYoy#0295 on Discord.

Preview

A comparison with and without the theme enabled in BetterDiscord (Images are slightly outdated)

Main window comparison Matching colored underlines for member list roles requires the BetterRoleColors plugin.
The theme supports USRBG by Tropical.

Settings comparison

Customizing the theme

DiscordNight has certain unique variables that can easily be modified to change the visibility and width of certain elements. The code can either be added to the DiscordNight.theme.css or the Custom CSS menu in Discord settings:

:root {
    --Channel-Invite-Edit-Buttons: none;                 /* flex = ON, none = OFF */
    --Channel-Category-Invite-Button: flex;              /* flex = ON, none = OFF */
    --Channel-List-Active-Threads: flex;                 /* flex = ON, none = OFF */
    --Channel-List-Upcoming-Events: flex;                /* flex = ON, none = OFF */
    --Channel-List-Boost-Goal: block;                    /* block = ON, none = OFF */
    --Channel-List-Width: 200px;                         /* 200px, Discord default = 240px */
	
    --User-List-Width: 200px;                            /* 200px, Discord default = 240px */
    --User-Popout-Width: 240px;                          /* 240px, Discord default = 300px */
    --User-Status-Popout-Width: var(--User-Popout-Width);/* 240px, Discord default = 300px */
	
    --Search-List-Width: 488px;                          /* 488px, Discord default = 418px */
    --Inbox-List-Width: 522px;                           /* 522px, Discord default = 480px */
	
    --Emoji-Menu-Height: 618px;                          /* 618px or 498px, Discord default = 444px */
	
    --Chatbox-Gift-Button: none;                         /* flex = ON, none = OFF */
    --Chatbox-GIF-Button: none;                          /* flex = ON, none = OFF */
    --Chatbox-Stickers-Button: none;                     /* flex = ON, none = OFF */
	
    --Chat-Emoji-Size: 1.75rem;                          /* 1.75rem, Discord default = 1.375rem */
    --Chat-Emoji-Large-Size: 2rem;                       /* 2rem, Discord default = 3rem */
    --Chat-Sticker-Size: 5rem;                           /* 5rem, Discord default = 10rem */
    --Chat-Super-Reaction-Button: none;                  /* flex = ON, none = OFF */
    --Chat-Wave-To-New-User-Button: flex;                /* flex = ON, none = OFF */
    --Chat-Wave-To-New-DM-Button: flex;                  /* flex = ON, none = OFF */
	
    --Text-Channels-Capital-Letter: capitalize;          /* capitalize, none */
	
    --Voice-Noise-Suppression: none;                     /* flex = ON, none = OFF */
    --Start-Activities-Button: flex;                     /* flex = ON, none = OFF */
	
    --Embed-Remove-Button: flex;                         /* flex = ON, none = OFF */
	
    --Context-Menu-Emoji-Toolbar: none;                  /* flex = ON, none = OFF */
	
    --Home-Nitro-Button: none;                           /* flex = ON, none = OFF */
    --Home-Store-Button: none;                           /* flex = ON, none = OFF */
    --Home-Direct-Messages-Header: flex;                 /* flex = ON, none = OFF */
    --Home-Close-DM-Button: block;                       /* block = ON, none = OFF */
    --Friends-List-Searchbar: none;                      /* flex = ON, none = OFF */
	
    --Titlebar-Help-Icon: none;                          /* flex = ON, none = OFF */
}

Want certain things to look like they normally do in Discord?

I have made some import addons which changes certain aspects of the theme.
You can change the Server list message notice and Chat file attachment button back to their original appearance by adding either of these two lines of code to your DiscordNight.theme.css

@import url("https://killyoy.github.io/DiscordNight/Addons/Vanilla_ServerList_Message_Notice.theme.css"); 
@import url("https://killyoy.github.io/DiscordNight/Addons/Vanilla_Attachment_Button.theme.css"); 

Installing DiscordNight without client mods (Not recommended)

  • If you don't want to use BetterDiscord or it does not work for some reason the CSS can be injected using Discords developer tools using Ctrl+Shift+I in the Desktop app or F12 in the browser. In the Sources tab go click on assets and find the file that ends with .css and paste in the code from DiscordNight.css into it, if done correctly the theme should be loaded until the next time Discord restarts (Keep in mind that images loaded from an external address will not load this way).

Installing DiscordNight to your internet browser

  • By using a stylesheet addon like Stylus, you can create a style for discordapp.com and paste in the code from DiscordNight.css (Not everything will work correctly like scrollbars and external images)

discordnight's People

Contributors

killyoy avatar thelovinator1 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

discordnight's Issues

No Scrolling on User Popout Profiles

For people with many roles or long user descriptions you are unable to scroll down to see the entire mini profile/role list. It seems the scrollbar was entirely cutout from the code. However if you click the very bottom right corner it will instantly snap to the bottom of the role list and reveal the bottom of the profile and the message/notes

Injecting the theme

If we want to inject the theme using developer tools should we create a backup of the css file which we are going to edit?

Discord Settings Icon order

Not a functionality-breaking bug, but the order of the icons in App Settings section of Discord's settings is not correct.

image

Scroll slider appearing on channels section when hovering over it

Is there any way to make the scroll slider on channels section be visible permanently and not only when you hover over them? It moves everything little to the left when the slider appears.
Or at least somehow make space for it to appear, so it doesn't squish everything to the left.

New discord borders interferes with text.

image
It looks like this, I don't know how to fix it and it's kind of impossible to ignore.
And I just hate how many changes discord keeps making that break all the themes and plugins, do hope you can figure out how to solve this though.

Default Discord Image Not Displaying For Users In Channels

04-24-2022_13 46 30_Discord
From the picture you can see that "DigiBlak" does not have a profile image displayed in the user list for the channels but in the server list he has a default profile image. I have no other themes enabled and haven't changed any CSS. I also fresh installed the theme yesterday.

Discord Update (Profile & Settings Icons Bug)

  • The settings icons only appear when you click

1

  • Profile pictures became smaller and the social network links became unable to be accessed because they can't be scrolled down

2

Please fix these bugs, I love your theme and that's why I am creating issues for you to improve it even more

Noise suppression icon missing

Recently I started using this theme since I find it very nice for many things, but it's been since I started using this theme that the noise suppression icon has disappeared from Discord whenever I join voice calls in servers or DMs. Is there any fix for this that I could try? It's driving me crazy going to the settings everytimes to check if I have noise suppression and/or test my mic.

before Before adding the theme
after After adding the theme

issue with background

hey, I'm having some issues with the background that involve a "merge" between discordnight and normal discord
Screenshot 2022-01-10 155019
not sure if its just me or a common issue, really like your work tho so it'd be great if there was a fix

Server Threads

Server Threads is not currently supported, No idea how to fix

Screenshot?

Would be really helpful to have a screenshot of what it looks like.

Thanks,
-MH

OverExtending Bar

On the latest BandagedBD update for Macos (Beta and Regular), the bar separating the servers from the chats are double as long than they should be.

*Attached a Picture

image

Discord Update (Status Menu)

after the update, the status menu changed and the microphone & configuration buttons moved a little to the left corner (one question, could you make an addon to go back to the old status menu?) Thanks <3

1

found 3 (maybe 4) bugs with the theme

This theme is great (probably one of my favorites) but it does have its fair share of bugs with it that I wanna point out to make it better

image
I can't add channels

https://cdn.discordapp.com/attachments/460094358289514516/841821633572241429/image0.jpg
I can't take away roles (had to take this on my phone since Windows screenshots doesn't capture my cursor, sorry if its shit)

image
the attachment button is unnecessarily small

image
When one user has no connections, it just looks so empty and weird

Thank you for the theme, and please do take your time fixing these issues :)

User popout broken

Hi!
TL;DR:
User popouts seem to be broken. Been broken for a while now, I hoped for an update, and now I'm here.
Yes, I tried using a “non customized” version of this theme, but still broken (I changed the colours etc.).
Other stuff might be also broken, but this is the only thing I found that is “very” broken.

popout

Thank you in advance.

Typing in the new suggestions forums causes the width of the player list to shrink

This is a weird bug, it's hard to notice till you start writing massive paragraphs in there and then it becomes hard to unnotice.
It's not very important but still figured I'd report it.
image
This is how it looks with an empty chat box.

Then without an empty chatbox it looks like this:
image

Why I think this is a bug and not a feature is because it doesn't happen in any other channel:
image

Minor CSS issue prolly

image

Just opened discord and saw this eyesore lul ; happens when the member's list is in small amount

background graphic

Is there a switch somewhere that I can add a graphic to my background? I have another theme that I like the background for but if I enable both this theme and the other this one takes control of the background on the main window and the graphic disappears. I didn't see a switch for it and looking thru the css i cannot find where it is. I am a css newbie, i've never taken the time to learn it now i wish i did.

Avatars are small

This seems to be happening to every theme, the big avatars when selecting a user on the right side is small and not massive like the picture comparisons in the readme

Request for Icon Enhancement: Adorning Vencord with Noble Insignias

Hark, my liege,

Methinks I have ventured upon the digital realm known as Vencord, and lo, I have noticed a peculiar absence of icons adorning its visage. Verily, it is akin to a knight without his noble sigil, a tapestry devoid of its vibrant hues.

I beseech thee, O gracious sovereign, to bestow upon Vencord the regal splendor it deserves. Grant it icons, resplendent and gallant, that they may grace its countenance as our coats of arms adorn our armor.

.vc-settings::before { /* Like BetterDiscord settings. */
    background: url("") !important;
    background-repeat: no-repeat !important;
}
.vc-plugins::before { /* Like BetterDiscord plugins. */
    background: url("") !important;
    background-repeat: no-repeat !important;
}
.vc-themes::before { /* Like BetterDiscord themes. */
    background: url("") !important;
    background-repeat: no-repeat !important;
}
.vc-updater::before { /* Toggle auto update, get notified about new updates, etc. */
    background: url("") !important;
    background-repeat: no-repeat !important;
}
.vc-cloud::before { /* Sync settings to the cloud. */
    background: url("") !important;
    background-repeat: no-repeat !important;
}
.vc-backup-restore::before { /* Import/export settings to a JSON file. */
    background: url("") !important;
    background-repeat: no-repeat !important;
}

Yours in loyal service,
Ser Lovinator, the Devoted

Suggestion!

sorry but I could not find another way to contact
could it be possible to add a max length for user statuses,
as long statuses break the layout
see the attached example,
as you can see on the right side some users are hidden,
I did look in the .css for a value to change but couldn't see one
image

Friends list hiding some friends due to a very long status

I am running discord at 840 pixels wide. I have a friend who always has a super long status, and it interacts with the theme's attempts to add multiple columns in such a way that it hides the other column. Note that only 4 friends are in the image, but discord says that there are 8 online.
Bugged

This is the same friends list but at 1680 pixels wide. It isn't bugged but that one status is making one column much larger than the other ones, but is not hiding any friends.
Fullscreen

multi-account discord - friends list grid

Hi, my first issue, impressed with your work. However, I've encountered a bug while using the theme with two Discord accounts.

When I use Discord with two accounts and have your theme applied, I notice a discrepancy in the display of my friend list. The issue occurs as follows:
In my first Discord account, the friend list is displayed in a grid format, which is the expected behavior and looks great.
[First account]
image
However, when I switch to my second Discord account, the friend list reverts to a normal, non-grid list, which is not consistent with the grid format seen in the first account.
[Second account]
image

Steps to Reproduce:
Here's how you can reproduce the issue:

  1. Install your theme and apply it to Discord.
  2. Log in with two separate Discord accounts.
  3. Observe the friend list format in the first account (grid).
  4. Switch to the second account and observe the friend list format (normal list).

Windows 11. Latest version of DiscordNight theme via Vencord mod.

Fixed lines 3676, 3677, 3678

lines 3676, 3677,3678 are like this:

.backgroundFlash-1X5jVs[style*="background-color: rgba(88, 101, 242, 0.2"],

but should be like this:

.backgroundFlash-1X5jVs[style*="background-color: rgba(88, 101, 242, 0.2)"],

Once you do this you can see the color shift in syntax highlighting. That's also where your theme stops working correctly and why It may have had bugs.

Several issues regarding icons

  • Mute, deafen and settings icons not condensed to be smaller (ignore the game controller icon, that's from another betterdiscord plugin)
  • chat box's gif, media, emoji, etc icons appearing again, rather than being condensed to just the emoji icon
  • upload a file icon moved back to the left side
    basically, icons and buttons are not showing like they should.

image_2023-10-17_004949348
image_2023-10-17_005106087

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.