forked from ashtrath/Tokyo-Night
-
Notifications
You must be signed in to change notification settings - Fork 0
/
tokyo-night.theme.css
171 lines (140 loc) · 5.96 KB
/
tokyo-night.theme.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
/**
* @name Tokyo Night
* @description Discord Port of Visual Studio Code Theme
* @author Ashtrath
* @version 2.0.2
* @authorId 2354831939099688962
*/
/* DONT TOUCH THIS!!! */
@import url("https://dyzean.github.io/Tokyo-Night/main.css");
/* Read this before editing stuff!!!
*
* > To comment or uncomment a line you need to put those "/" and "*" characters as you can see at the beginning and ending of my comments.
* (You don't need to put a * at each line like I do, it's just for readability). See more here : https://developer.mozilla.org/en-US/docs/Web/CSS/Comments
*
* > You can play with the values and see how it goes, don't delete "px" after the value if you don't have knowledges in CSS.
*
* > To change the colors, replace the HEX code with the one you picked here : https://htmlcolorcodes.com
*/
/* ====== Optional Addons ====== */
@import url("https://dyzean.github.io/Tokyo-Night/addons/revert-rebrand.css");
@import url("https://nyri4.github.io/Discolored/main.css");
/* VSCode User Area, get Visual Studio like user area (Enabled by default)
note: this addons doesn't works well with Compact Mode addon,
please disable this when using Compact Mode addon */
@import url("https://dyzean.github.io/Tokyo-Night/addons/vscode-user-area.css");
/* Syntax Highlight, get hljs styling with Tokyo Night scheme (Enabled by default) */
@import url("https://dyzean.github.io/Tokyo-Night/addons/syntax-highlight.css");
/* Username Background, get colorful background behind username on chat, works best with Monospace addon. (Disabled by default) */
/* @import url("https://dyzean.github.io/Tokyo-Night/addons/username-background.css"); */
/* Mac Like Titlebar (windows only), get mac style titlebar on windows client (Enabled by default) */
@import url("https://dyzean.github.io/Tokyo-Night/addons/mac-titlebar.css");
/* Compact Mode, hide some UI part on specific windows size,
<920px Channel sidebar and member list get hidden, <600px Chat window only. (Disabled by default) */
/* @import url("https://dyzean.github.io/Tokyo-Night/addons/compact-mode.css"); */
/* Monospace, use monospaced font (JetBrains Mono) instead the default one (Disabled by default) */
/* @import url("https://dyzean.github.io/Tokyo-Night/addons/monospace-fonts.css"); */
/* Square Avatar, get square avatar on chat memberlist and user area (Disabled by default) */
/* @import url("https://dyzean.github.io/Tokyo-Night/addons/square-avatar.css"); */
/* ==== Discord Variables ==== */
.theme-dark { /* Dark Mode */
/* Header Color */
--header-primary: var(--text-normal);
--header-secondary: var(--text-muted);
/* Text Color */
--text-normal: #b1bae6;
--text-muted: #565f89;
--interactive-normal: #5f647e;
--interactive-hover: #a2a6c2;
--interactive-active: #b5bad1;
--interactive-muted: #55576b;
/* Background Color */
--background-primary: #1a1b26;
--background-secondary: #171722;
--background-secondary-alt: #13131a;
--background-tertiary: #16161e;
--background-tertiary-alt: var(--background-secondary-alt);
--background-accent: #434461;
--background-floating: #161620;
--background-modifier-hover: #212331c0;
--background-modifier-active: #282a3680;
--background-modifier-selected: #24263171;
--background-modifier-accent: #1e1e29;
--background-mentioned: #252836;
--border-mentioned: #474c64;
--background-mentioned-hover: #2f3344;
--accent-color: #7aa2f7;
/* Folder Color */
--folder-color: #202332d0;
--folder-color-light: #2f3342d0;
/* Scrollbars Color */
--scrollbar-thin-thumb: transparent;
--scrollbar-thin-track: transparent;
--scrollbar-auto-thumb: #2b2b46af;
--scrollbar-auto-thumb-hover: #27273d85;
--scrollba-auto-track: transparent;
--scrollbar-auto-scrollbar-color-thumb: var(--scrollbar-auto-thumb);
--scrollbar-auto-scrollbar-color-track: var(--scrollbar-auto-track);
/* Chat Box Color */
--channeltextarea-background: var(--background-secondary);
--channeltextarea-background-hover: var(--background-tertiary);
/* Square avatar addons */
--avatar-roundess: 5px;
/* Mac Titlebar addons */
--close-button-color: #e92a2ade;
--maximize-button-color: #f7bc1bde;
--minimize-button-color: #12db33de;
}
.theme-light { /* Light Mode */
/* Header Color */
--header-primary: var(--text-normal);
--header-secondary: var(--text-muted);
/* Text Color */
--text-normal: #2e3338;
--text-muted: #747f8d;
--interactive-normal: #4c505e;
--interactive-hover: #404350;
--interactive-active: #373a44;
--interactive-muted: #77797c;
/* Background Color */
--background-primary: #d5d6db;
--background-secondary: #cecfd4;
--background-secondary-alt: #b6b7bd;
--background-tertiary: #c5c6cc;
--background-tertiary-alt: #bbbbc2;
--background-accent: #9ca3bb;
--background-floating: #c2c2c9;
--background-mentioned: #c4c7da;
--background-modifier-hover: #2c2a2a25;
--background-modifier-active: #5a525229;
--background-modifier-selected: #555e693d;
--background-modifier-accent: #06060714;
--border-mentioned: #a9afcf;
--background-mentioned-hover: #cfd2e9;
--accent-color: #365aaa;
/* Folder Color */
--folder-color: #a7a6a6d0;
--folder-color-light: #afafafd0;
/* Input Box Color */
--input-box-bg: #c2c2c7;
--input-box-border: #b3b4b8;
--input-box-border-focus: #959699;
/* Scrollbars Color */
--scrollbar-thin-thumb: transparent;
--scrollbar-thin-track: transparent;
--scrollbar-auto-thumb: #a0a0a0af;
--scrollbar-auto-thumb-hover: #77777785;
--scrollbar-auto-track: transparent;
--scrollbar-auto-scrollbar-color-thumb: var(--scrollbar-auto-thumb);
--scrollbar-auto-scrollbar-color-track: var(--scrollbar-auto-track);
/* Chat Box Color */
--channeltextarea-background: var(--background-secondary);
--channeltextarea-background-hover: var(--background-tertiary);
/* Square avatar addons */
--avatar-roundess: 5px;
/* Mac Titlebar addons */
--close-button-color: #e92a2ade;
--maximize-button-color: #f7bc1bde;
--minimize-button-color: #12db33de;
--button-position: row;
}