Skip to content

Instantly share code, notes, and snippets.

@IoIxD

IoIxD/dracula-night.css

Last active April 24, 2023 04:13
Show Gist options
  • Save IoIxD/059df107191d7b77158b7743f36a7da7 to your computer and use it in GitHub Desktop.
Save IoIxD/059df107191d7b77158b7743f36a7da7 to your computer and use it in GitHub Desktop.
Download ZIP
"Dracula At Night" for Discord
Raw
dracula-night.css
/**
* @name Dracula Theme
* @author Kabir Kwatra
* @authorId 168376512272269313
* @version 1.0.0
* @description 🧛🏻‍♂️ Dark theme for all the things
* @source https://github.com/Dracula/BetterDiscord
**/
:root {
/* Dracula Base Colors */
--dracula-background: #0E1419 !important;
--dracula-current-line: #253340 !important;
--dracula-selection: #333649 !important;
--dracula-foreground: #F8F8F2 !important;
--dracula-comment: #6272A4 !important;
--dracula-cyan: #8BE9FD !important;
--dracula-green: #50FA7B !important;
--dracula-orange: #FFB86C !important;
--dracula-pink: #FF79C6 !important;
--dracula-purple: #BD93F9 !important;
--dracula-red: #FF5555 !important;
--dracula-yellow: #F1FA8C !important;
/* Dracula ANSI Colors */
--dracula-color0: #44475A !important;
--dracula-color1: #DE312B !important;
--dracula-color2: #2FD651 !important;
--dracula-color3: #D0D662 !important;
--dracula-color4: #9C6FCF !important;
--dracula-color5: #DE559C !important;
--dracula-color6: #6AC5D3 !important;
--dracula-color7: #D7D4C8 !important;
--dracula-color8: #656B84 !important;
--dracula-color9: #FF5555 !important;
--dracula-color10: #50FA7B !important;
--dracula-color11: #F1FA8C !important;
--dracula-color12: #BD93F9 !important;
--dracula-color13: #FF79C6 !important;
--dracula-color14: #8BE9FD !important;
--dracula-color15: #F8F8F2 !important;
/* Dracula Other Colors */
--dracula-line-highlight: #253340 !important;
--dracula-non-text: #424450 !important;
--dracula-white: #FFFFFF !important;
--dracula-tab-drop-background: #44475A70 !important;
--dracula-background-lighter: #343746;
--dracula-background-alt: #21222C !important;
/* Discord Root Colors */
--header-primary: var(--dracula-foreground) !important;
--background-primary: var(--dracula-background) !important;
--background-secondary: var(--dracula-background) !important;
--background-mobile-primary: var(--dracula-background) !important;
--background-mobile-secondary: var(--dracula-background) !important;
--background-secondary-alt: var(--dracula-background) !important;
--background-tertiary: var(--dracula-background-alt) !important;
--background-accent: var(--dracula-current-line) !important;
--background-floating: var(--dracula-background) !important;
--background-modifier-selected: var(--dracula-current-line) !important;
--activity-card-background: var(--dracula-background) !important;
--interactive-normal: var(--dracula-foreground) !important;
--channeltextarea-background: var(--dracula-selection) !important;
--rs-online-color: var(--dracula-green) !important;
--rs-idle-color: var(--dracula-orange) !important;
--rs-dnd-color: var(--dracula-red) !important;
--rs-offline-color: var(--dracula-selection) !important;
--rs-streaming-color: var(--dracula-purple) !important;
--rs-invisible-color: var(--dracula-comment) !important;
--interactive-muted: var(--dracula-comment) !important;
--scrollbar-auto-thumb: var(--dracula-comment) !important;
--scrollbar-auto-track: var(--dracula-background-alt) !important;
--scrollbar-thin-thumb: var(--dracula-comment) !important;
--scrollbar-auto-scrollbar-color-thumb: var(--dracula-comment) !important;
--scrollbar-auto-scrollbar-color-track: var(
--dracula-background-alt
) !important;
}
.wrapper-1BJsBx.selected-bZ3Lue .childWrapper-anI2G9,
.wrapper-1BJsBx:hover .childWrapper-anI2G9 {
background-color: var(--dracula-comment) !important;
}
/* Home */
.container-2cd8Mz {
background-color: var(--dracula-background) !important;
}
/* Autocomplete popup */
.autocomplete-3NRXG8 {
background-color: var(--dracula-background) !important;
}
.autocomplete-3jLKbj {
background-color: var(--dracula-background) !important;
}
/* Autocomplete popup selection */
.selected-3H3-RC {
background-color: var(--dracula-selection) !important;
}
/* Friends Menu Header */
.container-ZMc96U.themed-Hp1KC_{
background-color: var(--dracula-background) !important;
}
/* Emoji/Gif Selector Box*/
.contentWrapper-3vHNP2,
.container-3u7RcY,
.wrapper-1NNaWG,
.wrapper-1NNaWG,
.inspector-DFKXwB,
.wrapper-22rqw6,
.listWrapper-2nHLP8,
.categoryItem-1sHzUv,
.guildIcon-2SUGiq,
.header-11eigE{
background-color: var(--dracula-background) !important;
}
.container-1SX9VC,
.container-2oNtJn{
background-color: var(--dracula-selection) !important;
}
/* Scroll Bar */
.theme-dark
.scrollerThemed-2oenus.themedWithTrack-q8E3vB
.scroller-2FKFPG::-webkit-scrollbar-track-piece {
background-color: var(--dracula-selection) !important;
border: 4px solid var(--dracula-background) !important;
border-radius: 8px !important;
}
/* Outlines */
.scroller-kQBbkU,
.form-3gdLxP,
.members-3WRCEx,
.scroller-1ox3I2,
.panels-3wFtMD,
.scroller-3X7KbA,
.container-ZMc96U.themed-Hp1KC_,
.header-3OsQeK,
.searchBar-zdmu7v,
.scroller-2LSbBU,
.searchBar-3TnChZ,
.peopleColumn-1wMU14,
.container-3u6dG-,
.scroller-9moviB,
.nowPlayingColumn-1eCBCN,
.header-2V-4Sw,
.contentRegion-3HkfJJ {
border-color: var(--dracula-current-line) !important;
border-style: solid !important;
}
/* Settings Content Pane */
.contentRegion-3HkfJJ {
border-width: 0 0 0 1px !important;
}
/* Chat */
.scroller-kQBbkU {
border-width: 1px 1px 0 1px !important;
}
/* Message Box */
.form-3gdLxP {
border-width: 0 1px 1px !important;
}
/* Member List */
.members-3WRCEx {
border-width: 1px 1px 1px 0 !important;
}
/* Channel List */
.scroller-1ox3I2 {
border-width: 1px 0 0 0 !important;
}
/* User Area */
.panels-3wFtMD {
border-width: 1px 0 1px 0 !important;
}
/* Guild List */
.scroller-3X7KbA {
border-width: 1px !important;
}
/* Channel Header */
.container-ZMc96U.themed-Hp1KC_ {
border-width: 1px 1px 0 0 !important;
}
/* Guild Header */
.header-3OsQeK {
border-width: 1px 0 0 0 !important;
}
/* Search Bar */
.searchBar-zdmu7v {
border-width: 1px !important;
}
.searchBar-3TnChZ {
border-width: 1px 0 0 0 !important;
}
/* People, Game Library, Nitro */
.peopleColumn-1wMU14,
.container-3u6dG-,
.scroller-9moviB {
border-width: 1px !important;
}
/* Now Playing Column */
.nowPlayingColumn-1eCBCN {
border-width: 1px 1px 1px 0 !important;
}
/* Pinned Message Box*/
.header-1w9Q93{
background-color: var(--dracula-background);
}
.messagesPopout-eVzQcI{
background-color: var(--dracula-background-alt);
}
.messageGroupWrapper-1jf_7C{
background-color: var(--dracula-background);
}
/* Create DM Popout */
.popout-3gby1q {
background-color: var(--dracula-background);
}
/* Search field */
.searchBarComponent-18D6hD {
background-color: var(--dracula-background-alt);
}
/* Selected friend */
.friendSelected-3cwmD7 {
background-color: var(--dracula-selection);
}
/* Added to the list */
.anchor-1MIwyf {
background-color: var(--dracula-background);
}
/* Inbox Popout */
.header-145e10, .header-1w9Q93 {
background-color: var(--dracula-background);
}
/* Active Tab selected text */
.active-1grPyy {
background-color: var(--dracula-background-alt);
}
/* Popout container */
.messagesPopout-eVzQcI {
background-color: var(--dracula-background-alt);
}
/* Channel Header */
.channelHeader-DFRX8q{
background-color: var(--dracula-background-alt);
}
/* List element */
.container-iA3Qrz {
background-color: var(--dracula-background-alt);
}
/* Message Content */
.messageContainer-3VTXBC {
background-color: var(--dracula-background);
}
/* Unread list */
.scroller-145h9c {
background-color: var(--dracula-background-alt);
}
/* Unread messages */
.messages-23can0 {
background-color: var(--dracula-background);
}
/* For you tab */
.container-1A0qQO {
background-color: var(--dracula-background-alt);
}
/* Syntax Highlighing in Code Blocks*/
code {
color: var(--dracula-foreground) !important;
}
span.hljs-built_in {
color: var(--dracula-purple) !important;
}
span.hljs-keyword {
color: var(--dracula-pink) !important;
}
span.hljs-title {
color: var(--dracula-cyan) !important;
}
span.hljs-attr {
color: var(--dracula-foreground) !important;
}
span.hljs-string {
color: var(--dracula-yellow) !important;
}
span.hljs-number {
color: var(--dracula-purple) !important;
}
span.hljs-symbol {
color: var(--dracula-orange) !important;
}
span.hljs-meta {
color: var(--dracula-foreground) !important;
}
span.hljs-meta-keyword {
color: var(--dracula-pink) !important;
}
span.hljs-meta-string {
color: var(--dracula-orange) !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment