|
2 | 2 | @import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap'); |
3 | 3 | @import url('https://fonts.cdnfonts.com/css/asciid'); |
4 | 4 |
|
| 5 | +body { |
| 6 | + /* font, change to '' for default discord font */ |
| 7 | + --font: 'DM Mono'; /* change to '' for default discord font */ |
| 8 | + --code-font: 'DM Mono'; /* change to '' for default discord font */ |
| 9 | + font-weight: 300; /* text font weight. 300 is light, 400 is normal. DOES NOT AFFECT BOLD TEXT */ |
| 10 | + letter-spacing: -0.05ch; /* decreases letter spacing for better readability. recommended on monospace fonts.*/ |
| 11 | + |
| 12 | + /* sizes */ |
| 13 | + --gap: 12px; /* spacing between panels */ |
| 14 | + --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */ |
| 15 | + --border-thickness: 2px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */ |
| 16 | + --border-hover-transition: 0.2s ease; /* transition for borders when hovered */ |
| 17 | + |
| 18 | + /* animation/transition options */ |
| 19 | + --animations: on; /* off: disable animations/transitions, on: enable animations/transitions */ |
| 20 | + --list-item-transition: 0.2s ease; /* transition for list items */ |
| 21 | + --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */ |
| 22 | + |
| 23 | + /* top bar options */ |
| 24 | + --top-bar-height: var(--gap); /* height of the top bar (discord default is 36px, old discord style is 24px, var(--gap) recommended if button position is set to titlebar) */ |
| 25 | + --top-bar-button-position: titlebar; /* off: default position, hide: hide buttons completely, serverlist: move inbox button to server list, titlebar: move inbox button to channel titlebar (will hide title) */ |
| 26 | + --top-bar-title-position: off; /* off: default centered position, hide: hide title completely, left: left align title (like old discord) */ |
| 27 | + --subtle-top-bar-title: off; /* off: default, on: hide the icon and use subtle text color (like old discord) */ |
| 28 | + |
| 29 | + /* window controls */ |
| 30 | + --custom-window-controls: off; /* off: default window controls, on: custom window controls */ |
| 31 | + --window-control-size: 14px; /* size of custom window controls */ |
| 32 | + |
| 33 | + /* dms button options */ |
| 34 | + --custom-dms-icon: off; /* off: use default discord icon, hide: remove icon entirely, custom: use custom icon */ |
| 35 | + --dms-icon-svg-url: url(''); /* icon svg url. MUST BE A SVG. */ |
| 36 | + --dms-icon-svg-size: 90%; /* size of the svg (css mask-size property) */ |
| 37 | + --dms-icon-color-before: var(--icon-secondary); /* normal icon color */ |
| 38 | + --dms-icon-color-after: var(--white); /* icon color when button is hovered/selected */ |
| 39 | + --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 */ |
| 40 | + --dms-background-image-url: url(''); /* url of the background image */ |
| 41 | + --dms-background-image-size: cover; /* size of the background image (css background-size property) */ |
| 42 | + --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* fixed color/gradient (css background property) */ |
| 43 | + |
| 44 | + /* background image options */ |
| 45 | + --background-image: off; /* off: no background image, on: enable background image (must set url variable below) */ |
| 46 | + --background-image-url: url(''); /* url of the background image */ |
| 47 | + |
| 48 | + /* transparency/blur options */ |
| 49 | + /* NOTE: TO USE TRANSPARENCY/BLUR, YOU MUST HAVE TRANSPARENT BG COLORS. FOR EXAMPLE: --bg-4: hsla(220, 15%, 10%, 0.7); */ |
| 50 | + --transparency-tweaks: off; /* off: no changes, on: remove some elements for better transparency */ |
| 51 | + --remove-bg-layer: off; /* off: no changes, on: remove the base --bg-3 layer for use with window transparency (WILL OVERRIDE BACKGROUND IMAGE) */ |
| 52 | + --panel-blur: off; /* off: no changes, on: blur the background of panels */ |
| 53 | + --blur-amount: 12px; /* amount of blur */ |
| 54 | + --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 */ |
| 55 | + |
| 56 | + /* other options */ |
| 57 | + --small-user-panel: on; /* off: default user panel, on: smaller user panel like in old discord */ |
| 58 | + |
| 59 | + /* unrounding options */ |
| 60 | + --unrounding: on; /* off: default, on: remove rounded corners from panels */ |
| 61 | + |
| 62 | + /* styling options */ |
| 63 | + --custom-spotify-bar: on; /* off: default, on: custom text-like spotify progress bar */ |
| 64 | + --ascii-titles: on; /* off: default, on: use ascii font for titles at the start of a channel */ |
| 65 | + --ascii-loader: system24; /* off: default, system24: use system24 ascii loader, cats: use cats loader */ |
| 66 | + |
| 67 | + /* panel labels */ |
| 68 | + --panel-labels: on; /* off: default, on: add labels to panels */ |
| 69 | + --label-color: var(--text-muted); /* color of labels */ |
| 70 | + --label-font-weight: 500; /* font weight of labels */ |
| 71 | +} |
| 72 | + |
| 73 | +/* color options */ |
| 74 | +:root { |
| 75 | + --colors: on; /* off: discord default colors, on: midnight custom colors */ |
| 76 | + |
| 77 | + /* text colors */ |
| 78 | + --text-0: var(--bg-4); /* text on colored elements */ |
| 79 | + --text-1: oklch(95% 0 0); /* other normally white text */ |
| 80 | + --text-2: oklch(85% 0 0); /* headings and important text */ |
| 81 | + --text-3: oklch(75% 0 0); /* normal text */ |
| 82 | + --text-4: oklch(60% 0 0); /* icon buttons and channels */ |
| 83 | + --text-5: oklch(40% 0 0); /* muted channels/chats and timestamps */ |
| 84 | + |
| 85 | + /* background and dark colors */ |
| 86 | + --bg-1: oklch(31% 0 0); /* dark buttons when clicked */ |
| 87 | + --bg-2: oklch(27% 0 0); /* dark buttons */ |
| 88 | + --bg-3: oklch(23% 0 0); /* spacing, secondary elements */ |
| 89 | + --bg-4: oklch(19% 0 0); /* main background color */ |
| 90 | + --hover: oklch(54% 0 0 / 0.1); /* channels and buttons when hovered */ |
| 91 | + --active: oklch(54% 0 0 / 0.2); /* channels and buttons when clicked or selected */ |
| 92 | + --active-2: oklch(54% 0 0 / 0.3); /* extra state for transparent buttons */ |
| 93 | + --message-hover: var(--hover); /* messages when hovered */ |
| 94 | + |
| 95 | + /* accent colors */ |
| 96 | + --accent-1: var(--purple-1); /* links and other accent text */ |
| 97 | + --accent-2: var(--purple-2); /* small accent elements */ |
| 98 | + --accent-3: var(--purple-3); /* accent buttons */ |
| 99 | + --accent-4: var(--purple-4); /* accent buttons when hovered */ |
| 100 | + --accent-5: var(--purple-5); /* accent buttons when clicked */ |
| 101 | + --accent-new: var(--red-2); /* stuff that's normally red like mute/deafen buttons */ |
| 102 | + --mention: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 90%) 40%, transparent); /* background of messages that mention you */ |
| 103 | + --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 */ |
| 104 | + --reply: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 90%) 40%, transparent); /* background of messages that reply to you */ |
| 105 | + --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 */ |
| 106 | + |
| 107 | + /* status indicator colors */ |
| 108 | + --online: var(--green-2); /* change to #40a258 for default */ |
| 109 | + --dnd: var(--red-2); /* change to #d83a41 for default */ |
| 110 | + --idle: var(--yellow-2); /* change to #cc954c for default */ |
| 111 | + --streaming: var(--purple-2); /* change to ##9147ff for default */ |
| 112 | + --offline: var(--text-4); /* change to #82838b for default offline color */ |
| 113 | + |
| 114 | + /* border colors */ |
| 115 | + --border-light: var(--hover); /* general light border color */ |
| 116 | + --border: var(--active); /* general normal border color */ |
| 117 | + --border-hover: var(--accent-2); /* border color of panels when hovered */ |
| 118 | + --button-border: hsl(220, 0%, 100%, 0.1); /* neutral border color of buttons */ |
| 119 | + |
| 120 | + /* base colors */ |
| 121 | + --red-1: oklch(75% 0.13 0); |
| 122 | + --red-2: oklch(70% 0.13 0); |
| 123 | + --red-3: oklch(65% 0.13 0); |
| 124 | + --red-4: oklch(60% 0.13 0); |
| 125 | + --red-5: oklch(55% 0.13 0); |
| 126 | + |
| 127 | + --green-1: oklch(75% 0.12 170); |
| 128 | + --green-2: oklch(70% 0.12 170); |
| 129 | + --green-3: oklch(65% 0.12 170); |
| 130 | + --green-4: oklch(60% 0.12 170); |
| 131 | + --green-5: oklch(55% 0.12 160); |
| 132 | + |
| 133 | + --blue-1: oklch(75% 0.11 215); |
| 134 | + --blue-2: oklch(70% 0.11 215); |
| 135 | + --blue-3: oklch(65% 0.11 215); |
| 136 | + --blue-4: oklch(60% 0.11 215); |
| 137 | + --blue-5: oklch(55% 0.11 215); |
| 138 | + |
| 139 | + --yellow-1: oklch(80% 0.12 90); |
| 140 | + --yellow-2: oklch(75% 0.12 90); |
| 141 | + --yellow-3: oklch(70% 0.12 90); |
| 142 | + --yellow-4: oklch(65% 0.12 90); |
| 143 | + --yellow-5: oklch(60% 0.12 90); |
| 144 | + |
| 145 | + --purple-1: oklch(75% 0.12 310); |
| 146 | + --purple-2: oklch(70% 0.12 310); |
| 147 | + --purple-3: oklch(65% 0.12 310); |
| 148 | + --purple-4: oklch(60% 0.12 310); |
| 149 | + --purple-5: oklch(55% 0.12 310); |
| 150 | +} |
| 151 | + |
5 | 152 | body { |
6 | 153 | --custom-chatbar: separated !important; /* off: default chatbar, aligned: chatbar aligned with the user panel, separated: chatbar separated from chat */ |
7 | 154 | --chatbar-height: 56px !important; /* height of the chatbar (52px by default, 47px recommended for aligned, 56px recommended for separated) */ |
|
0 commit comments