Skip to content

Commit 3ba0922

Browse files
meroxdotdevmeroxdotdev
committed
chore: change dark mode colorscheme
1 parent 3743ac2 commit 3ba0922

File tree

1 file changed

+124
-125
lines changed

1 file changed

+124
-125
lines changed

‎_sass/themes/_dark.scss‎

Lines changed: 124 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -2,114 +2,114 @@
22
color-scheme: dark;
33

44
/* Framework color */
5-
--main-bg: rgb(27 27 30);
6-
--mask-bg: rgb(68 69 70);
7-
--main-border-color: rgb(44 45 45);
5+
--main-bg: #0d1117; /* Deep black with a slight blue tint, inspired by modern dark themes */
6+
--mask-bg: #161b22; /* Slightly lighter dark gray for overlays */
7+
--main-border-color: #21262d; /* Subtle gray for borders */
88

99
/* Common color */
10-
--text-color: rgb(175 176 177);
11-
--text-muted-color: #868686;
12-
--text-muted-highlight-color: #aeaeae;
13-
--heading-color: #cccccc;
14-
--label-color: #a7a7a7;
15-
--blockquote-border-color: rgb(66 66 66);
16-
--blockquote-text-color: #868686;
17-
--link-color: rgb(138 180 248);
18-
--link-underline-color: rgb(82 108 150);
19-
--button-bg: #1e1e1e;
20-
--btn-border-color: #2e2f31;
21-
--btn-backtotop-color: var(--text-color);
22-
--btn-backtotop-border-color: #212122;
23-
--card-header-bg: #292929;
24-
--checkbox-color: rgb(118 120 121);
25-
--checkbox-checked-color: var(--link-color);
26-
--img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%);
10+
--text-color: #c9d1d9; /* Light gray for body text, high readability */
11+
--text-muted-color: #8b949e; /* Muted gray for secondary text */
12+
--text-muted-highlight-color: #b3bac5; /* Slightly brighter for hover states */
13+
--heading-color: #e6edf3; /* Near-white for headings, high contrast */
14+
--label-color: #b3bac5; /* Light gray for labels */
15+
--blockquote-border-color: #30363d; /* Dark gray for blockquote borders */
16+
--blockquote-text-color: #8b949e; /* Muted gray for blockquote text */
17+
--link-color: #58a6ff; /* Vibrant blue for links, inspired by tech themes */
18+
--link-underline-color: #2f81f7; /* Darker blue for link underlines */
19+
--button-bg: #161b22; /* Dark gray for buttons */
20+
--btn-border-color: #30363d; /* Subtle border for buttons */
21+
--btn-backtotop-color: var(--text-color); /* Matches text color */
22+
--btn-backtotop-border-color: #21262d; /* Matches main border */
23+
--card-header-bg: #161b22; /* Consistent dark gray for card headers */
24+
--checkbox-color: #6e7681; /* Muted gray for checkboxes */
25+
--checkbox-checked-color: var(--link-color); /* Blue for checked state */
26+
--img-bg: radial-gradient(circle, #0d1117 0%, #161b22 100%); /* Darker gradient for images */
2727
--shimmer-bg: linear-gradient(
2828
90deg,
29-
rgb(255 255 255 / 0%) 0%,
30-
rgb(58 55 55 / 40%) 50%,
31-
rgb(255 255 255 / 0%) 100%
29+
rgba(255, 255, 255, 0) 0%,
30+
rgba(88, 166, 255, 0.2) 50%, /* Subtle blue shimmer */
31+
rgba(255, 255, 255, 0) 100%
3232
);
3333

3434
/* Sidebar */
35-
--site-title-color: #717070;
36-
--site-subtitle-color: #868686;
37-
--sidebar-bg: #1e1e1e;
38-
--sidebar-border-color: #292929;
39-
--sidebar-muted-color: #868686;
40-
--sidebar-active-color: rgb(255 255 255 / 95%);
41-
--sidebar-hover-bg: #262626;
42-
--sidebar-btn-bg: #232328;
43-
--sidebar-btn-color: #787878;
44-
--avatar-border-color: rgb(206 206 206 / 90%);
35+
--site-title-color: #c9d1d9; /* Light gray for site title */
36+
--site-subtitle-color: #8b949e; /* Muted for subtitle */
37+
--sidebar-bg: #0d1117; /* Matches main background */
38+
--sidebar-border-color: #21262d; /* Consistent border color */
39+
--sidebar-muted-color: #8b949e; /* Muted for sidebar text */
40+
--sidebar-active-color: #ffffff; /* Bright white for active states */
41+
--sidebar-hover-bg: #161b22; /* Slightly lighter hover state */
42+
--sidebar-btn-bg: #21262d; /* Dark gray for sidebar buttons */
43+
--sidebar-btn-color: #8b949e; /* Muted button text */
44+
--avatar-border-color: rgba(201, 209, 217, 0.9); /* Light gray for avatar borders */
4545

4646
/* Topbar */
47-
--topbar-bg: rgb(27 27 30 / 64%);
48-
--topbar-text-color: var(--text-color);
49-
--search-border-color: rgb(55 55 55);
50-
--search-icon-color: rgb(100 102 105);
51-
--input-focus-border-color: rgb(112 114 115);
47+
--topbar-bg: rgba(13, 17, 23, 0.8); /* Semi-transparent deep black */
48+
--topbar-text-color: var(--text-color); /* Matches body text */
49+
--search-border-color: #30363d; /* Dark gray for search borders */
50+
--search-icon-color: #6e7681; /* Muted gray for icons */
51+
--input-focus-border-color: #58a6ff; /* Blue for focused inputs */
5252

5353
/* Home page */
54-
--post-list-text-color: rgb(175 176 177);
55-
--btn-patinator-text-color: var(--text-color);
56-
--btn-paginator-hover-color: #2e2e2e;
54+
--post-list-text-color: #c9d1d9; /* Light gray for post lists */
55+
--btn-patinator-text-color: var(--text-color); /* Matches text color */
56+
--btn-paginator-hover-color: #21262d; /* Dark gray for hover */
5757

5858
/* Posts */
59-
--toc-highlight: rgb(116 178 243);
60-
--toc-popup-border-color: #373737;
61-
--tag-hover: rgb(43 56 62);
62-
--tb-odd-bg: #252526; /* odd rows of the posts' table */
63-
--tb-even-bg: rgb(31 31 34); /* even rows of the posts' table */
64-
--tb-border-color: var(--tb-odd-bg);
65-
--footnote-target-bg: rgb(63 81 181);
66-
--btn-share-color: #6c757d;
67-
--btn-share-hover-color: #bfc1ca;
68-
--card-bg: #1e1e1e;
69-
--card-hover-bg: #464d51;
70-
--card-shadow: rgb(21 21 21 / 72%) 0 6px 18px 0,
71-
rgb(137 135 135 / 24%) 0 0 0 1px;
72-
--kbd-wrap-color: #6a6a6a;
73-
--kbd-text-color: #d3d3d3;
74-
--kbd-bg-color: #242424;
75-
--prompt-text-color: rgb(216 212 212 / 75%);
76-
--prompt-tip-bg: rgb(22 60 36 / 64%);
77-
--prompt-tip-icon-color: rgb(15 164 15 / 81%);
78-
--prompt-info-bg: rgb(7 59 104 / 80%);
79-
--prompt-info-icon-color: #0075d1;
80-
--prompt-warning-bg: rgb(90 69 3 / 88%);
81-
--prompt-warning-icon-color: rgb(255 165 0 / 80%);
82-
--prompt-danger-bg: rgb(86 28 8 / 80%);
83-
--prompt-danger-icon-color: #cd0202;
59+
--toc-highlight: #58a6ff; /* Blue for table of contents highlights */
60+
--toc-popup-border-color: #30363d; /* Dark gray for TOC borders */
61+
--tag-hover: #21262d; /* Dark gray for tag hovers */
62+
--tb-odd-bg: #161b22; /* Dark gray for odd table rows */
63+
--tb-even-bg: #0d1117; /* Deeper black for even rows */
64+
--tb-border-color: var(--tb-odd-bg); /* Matches odd rows */
65+
--footnote-target-bg: #1f6feb; /* Darker blue for footnote highlights */
66+
--btn-share-color: #6e7681; /* Muted gray for share buttons */
67+
--btn-share-hover-color: #c9d1d9; /* Light gray for hover */
68+
--card-bg: #161b22; /* Dark gray for cards */
69+
--card-hover-bg: #21262d; /* Slightly lighter for hover */
70+
--card-shadow: rgba(0, 0, 0, 0.5) 0 6px 18px 0,
71+
rgba(201, 209, 217, 0.2) 0 0 0 1px; /* Darker shadow */
72+
--kbd-wrap-color: #6e7681; /* Muted gray for keyboard input wrap */
73+
--kbd-text-color: #e6edf3; /* Near-white for keyboard text */
74+
--kbd-bg-color: #0d1117; /* Matches main background */
75+
--prompt-text-color: rgba(201, 209, 217, 0.75); /* Muted light gray */
76+
--prompt-tip-bg: rgba(22, 101, 52, 0.7); /* Dark green for tips */
77+
--prompt-tip-icon-color: #22c55e; /* Bright green for icons */
78+
--prompt-info-bg: rgba(29, 78, 216, 0.7); /* Dark blue for info */
79+
--prompt-info-icon-color: #3b82f6; /* Bright blue for icons */
80+
--prompt-warning-bg: rgba(124, 45, 18, 0.7); /* Dark orange for warnings */
81+
--prompt-warning-icon-color: #f97316; /* Bright orange for icons */
82+
--prompt-danger-bg: rgba(153, 27, 27, 0.7); /* Dark red for danger */
83+
--prompt-danger-icon-color: #ef4444; /* Bright red for icons */
8484

8585
/* Tags */
86-
--tag-border: rgb(59 79 88);
87-
--tag-shadow: rgb(32 33 33);
88-
--dash-color: rgb(63 65 68);
89-
--search-tag-bg: #292828;
86+
--tag-border: #30363d; /* Dark gray for tag borders */
87+
--tag-shadow: #0d1117; /* Matches main background */
88+
--dash-color: #6e7681; /* Muted gray for dashes */
89+
--search-tag-bg: #161b22; /* Dark gray for search tags */
9090

9191
/* Categories */
92-
--categories-border: rgb(64 66 69 / 50%);
93-
--categories-hover-bg: rgb(73 75 76);
94-
--categories-icon-hover-color: white;
92+
--categories-border: rgba(48, 54, 61, 0.5); /* Semi-transparent gray */
93+
--categories-hover-bg: #21262d; /* Dark gray for hover */
94+
--categories-icon-hover-color: #ffffff; /* White for icon hovers */
9595

9696
/* Archive */
97-
--timeline-node-bg: rgb(150 152 156);
98-
--timeline-color: rgb(63 65 68);
99-
--timeline-year-dot-color: var(--timeline-color);
97+
--timeline-node-bg: #6e7681; /* Muted gray for timeline nodes */
98+
--timeline-color: #30363d; /* Dark gray for timeline */
99+
--timeline-year-dot-color: var(--timeline-color); /* Matches timeline */
100100

101101
/* Code highlight colors */
102-
--language-border-color: #2d2d2d;
103-
--highlight-bg-color: #151515;
104-
--highlighter-rouge-color: #c9def1;
105-
--highlight-lineno-color: #808080;
106-
--inline-code-bg: rgb(255 255 255 / 5%);
107-
--code-color: #b0b0b0;
108-
--code-header-text-color: #6a6a6a;
109-
--code-header-muted-color: #353535;
110-
--code-header-icon-color: #565656;
111-
--clipboard-checked-color: #2bcc2b;
112-
--filepath-text-color: #cacaca;
102+
--language-border-color: #21262d; /* Dark gray for code borders */
103+
--highlight-bg-color: #0d1117; /* Deep black for code background */
104+
--highlighter-rouge-color: #c9d1d9; /* Light gray for code text */
105+
--highlight-lineno-color: #6e7681; /* Muted gray for line numbers */
106+
--inline-code-bg: rgba(255, 255, 255, 0.05); /* Subtle white for inline code */
107+
--code-color: #c9d1d9; /* Light gray for code */
108+
--code-header-text-color: #8b949e; /* Muted gray for code headers */
109+
--code-header-muted-color: #21262d; /* Dark gray for muted headers */
110+
--code-header-icon-color: #6e7681; /* Muted gray for icons */
111+
--clipboard-checked-color: #22c55e; /* Green for clipboard check */
112+
--filepath-text-color: #c9d1d9; /* Light gray for file paths */
113113

114114
.light {
115115
display: none;
@@ -141,11 +141,11 @@
141141
#archives li:nth-child(odd) {
142142
background-image: linear-gradient(
143143
to left,
144-
rgb(26 26 30),
145-
rgb(39 39 45),
146-
rgb(39 39 45),
147-
rgb(39 39 45),
148-
rgb(26 26 30)
144+
#0d1117,
145+
#161b22,
146+
#161b22,
147+
#161b22,
148+
#0d1117
149149
);
150150
}
151151

@@ -154,10 +154,9 @@
154154
color-scheme: none;
155155
}
156156

157-
/* --- Syntax highlight theme from `rougify style base16.dark` --- */
158-
157+
/* --- Syntax highlight theme --- */
159158
.highlight .gp {
160-
color: #87939d;
159+
color: #8b949e; /* Muted gray for prompt */
161160
}
162161

163162
.highlight table td {
@@ -170,13 +169,13 @@
170169

171170
.highlight,
172171
.highlight .w {
173-
color: #d0d0d0;
174-
background-color: #151515;
172+
color: #c9d1d9;
173+
background-color: #0d1117;
175174
}
176175

177176
.highlight .err {
178-
color: #151515;
179-
background-color: #ac4142;
177+
color: #0d1117;
178+
background-color: #f85149; /* Bright red for errors */
180179
}
181180

182181
.highlight .c,
@@ -186,39 +185,39 @@
186185
.highlight .cpf,
187186
.highlight .c1,
188187
.highlight .cs {
189-
color: #848484;
188+
color: #8b949e; /* Muted gray for comments */
190189
}
191190

192191
.highlight .cp {
193-
color: #f4bf75;
192+
color: #e6b800; /* Yellow for preprocessor */
194193
}
195194

196195
.highlight .nt {
197-
color: #f4bf75;
196+
color: #e6b800; /* Yellow for tags */
198197
}
199198

200199
.highlight .o,
201200
.highlight .ow {
202-
color: #d0d0d0;
201+
color: #c9d1d9; /* Light gray for operators */
203202
}
204203

205204
.highlight .p,
206205
.highlight .pi {
207-
color: #d0d0d0;
206+
color: #c9d1d9; /* Light gray for punctuation */
208207
}
209208

210209
.highlight .gi {
211-
color: #90a959;
210+
color: #22c55e; /* Green for insertions */
212211
}
213212

214213
.highlight .gd {
215-
color: #f08a8b;
216-
background-color: #320000;
214+
color: #f85149; /* Red for deletions */
215+
background-color: #2d0000; /* Dark red background */
217216
}
218217

219218
.highlight .gh {
220-
color: #6a9fb5;
221-
background-color: #151515;
219+
color: #58a6ff; /* Blue for headers */
220+
background-color: #0d1117;
222221
font-weight: bold;
223222
}
224223

@@ -227,19 +226,19 @@
227226
.highlight .kp,
228227
.highlight .kr,
229228
.highlight .kv {
230-
color: #aa759f;
229+
color: #d3869b; /* Soft pink for keywords */
231230
}
232231

233232
.highlight .kc {
234-
color: #d28445;
233+
color: #e6b800; /* Yellow for constants */
235234
}
236235

237236
.highlight .kt {
238-
color: #d28445;
237+
color: #e6b800; /* Yellow for types */
239238
}
240239

241240
.highlight .kd {
242-
color: #d28445;
241+
color: #e6b800; /* Yellow for declarations */
243242
}
244243

245244
.highlight .s,
@@ -251,39 +250,39 @@
251250
.highlight .sh,
252251
.highlight .sx,
253252
.highlight .s1 {
254-
color: #90a959;
253+
color: #22c55e; /* Green for strings */
255254
}
256255

257256
.highlight .sa {
258-
color: #aa759f;
257+
color: #d3869b; /* Pink for string attributes */
259258
}
260259

261260
.highlight .sr {
262-
color: #75b5aa;
261+
color: #2dd4bf; /* Teal for regex */
263262
}
264263

265264
.highlight .si {
266-
color: #b76d45;
265+
color: #e6b800; /* Yellow for interpolation */
267266
}
268267

269268
.highlight .se {
270-
color: #b76d45;
269+
color: #e6b800; /* Yellow for escapes */
271270
}
272271

273272
.highlight .nn {
274-
color: #f4bf75;
273+
color: #e6b800; /* Yellow for names */
275274
}
276275

277276
.highlight .nc {
278-
color: #f4bf75;
277+
color: #e6b800; /* Yellow for class names */
279278
}
280279

281280
.highlight .no {
282-
color: #f4bf75;
281+
color: #e6b800; /* Yellow for constants */
283282
}
284283

285284
.highlight .na {
286-
color: #6a9fb5;
285+
color: #58a6ff; /* Blue for attributes */
287286
}
288287

289288
.highlight .m,
@@ -294,10 +293,10 @@
294293
.highlight .il,
295294
.highlight .mo,
296295
.highlight .mx {
297-
color: #90a959;
296+
color: #22c55e; /* Green for numbers */
298297
}
299298

300299
.highlight .ss {
301-
color: #90a959;
300+
color: #22c55e; /* Green for symbols */
302301
}
303-
}
302+
}

0 commit comments

Comments
 (0)