midnight.theme.css

/**
 * @name midnight
 * @description a dark, customizable discord theme.
 * @author refact0r
 * @version 2.1.1
 * @invite nz87hXyvcy
 * @website https://github.com/refact0r/midnight-discord
 * @source https://github.com/refact0r/midnight-discord/blob/master/themes/midnight.theme.css
 * @authorId 508863359777505290
 * @authorLink https://www.refact0r.dev
*/

/* import theme modules */
@import url("https://refact0r.github.io/midnight-discord/build/midnight.css");

body {
  /* font options */
  --font: "figtree"; /* change to '' for default discord font */
  --code-font: "CaskaydiaCove NF"; /* change to '' for default discord font */
  font-weight: 400; /* normal text font weight. DOES NOT AFFECT BOLD TEXT */

  /* sizes */
  --gap: 4px; /* spacing between panels */
  --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */
  --border-thickness: 1px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */

  /* animation/transition options */
  --animations: off; /* turn off to disable all midnight animations/transitions */
  --list-item-transition: 0.2s ease; /* transition for list items */
  --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */
  --border-hover-transition: 0.2s ease; /* transition for borders when hovered */

  /* top bar options */
  --top-bar-height: var(
    36px
  ); /* height of the top bar (discord default is 36px, old discord style is 24px, var(--gap) recommended if button position is set to titlebar) */
  --top-bar-button-position: off; /* off: default position, hide: hide buttons completely, serverlist: move inbox button to server list, titlebar: move inbox button to channel titlebar (will hide title) */
  --top-bar-title-position: hide; /* off: default centered position, hide: hide title completely, left: left align title (like old discord) */
  --subtle-top-bar-title: off; /* off: default, on: hide the icon and use subtle text color (like old discord) */

  /* window controls */
  --custom-window-controls: on; /* off: default window controls, on: custom window controls */
  --window-control-size: 14px; /* size of custom window controls */

  /* dms button options */
  --custom-dms-icon: custom; /* off: use default discord icon, hide: remove icon entirely, custom: use custom icon */
  --dms-icon-svg-url: url("https://refact0r.github.io/midnight-discord/assets/Font_Awesome_5_solid_moon.svg"); /* icon svg url. MUST BE A SVG. */
  --dms-icon-svg-size: 90%; /* size of the svg (css mask-size property) */
  --dms-icon-color-before: var(--icon-subtle); /* normal icon color */
  --dms-icon-color-after: var(
    --white
  ); /* icon color when button is hovered/selected */
  --custom-dms-background: off; /* off to disable, image to use a background image (must set url variable below), color to use a custom color/gradient */
  --dms-background-image-url: url(""); /* url of the background image */
  --dms-background-image-size: cover; /* size of the background image (css background-size property) */
  --dms-background-color: linear-gradient(
    70deg,
    var(--blue-2),
    var(--purple-2),
    var(--red-2)
  ); /* fixed color/gradient (css background property) */

  /* background image options */
  --background-image: off; /* off: no background image, on: enable background image (must set url variable below) */
  --background-image-url: url(""); /* url of the background image */

  /* transparency/blur options */
  /* NOTE: TO USE TRANSPARENCY/BLUR, YOU MUST HAVE TRANSPARENT BG COLORS. FOR EXAMPLE: --bg-4: hsla(220, 15%, 10%, 0.7); */
  --transparency-tweaks: on; /* off: no changes, on: remove some elements for better transparency */
  --remove-bg-layer: off; /* off: no changes, on: remove the base --bg-3 layer for use with window transparency (WILL OVERRIDE BACKGROUND IMAGE) */
  --panel-blur: off; /* off: no changes, on: blur the background of panels */
  --blur-amount: 12px; /* amount of blur */
  --bg-floating: var(
    --bg-3
  ); /* set this to a more opaque color if floating panels look too transparent. only applies if panel blur is on  */

  /* chatbar options */
  --custom-chatbar: off; /* off: default chatbar, aligned: chatbar aligned with the user panel, separated: chatbar separated from chat */
  --chatbar-height: 47px; /* height of the chatbar (52px by default, 47px recommended for aligned, 56px recommended for separated) */
  --chatbar-padding: 8px; /* padding of the chatbar. only applies in aligned mode. */

  /* other options */
  --small-user-panel: off; /* off: default user panel, on: smaller user panel like in old discord */
}

/* color options */
:root {
  --colors: on; /* off: discord default colors, on: midnight custom colors */

  /* text colors */
  --text-0: hsl(from var(--bg-3) h s l / 100%); /* text on colored elements */
  --text-1: #eceff4; /* other normally white text */
  --text-2: #e5e9f0; /* headings and important text */
  --text-3: #d8dee9; /* normal text */
  --text-4: hsl(220, 20%, 67%); /* icon buttons and channels */
  --text-5: #4c566a; /* muted channels/chats and timestamps */

  /* background and dark colors */
  --bg-1: #434c5e; /* dark buttons when clicked */
  --bg-2: #3b4252; /* dark buttons */
  --bg-3: #272b35; /* spacing, secondary elements */
  --bg-4: #2e3440; /* main background color */
  --hover: hsla(220, 20%, 50%, 0.1); /* channels and buttons when hovered */
  --active: hsla(
    220,
    20%,
    50%,
    0.2
  ); /* channels and buttons when clicked or selected */
  --active-2: hsla(
    220,
    20%,
    50%,
    0.3
  ); /* extra state for transparent buttons */
  --message-hover: hsla(0, 0%, 0%, 0.1); /* messages when hovered */

  /* accent colors */
  --accent-1: var(--blue-1); /* links and other accent text */
  --accent-2: var(--blue-2); /* small accent elements */
  --accent-3: var(--blue-3); /* accent buttons */
  --accent-4: var(--blue-4); /* accent buttons when hovered */
  --accent-5: var(--blue-5); /* accent buttons when clicked */
  --accent-new: var(
    --accent-2
  ); /* stuff that's normally red like mute/deafen buttons */
  --mention: linear-gradient(
    to right,
    color-mix(in hsl, var(--accent-2), transparent 90%) 40%,
    transparent
  ); /* background of messages that mention you */
  --mention-hover: linear-gradient(
    to right,
    color-mix(in hsl, var(--accent-2), transparent 95%) 40%,
    transparent
  ); /* background of messages that mention you when hovered */
  --reply: linear-gradient(
    to right,
    color-mix(in hsl, var(--text-3), transparent 90%) 40%,
    transparent
  ); /* background of messages that reply to you */
  --reply-hover: linear-gradient(
    to right,
    color-mix(in hsl, var(--text-3), transparent 95%) 40%,
    transparent
  ); /* background of messages that reply to you when hovered */

  /* status indicator colors */
  --online: var(--green-2); /* change to #43a25a for default */
  --dnd: var(--red-2); /* change to #d83a42 for default */
  --idle: var(--yellow-2); /* change to #ca9654 for default */
  --streaming: var(--purple-2); /* change to #593695  for default */
  --offline: var(--text-4); /* change to #83838b for default offline color */

  /* border colors */
  --border-light: hsla(from var(--blue-5) h s l / 50%); /* light border color */
  --border-hover: var(--border-light);
  --border: hsla(from var(--blue-3) h s l / 37.5%); /* normal border color */
  --button-border: hsl(0, 0%, 100%, 0.1); /* neutral border color of buttons */

  /* base colors */
  --red-1: hsl(354, 42%, 61%);
  --red-2: #bf616a;
  --red-3: #bf616a;
  --red-4: hsl(354, 42%, 51%);
  --red-5: hsl(354, 42%, 46%);

  --green-1: hsl(92, 28%, 70%);
  --green-2: #a3be8c;
  --green-3: #a3be8c;
  --green-4: hsl(92, 28%, 60%);
  --green-5: hsl(92, 28%, 55%);

  --blue-1: hsl(193, 43%, 72%);
  --blue-2: #88c0d0;
  --blue-3: #88c0d0;
  --blue-4: hsl(193, 43%, 62%);
  --blue-5: hsl(193, 43%, 57%);

  --yellow-1: hsl(40, 71%, 78%);
  --yellow-2: #ebcb8b;
  --yellow-3: #ebcb8b;
  --yellow-4: hsl(40, 71%, 68%);
  --yellow-5: hsl(40, 71%, 63%);

  --purple-1: hsl(311, 20%, 68%);
  --purple-2: #b48ead;
  --purple-3: #b48ead;
  --purple-4: hsl(311, 20%, 58%);
  --purple-5: hsl(311, 20%, 53%);
}

.visual-refresh #app-mount {
  /* extra other colors that need to be changed */
  --button-filled-brand-text: hsl(from var(--bg-4) h s l / 100%) !important;
  /* fix unread bar being unreadable for some unknown reason */
  [class*="unread_"] > [class^="text__"] {
    color: #ccc;
  }

  /* move the unread bar down (why the hell is it in the middle of nowhere) */
  .unreadBottom__629e4 {
    bottom: 0 !important;
  }

  /* stupid width under the channels */
  [aria-label="Favorites (server)"] {
    margin-bottom: -105px !important;
  }

  .visual-refresh ::placeholder {
    color: var(--text-4);
  }

  .content_f75fb0 > .membersWrap_c8ffbb {
    overflow: visible !important;
  }

  .wrapper__44df5 {
    z-index: 0;
  }

  .jumpToPresentBar__0f481 > .button_a22cb0 {
    color: black;
  }
  /* fix favourites v2 */
  .modeSelected__2ea32 .iconWithGuildIcon__2ea32,
  .modeSelected__2ea32:hover .iconWithGuildIcon__2ea32 {
    color: var(--text-0);
  }
  /* search area fixes */
  .toolbar__9293f {
    gap: 0;
    > .search__49676 {
      margin: 0;
    }
  }
  .search_c322aa:not(.open_c322aa) .searchBar_c322aa {
    width: unset;
    background: none;
    border: none;
    > .DraftEditor-root {
      width: 32px;
      > .public-DraftEditorPlaceholder-root {
        color: transparent !important;
      }
    }
    > .icon_c322aa {
      width: 32px;
      position: absolute;
      pointer-events: none;
      transform: scale(1.3) translateY(-6%);
    }
  }
  /* codeblock shiki fix */
  .vc-shiki-container {
    background: hsla(from var(--background-base-lowest) h s l / 25%);
    .vc-shiki-root {
      background-color: transparent !important;
    }
  }

  .attachWrapper__0923f {
    padding: 8px var(--space-xs);
  }
  /* search results fix */
  .searchResultsWrap_a98f3b {
    border: var(--border-thickness) solid var(--border);
    border-radius: var(--radius-lg);
    margin-left: var(--gap)
  }
  .postEnrollmentBackground__14e2c,
  .postEnrollmentBackground__24e2c  {
    border-radius: var(--radius-lg);
  }
  .wrapper__0d616 {
    border-radius: var(--radius-lg)
  }
  /* codeblock fix */
  .textContainer__4d95d {
    scrollbar-color: var(--bg-3) transparent;
    scrollbar-width: thin;
  }
  /* vc main fix */
  .chat_ee72fa:before {
    display: none !important
  }
  /* another border bottom fix */
  .container__9293f.title_f75fb0 {
    border-bottom: none !important;
  }
  .chat_f75fb0 > .wrapper_cb9592 {
    margin-bottom: var(--gap)
  }
  /* vc icon in server fix */
  .iconBadge__650eb:not(.isCurrentUserConnected__650eb) {
    color: var(--text-1)
  }
  /* border radius problem fix */
  .pageBody__41ed7 {
    background: transparent
  }
}
/* vc window fix */
#app-mount [data-popout-root="true"] {
  .chatContent_f75fb0 {
    margin: var(--gap);
    margin-left: 0;
  }
  .container__9293f {
    margin: var(--gap);
    width: calc(100% - var(--gap));
    margin-bottom: 0;
    margin-top: calc(1 * var(--gap));
    border-radius: var(--radius-md);
    margin-left: 0;
  }
  .chat_ee72fa::before {
    display: none !important
  }
}