"Dracula At Night" for Discord

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;
}