|
| 1 | +/** |
| 2 | + * @name system24 |
| 3 | + * @description A tui-style discord theme. |
| 4 | + * @author refact0r |
| 5 | + * @version 1.0.0 |
| 6 | + * @invite nz87hXyvcy |
| 7 | + * @website https://github.com/refact0r/system24 |
| 8 | + * @source https://github.com/refact0r/system24/blob/master/system24.theme.css |
| 9 | + * @authorId 508863359777505290 |
| 10 | + * @authorLink https://www.refact0r.dev |
| 11 | +*/ |
| 12 | + |
| 13 | +/* import theme modules */ |
| 14 | +@import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */ |
| 15 | +@import url('https://refact0r.github.io/system24/src/unrounding.css'); /* gets rid of all rounded corners. remove if you want rounded corners. */ |
| 16 | + |
| 17 | +/* customize things here */ |
| 18 | +:root { |
| 19 | + --font: 'DM Mono'; /* UI font name. it must be installed on your system. */ |
| 20 | + letter-spacing: 0; /* decreases letter spacing for better readability. */ |
| 21 | + font-weight: 400; /* UI font weight. */ |
| 22 | + --label-font-weight: 400; /* font weight for panel labels. */ |
| 23 | + --corner-text: 'system24'; /* custom text to display in the corner. only works on windows. */ |
| 24 | + --pad: 16px; /* padding between panels. */ |
| 25 | + --txt-pad: 10px; /* padding inside panels to prevent labels from clipping */ |
| 26 | + --panel-roundness: 0px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */ |
| 27 | + |
| 28 | + /* background colors */ |
| 29 | + --bg-0: #191724; /* main background color. */ |
| 30 | + --bg-1: #1f1d2e; /* background color for secondary elements like code blocks, embeds, etc. */ |
| 31 | + --bg-2: #26233a; /* color of neutral buttons. */ |
| 32 | + --bg-3: #403d52; /* color of neutral buttons when hovered. */ |
| 33 | + |
| 34 | + /* state modifiers */ |
| 35 | + --hover: color-mix(in srgb, var(--bg-3), transparent 60%); /* color of hovered elements. */ |
| 36 | + --active: color-mix(in srgb, var(--bg-3), transparent 80%); /* color of elements when clicked. */ |
| 37 | + --selected: var(--active); /* color of selected elements. */ |
| 38 | + |
| 39 | + /* text colors */ |
| 40 | + --txt-dark: var(--bg-0); /* color of dark text on colored backgrounds. */ |
| 41 | + --txt-link: var(--rose); /* color of links. */ |
| 42 | + --txt-0: #ffffff; /* color of bright/white text. */ |
| 43 | + --txt-1: #e0def4; /* main text color. */ |
| 44 | + --txt-2: #908caa; /* color of secondary text like channel list. */ |
| 45 | + --txt-3: #6e6a86; /* color of muted text. */ |
| 46 | + |
| 47 | + /* accent colors */ |
| 48 | + --acc-0: var(--rose); /* main accent color. */ |
| 49 | + --acc-1: var(--rose-1); /* color of accent buttons when hovered. */ |
| 50 | + --acc-2: var(--rose-2); /* color of accent buttons when clicked. */ |
| 51 | + |
| 52 | + /* borders */ |
| 53 | + --border-width: 2px; /* panel border thickness. */ |
| 54 | + --border-color: var(--bg-2); /* panel border color. */ |
| 55 | + --border-hover-color: var(--acc-0); /* panel border color when hovered. */ |
| 56 | + --border-transition: 0.2s ease; /* panel border transition. */ |
| 57 | + |
| 58 | + /* status dot colors */ |
| 59 | + --online-dot: var(--green); /* color of online dot. */ |
| 60 | + --dnd-dot: var(--pink); /* color of do not disturb dot. */ |
| 61 | + --idle-dot: var(--yellow); /* color of idle dot. */ |
| 62 | + --streaming-dot: var(--purple); /* color of streaming dot. */ |
| 63 | + |
| 64 | + /* mention/ping and message colors */ |
| 65 | + --mention-txt: var(--acc-0); /* color of mention text. */ |
| 66 | + --mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); /* background highlight of mention text. */ |
| 67 | + --mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); /* overlay color of messages that mention you. */ |
| 68 | + --mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); /* overlay color of messages that mention you when hovered. */ |
| 69 | + --reply-overlay: var(--active); /* overlay color of message you are replying to. */ |
| 70 | + --reply-hover-overlay: var(--hover); /* overlay color of message you are replying to when hovered. */ |
| 71 | + |
| 72 | + /* color shades */ |
| 73 | + --pink: oklch(69.77% 0.1565 4.22); |
| 74 | + --pink-1: oklch(59.77% 0.1565 4.22); |
| 75 | + --pink-2: oklch(49.77% 0.1565 4.22); |
| 76 | + --purple: oklch(77.6% 0.0945 304.99); |
| 77 | + --purple-1: oklch(67.6% 0.0945 304.99); |
| 78 | + --purple-2: oklch(57.6% 0.0945 304.99); |
| 79 | + --cyan: oklch(52.77% 0.0793 227.72); |
| 80 | + --yellow: oklch(84.29% 0.11 74.6); |
| 81 | + --green: oklch(82.19% 0.0543 209.56); |
| 82 | + --green-1: oklch(72.19% 0.0543 209.56); |
| 83 | + --green-2: oklch(62.19% 0.0543 209.56); |
| 84 | + --rose: oklch(83.63% 0.0544 21.14); |
| 85 | + --rose-1: oklch(73.63% 0.0544 21.14); |
| 86 | + --rose-2: oklch(63.63% 0.0544 21.14); |
| 87 | +} |
0 commit comments