A sleek, feature-rich Discord theme combining the best of dark aesthetics and modern functionality
🖤 Midnight-AMOLED - Pure black backgrounds that are easy on OLED displays
⚙️ Settings Modal - Clean modal windows for settings instead of sidebars
🔘 Radial Status - Beautiful circular status rings around avatars
📱 Horizontal Server List - Servers displayed at the top for better screen usage
🍎 Apple Emojis - Clean, modern Apple emoji replacements
This theme has been made with my prefrence in mind and features the best of dark aesthetics and modern functionality, it offers customization, documentation, support and instructions for most modern clients. The theme is made with a purple favorited color palette with animations and the lovely features from the other themes such as radial status for better status of other users curent state, settings modal for a better and nicer look of the discord settings menu allowing a more modern look while giving the user a more transparent menu for better viewability, a horizontal server list for better screen usage, and emoji replace for cleaner and more modern emojis.
I have tried to keep the theme reletively small simple and clean for speedy load times on laptops or low end pc's, maybe even phones as well, and have the easy use and modification of the theme and features via documentation, links, support, or issues.
https://ash1421.github.io/Midnight-Ash/midnight-ash.css
To download and install for most modern clients copy the url above and paste or type into the requred field then Load, Toggle, Reload, or Restart to refresh theme, for more help please view the client specific instructions.
For file based installs please download the CSS file and move it to the required path.
Using the latest version could help with optimizations and other features to be added or that have been added and or documented.
⬇️ To download the CSS file click the version badge, go to the latest release or click on this link: Latest Release
Website: https://equicord.org/ GitHub: https://github.com/Equicord/Equicord
- Open Discord settings
- Go to
Equicord→Themes - Click
Online Themes - Paste the URL above and click
Add Theme
Website: https://vencord.dev/ GitHub: https://github.com/Vendicated/Vencord
(Web Versions)
Vencord Web Chrome Extension: https://chromewebstore.google.com/detail/vencord-web/cbghhgpcnddeihccjmnadmkaejncjndb
Vencord Web Userscript: https://raw.githubusercontent.com/Vencord/builds/main/Vencord.user.js
- Open Discord settings
- Go to
Vencord→Themes - Click
Online Themes - Paste the URL above and click
Add Theme
Website: https://betterdiscord.app/ GitHub: https://github.com/BetterDiscord/BetterDiscord
- Download the
.cssfile from the repository - Place it in your BetterDiscord themes folder
- Or use
Settings→Themes→Load from URL
Website: https://replugged.dev/ GitHub: https://github.com/replugged-org/replugged
- Open Discord settings
- Go to
Replugged→Themes - Click
Install from URL - Paste the URL and install
Website: https://legcord.app/ GitHub: https://github.com/Legcord/Legcord
- Go to
Settings→Themes - Click
Load Theme - Enter the URL or upload the
.cssfile
GitHub: https://github.com/SpacingBat3/WebCord
- Navigate to your WebCord themes folder
- Download and place the
midnight-ash.cssfile - Restart WebCord and enable the theme
Website: https://openasar.dev/ GitHub: https://github.com/GooseMod/OpenAsar
Compatible with BetterDiscord, Equicord or Vencord installation methods.
To change the accent color, also known as the main color, please use the following information below for assistance in changing it to your favorite color or adding your own if you know what you are doing.
To change anything listed below please open the css file you have downloaded in a text or code editor and edit the according options to the values you like or want.
To change any options below is at your own risk and could cause the theme to break if not done correctly, please report issues if found and use documentation. You have been warned.
--settingswidth: Width in pixels (default: 960px)--settingsheight: Height in vh (default: 80vh)--settingsbackground: Background color (default: transparent)
--rs-small-width: Status ring thickness (default: 2px)--rs-avatar-shape: Avatar shape (default: 50% = round, 0% = square)--rs-phone-color: Phone status ring color (default: var(--rs-online-color))--rs-phone-visible: Visibility of phone status ring (default: block)
--HSL-server-direction: Direction of server list (default: column)--HSL-server-alignment: Alignment of server list (default: flex-start)
--purple-1: Lightest purple (default: oklch(75% 0.11 310))--purple-2: Light purple (default: oklch(70% 0.11 310))--purple-3: Medium purple (default: oklch(65% 0.11 310))--purple-4: Dark purple (default: oklch(60% 0.11 310))--purple-5: Darkest purple (default: oklch(55% 0.11 310))
--green-1: Lightest green (default: oklch(75% 0.11 170))--green-2: Light green (default: oklch(70% 0.11 170))--green-3: Medium green (default: oklch(65% 0.11 170))--green-4: Dark green (default: oklch(60% 0.11 170))--green-5: Darkest green (default: oklch(55% 0.11 160))
--blue-1: Lightest blue (default: oklch(75% 0.1 215))--blue-2: Light blue (default: oklch(70% 0.1 215))--blue-3: Medium blue (default: oklch(65% 0.1 215))--blue-4: Dark blue (default: oklch(60% 0.1 215))--blue-5: Darkest blue (default: oklch(55% 0.1 215))
--yellow-1: Lightest yellow (default: oklch(80% 0.11 90))--yellow-2: Light yellow (default: oklch(75% 0.11 90))--yellow-3: Medium yellow (default: oklch(70% 0.11 90))--yellow-4: Dark yellow (default: oklch(65% 0.11 90))--yellow-5: Darkest yellow (default: oklch(60% 0.11 90))
--red-1: Lightest red (default: oklch(75% 0.11 0))--red-2: Light red (default: oklch(70% 0.11 0))--red-3: Medium red (default: oklch(65% 0.11 0))--red-4: Dark red (default: oklch(60% 0.11 0))--red-5: Darkest red (default: oklch(55% 0.11 0))
--accent-1: Accent 1 (default: var(--purple-1))--accent-2: Accent 2 (default: var(--purple-2))--accent-3: Accent 3 (default: var(--purple-3))--accent-4: Accent 4 (default: var(--purple-4))--accent-5: Accent 5 (default: var(--purple-5))--accent-new: Accent new (default: var(--accent-2))
--custom-dms-icon: Custom DM'S icon (default: custom)--dms-icon-svg-url: SVG URL for custom DM'S icon (default: url("https://refact0r.github.io/midnight-discord/assets/Font_Awesome_5_solid_moon.svg"))
--font: Font family (default: "figtree")--code-font: Code font family (default: "")--font-weight: Font weight (default: 400)
--animations: Animations (default: on)
--custom-window-controls: Custom window controls (default: on)
- The screenshots below show the theme in action when it is correctly loaded.
- Pure black backgrounds (
#000000) for OLED displays - Subtle white accents for better contrast
- Reduced eye strain in dark environments
- Customizable width and height
- Clean, centered design
- Better focus and organization
- Circular rings around avatars
- Color-coded for different statuses
- Clean, modern, visible, and functional appearance
- Server list moved to top
- More vertical space for chat
- Modern, streamlined appearance
- ✅️ Codefactor badge link fix.
- ✅️ Added multiple badges, including Codefactor, GNU, and Shields.
- ✅️ Added Codefactor code quality badge.
- ✅️ Changed Discord website theme link.
- ✅️ Changed license infomation to the default GPL v3 license, with important infomation moved to the liscense section in the readme.
- ✅️ Changed Screenshots format and some documentation in the Documentation/Readme file.
- ✅️ Added Screenshots to the Documentation/Readme file.
- ✅️ Readme documentation/information additions and changes.
- ✅️ Readme documentation/information additions.
- ✅️ Readme documentation additions.
- ✅️ Readme documentation, liscense, and software discalamer with changes/addition.
- ✅️ Readme fix with changes/addition.
- ✅️ Readme and lisense fix/addition.
- ✅️ Major rewrite of license files to clarify GPL v2 and MIT components and the new license for the theme.
- ✅️ Major Update to README file with clearer license information for incorporated works.
- ✅️ Badge changes and additions/changes to README file.
- ✅️ Readme infomation/credit additions.
- ✅️ Readme file fix.
- ✅️ Readme badge changes.
- ✅️ Readme changes.
- ✅️ Readme file fix.
- ✅️ Readme help/documentation changes and additions, as well as Infomation about the theme.
- ✅️ Readme badge changes.
- ✅️ Readme file fix.
- ✅️ Added More Documentation and Help to Readme File.
- ✅️ Added More Help to Readme File.
- ✅️ Added Star History to Readme.
- ✅️ Versioning fixes.
- ✅️ Added To Readme.
- ✅ Formatted CSS, Readme, and license files.
- ✅ Combined all themes into one package
- ✅ Added AMOLED backgrounds
- ✅ Integrated radial status
- ✅ Added horizontal server list
- ✅ Apple emoji replacements
Found a bug? Have a suggestion?
This project is licensed under the GPL v3.0.
It also incorporates components from other open-source projects under MIT or GPLv2 licenses:
| Component | Author | License |
|---|---|---|
| Midnight Discord Theme | refact0r | MIT |
| AMOLED-Cord | LuckFire | MIT |
| Settings Modal / Emoji Replace | DevilBro | GPL v2 |
| Radial Status / Horizontal Server List | Gibbu / DiscordStyles | MIT |
See the ORIGINAL_LICENSES/ directory for full unmodified license texts.
These incorporated works remain under their original licenses (MIT or GPLv2), compatible with the GNU General Public License v3.0 under which this combined project is released.
The only things that have been modified from the license files is the names of the files and file types for organization, other than that, the license texts are the same as the original authors.
If you plan on using, editing, or redistributing this theme, please give credit to the original authors.
By using, editing, or publishing this theme you are acknowledging that you have read and understand the license terms and conditions of using the provided files, and that you agree to be bound by the terms of the license.
Using the provided Discord Clients is at your own risk, please use at your own discretion of your discord account and your computer.
-
Midnight Theme - @refact0r
-
AMOLED-Cord - @LuckFire
-
Settings Modal - @DevilBro
-
Radial Status - @Gibbu
-
Horizontal Server List - @Gibbu
-
Emoji Replace - @DevilBro
-
Thanks to all the contributors on GitHub
Made with 💜 for the Discord community
⭐ Star this repo if you like it! ⭐