If you would like to show love to the creator of this project or this project in general, please consider helping fund the development of this project by donating on Ko-fi.
🖤 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 preference 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-themed color palette, animations, and features from included themes — such as Radial Status for better visibility of other user's current status, a Settings Modal for a cleaner and more modern Discord settings interface with improved transparency and readability, a horizontal server list for better screen usage, and emoji replacement for a cleaner and more modern look.
I have tried to keep the theme relatively small, simple, and clean for speedy load times on laptops and low-end PCs, and even phones, while maintaining easy use and modification of the theme through documentation, links, support, and issues.
https://theme.ash1421.com/midnight-ash.css
To download and install for most modern clients, copy the URL above and paste or type it into the required field, then load, toggle, reload, or restart to refresh the 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 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.
These results are approximate (~) and may change if upstream themes or
midnight-ash.cssare updated. Load times measured via Discord DevTools Network tab with cache disabled.
| Import | Load Time | Transfer Size |
|---|---|---|
midnight-ash.css |
~42ms | ~2.02 KB |
midnight-discord |
~54ms | ~16.35 KB |
amoled-cord |
~44ms | ~4.91 KB |
RadialStatus |
~42ms | ~2.17 KB |
SettingsModal |
~44ms | ~1.72 KB |
HorizontalServerList |
~44ms | ~0.75 KB |
Apple Emojis |
~249ms | ~0.53 KB |
Font Awesome Moon SVG |
~123ms | ~0.75 KB |
| Total | ~29.20 KB |
Sizes may change if upstream themes or
midnight-ash.cssare updated, therefore the sizes are approximate (~). Sizes measured via a custom Node.js script against the full uncompressed and gzipped CSS files.
| Import | Uncompressed | Gzipped |
|---|---|---|
midnight-discord |
~79.01 KB | ~15.86 KB |
amoled-cord |
~28.63 KB | ~4.46 KB |
RadialStatus |
~8.33 KB | ~1.91 KB |
SettingsModal |
~7.81 KB | ~1.36 KB |
HorizontalServerList |
~1.65 KB | ~614 B |
Apple Emojis |
~1.34 KB | ~343 B |
| Total | ~126.76 KB | ~24.40 KB |
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: 960)--settingsheight: Height in vh (default: 80)--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 310deg))--purple-2: Light purple (default: oklch(70% 0.11 310deg))--purple-3: Medium purple (default: oklch(65% 0.11 310deg))--purple-4: Dark purple (default: oklch(60% 0.11 310deg))--purple-5: Darkest purple (default: oklch(55% 0.11 310deg))
--green-1: Lightest green (default: oklch(75% 0.11 170deg))--green-2: Light green (default: oklch(70% 0.11 170deg))--green-3: Medium green (default: oklch(65% 0.11 170deg))--green-4: Dark green (default: oklch(60% 0.11 170deg))--green-5: Darkest green (default: oklch(55% 0.11 160deg))
--blue-1: Lightest blue (default: oklch(75% 0.1 215deg))--blue-2: Light blue (default: oklch(70% 0.1 215deg))--blue-3: Medium blue (default: oklch(65% 0.1 215deg))--blue-4: Dark blue (default: oklch(60% 0.1 215deg))--blue-5: Darkest blue (default: oklch(55% 0.1 215deg))
--yellow-1: Lightest yellow (default: oklch(80% 0.11 90deg))--yellow-2: Light yellow (default: oklch(75% 0.11 90deg))--yellow-3: Medium yellow (default: oklch(70% 0.11 90deg))--yellow-4: Dark yellow (default: oklch(65% 0.11 90deg))--yellow-5: Darkest yellow (default: oklch(60% 0.11 90deg))
--red-1: Lightest red (default: oklch(75% 0.12 0deg))--red-2: Light red (default: oklch(70% 0.12 0deg))--red-3: Medium red (default: oklch(65% 0.12 0deg))--red-4: Dark red (default: oklch(60% 0.12 0deg))--red-5: Darkest red (default: oklch(55% 0.12 0deg))
--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 DMs icon (default: custom)--dms-icon-svg-url: SVG URL for custom DMs 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
- 📖 Improved grammar, punctuation, and overall readability in
README.md. - 📖 Enhanced documentation consistency and formatting across the project.
- 🐛 Refined wording, spelling, and consistency in
index.htmlcontent (improved readability and corrected multiple typos and phrasing issues). - 🐛 Migrated legacy issue template (
ISSUE_TEMPLATE.md) to GitHub Issue Forms (.github/ISSUE_TEMPLATE/*.yml). - 🐛 Introduced structured issue templates:
- Bug report
- Feature request
- Documentation issue
- Question
- 🔧 Updated
README.mdissue links by fixing broken?template=URLs and standardising them to GitHub issue forms. - 🔧 Fixed typos and improved capitalization in
publish-css.ymlrelease workflow. - 🔧 Added
config.ymlto disable blank issues and enforce structured issue templates.
[!IMPORTANT]
- ✅ Major version bump with many changes.
- 🐛 Fixed CSS theme header comment syntax and fields (removed non-standard
!and?prefixes, corrected indentation).- ✅ Added
CONTRIBUTING.mdwith contribution guidelines, branching/fork policy, and contact info.- 🔒 Added
SECURITY.mdwith vulnerability reporting instructions, supported version policy, and contact info.- ✅ Added
CODE_OF_CONDUCT.mdwith community standards, enforcement policy, and contact info.- ✅ Added
.github/PULL_REQUEST_TEMPLATE.mdfor standardised pull requests.- ✅ Added
.github/ISSUE_TEMPLATE.mdfor standardised issues.
[!NOTE]
- 📖 Updated issues and support links in
README.mdto use issue template, added security vulnerability reporting link.- 📖 Updated new issue badge in
README.mdto link directly to issue template.- 🔒 Enabled private vulnerability reporting on GitHub.
- 📖 Wrapped older changelog entries in a collapsible dropdown for cleaner
README.mdreadability.- 📖 Wrapped customization documentation and screenshots in collapsible dropdowns.
- 🧹 Fixed heading levels throughout changelog.
- 🧹 Fixed various typos in older changelog entries and
README.md.
[!NOTE]
- 🧹 Added descriptive emojis to all changelog entries for better readability (Listed Below).
✅ New additions 🐛 Bug fixes 📖 Documentation changes 🧹 Cleanup / Refactoring 🔧 Config / Workflow Changes 🔒 Security Related
- 🧹 Modernised CSS color syntax throughout
midnight-ash.css. - 🧹 Converted
hsla()comma syntax to modernhsl()slash syntax. - 🧹 Added
degunit to alloklch()hue values. - 🧹 Restructured
midnight-ash.cssfor easier editing and readability. - 🐛 Fixed text color scale to match original values.
- 🧹 Linted
midnight-ash.csswith Stylelint, Prettier and duplication/unused variable removal. - 📖 Added Performance and Import Sizes sections to
README.md. - 🐛 Fixed / reformed screenshots div code.
- 📖 Updated
README.mdto reflect changes. - 📖 Updated
README.mdcustomization documentation. - 📖 Updated / Added to
README.mdexisting and new javascript, json, and node.js badges reflecting what was used.
- ✅ Added github banner
midnight_ash_banner.svg - ✅ Added svg folder with banner.
- ✅ Added svg banner.
- 🧹 Removed some title text at the top of
README.md
- 🐛 Fixed
midnight-ash.cssimport url format.
- ✅ Added donation / support github funding.
- 🧹 Changed donation badge stuff.
- ✅ Added donation / support badges and information to the
publish-css.ymlfile. - ✅ Added Donations & Support section to the website.
- ✅ Made header badges clickable with links to releases, stargazers, CodeFactor, and license.
- 🧹 Changed existing donation / badges.
- 🔧 Changed
index.html - 🔧 Changed
index.css
- ✅ Added donation / support badges and information.
- 🧹 Formatted all supported files with a code formatter.
- 🐛 Fixed
publish-css.ymlbadge bug.
- 🧹 Changed
README.mdbadges. - 🧹 Changed
index.htmlbadges. - 🧹 Changed
publish-css.ymlbadges.
- 🐛 Javascript language repository fix.
- 🐛 Release error fix.
- 🔧 Changed
index.htmlwebsite file structure. - 🧹 Changed website aspects such as buttons and colors.
- ✅ Added
index.cssandindex.jsfiles. - 📖 Changed some theme information in
README.md. - 🔧 Added and changed parts of
index.htmlfile. - 🐛 Changed
publish-css.ymlto fix artifact warning.
- 🔧 Changed
publish-css.ymlto artifact and naming of automations. - 🔧 Added update to node24 using env for
publish-css.ymlto avoid warnings and future issues when GitHub defaults to Node.js 24 in June 2026.
- 🔧 Changed website back to root of repository not docs.
- ✅ Added assets folder with
favicon.icoat root of main branch. - 🔧 Release workflow now uses builtin body of
publish-css.ymlfile. - 🔧 Changed
publish-css.yml
- 🔧 Updated website favicon to
favicon.ico - 🔧 Release workflow now uses
message/release-body.mdfor the release message. - 🧹 Minor tweaks to badges and installation instructions in release message.
- 🔧 Changed
publish-css.yml
- ✅ Added GitHub Actions workflow to automatically publish releases.
- 🔧 Added automatic version detection from commit messages (Release - VX.X.XX).
- 🔧 Added automatic CSS file attachment to GitHub releases.
- 🔧 Added automatic release notes template generation.
- 🔧 Changed development workflow to skip releases for Testing, Dev, and Development commits.
- 🔧 Moved website files (index.html and favicon.png) into docs/ for GitHub Pages, with future-proofing for docs/assets/.
- ✅ Added meta info for social platforms and embeds to the themes website.
- ✅ Added custom animated page title to the themes website.
- 🧹 Changed static title on the themes website.
- 🧹 Changed Readme footer.
- 🐛 Added gitattributes to fix HTML stats in repo.
- ✅ Added HTML5 badge.
- 🧹 Removed Discord badge on html file / themes website.
- ✅ Added favicon / website icon.
- ✅ Added changelog strip with hyperlink to website for convenience.
- 🔧 Domain change for github pages.
- 📖 Changed documentation related to domain change.
- 🧹 Changed readme discord link.
- ✅ Added github pages website with general information.
- 📖 Minor license change to add author and general information.
- 🧹 Changed author link and discord server invite link.
- 🧹 Changed website link.
- 📖 Changed author information.
- 📖 Added/changed description.
- 🧹 Changed codefactor badge.
- 🧹 Changed version badge.
- 🐛 Codefactor badge link fix.
- ✅ Added multiple badges, including Codefactor, GNU, and Shields.
- ✅ Added Codefactor code quality badge.
- 🧹 Changed Discord website theme link.
- 📖 Changed license information to the default GPL v3 license, with important information moved to the license 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, license, and software disclaimer with changes/addition.
- 📖 Readme fix with changes/addition.
- 📖 Readme and license 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 information/credit additions.
- 🐛 Readme file fix.
- 🧹 Readme badge changes.
- 📖 Readme changes.
- 🐛 Readme file fix.
- 📖 Readme help/documentation changes and additions, as well as information 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?
- 🐛 Report a Bug
- ✨ Request a Feature
- 📖 Documentation Issue
- ❓ Ask a Question
- 🔒 Report a Security Vulnerability
- 💬 Open a Ticket
This project is licensed under the GPL v3.0 (GNU General Public License 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
|
Minimum donation: $5 (NZD) Payment methods: Credit/Debit Card, PayPal, Apple Pay, Google Pay Supported Cards: Visa, Mastercard, Amex / American Express Membership options are available for recurring support. You can donate via: 
|
|
Made with 💜 by @Ash1421, for the Discord community.
⭐ Star this repo if you like it! ⭐
