Skip to content

Commit 9e59453

Browse files
meroxdotdevmeroxdotdev
committed
chore: test this colorscheme darkmode
1 parent 45ec360 commit 9e59453

File tree

1 file changed

+90
-97
lines changed

1 file changed

+90
-97
lines changed

‎_sass/themes/_dark.scss

Lines changed: 90 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,114 @@
11
@mixin styles {
22
color-scheme: dark;
33

4-
/* Framework color - Paper gray theme */
5-
--main-bg: #1f1f23; /* Soft charcoal paper */
6-
--mask-bg: #2a2a2f; /* Medium gray paper */
7-
--main-border-color: #3a3a40; /* Subtle gray borders */
8-
9-
/* Common color - Warm paper tones */
10-
--text-color: #f0f0f2; /* Soft paper white */
11-
--text-muted-color: #b4b4b8; /* Warm gray ink */
12-
--text-muted-highlight-color: #c8c8cc; /* Light gray ink */
13-
--heading-color: #f8f8fa; /* Pure paper white */
14-
--label-color: #c8c8cc; /* Light gray labels */
15-
--blockquote-border-color: #4a4a50; /* Medium gray border */
16-
--blockquote-text-color: #b4b4b8; /* Muted gray text */
17-
--link-color: #7c9dd9; /* Soft paper blue */
18-
--link-underline-color: #5a7bc2; /* Deeper blue underline */
19-
--button-bg: #2a2a2f; /* Same as mask-bg */
20-
--btn-border-color: #4a4a50; /* Medium gray borders */
4+
/* Framework color */
5+
--main-bg: rgb(24, 24, 37);
6+
--mask-bg: rgb(69, 71, 90);
7+
--main-border-color: rgb(69, 71, 90);
8+
9+
/* Common color */
10+
--text-color: rgb(205, 214, 244);
11+
--text-muted-color: rgb(186, 194, 222);
12+
--text-muted-highlight-color: rgb(170, 190, 255); /* replaced pink */
13+
--heading-color: rgb(116, 199, 236);
14+
--label-color: rgb(180, 190, 254);
15+
--blockquote-border-color: rgb(69, 71, 90);
16+
--blockquote-text-color: rgb(186, 194, 222);
17+
--link-color: rgb(137, 180, 250);
18+
--link-underline-color: rgb(137, 180, 250);
19+
--button-bg: rgb(69, 71, 90);
20+
--btn-border-color: rgb(69, 71, 90);
2121
--btn-backtotop-color: var(--text-color);
22-
--btn-backtotop-border-color: #8ab61b;
23-
--card-header-bg: #2a2a2f; /* Same as card background */
24-
--card-bg: #2a2a2f; /* Medium gray paper for cards */
25-
--checkbox-color: #7a7a7f; /* Neutral gray */
26-
--checkbox-checked-color: #8b9dc3; /* Soft blue accent */
27-
--img-bg: radial-gradient(circle, #1f1f23 0%, #2a2a2f 100%); /* Paper gradient */
28-
--shimmer-bg: linear-gradient(
29-
90deg,
30-
rgb(255 255 255 / 0%) 0%,
31-
rgb(139 157 195 / 15%) 50%, /* Soft blue shimmer */
32-
rgb(255 255 255 / 0%) 100%
33-
);
34-
35-
/* Sidebar - Paper theme */
36-
--site-title-color: #f8f8fa; /* Pure paper white */
37-
--site-subtitle-color: #b4b4b8; /* Warm gray */
38-
--sidebar-bg: #1a1a1e; /* Darker paper */
39-
--sidebar-border-color: #3a3a40; /* Gray borders */
40-
--sidebar-muted-color: #b4b4b8;
41-
--sidebar-active-color: #8b9dc3; /* Soft blue active */
42-
--sidebar-hover-bg: #2a2a2f; /* Same as cards */
43-
--sidebar-btn-bg: #4a4a50; /* Medium gray buttons */
44-
--sidebar-btn-color: #c8c8cc; /* Light gray text */
45-
--avatar-border-color: rgb(139 157 195 / 60%); /* Soft blue glow */
46-
47-
/* Topbar - SAME as card background */
48-
--topbar-bg: #1f1f23; /* EXACT same as card-bg */
22+
--btn-backtotop-border-color: rgb(69, 71, 90);
23+
--card-header-bg: rgb(49, 50, 68);
24+
--card-bg: rgb(30, 30, 46);
25+
--checkbox-color: rgb(235, 160, 172);
26+
--checkbox-checked-color: var(--link-color);
27+
--img-bg: radial-gradient(circle, rgb(17, 17, 27) 0%, rgb(24, 24, 37) 100%);
28+
--shimmer-bg: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(58, 55, 55, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
29+
30+
/* Sidebar */
31+
--site-title-color: var(--text-color);
32+
--site-subtitle-color: rgb(186, 194, 222);
33+
--sidebar-bg: rgb(30, 30, 46);
34+
--sidebar-border-color: rgb(69, 71, 90);
35+
--sidebar-muted-color: rgb(166, 173, 200);
36+
--sidebar-active-color: rgb(250, 179, 135);
37+
--sidebar-hover-bg: rgb(17, 17, 27);
38+
--sidebar-btn-bg: rgb(30, 30, 46);
39+
--sidebar-btn-color: rgb(166, 173, 200);
40+
--avatar-border-color: rgb(69, 71, 90);
41+
42+
/* Topbar */
43+
--topbar-bg: rgba(24, 24, 37, 0.64);
4944
--topbar-text-color: var(--text-color);
50-
--search-border-color: #4a4a50;
51-
--search-icon-color: #7a7a7f;
52-
--input-focus-border-color: #8b9dc3; /* Soft blue focus */
45+
--search-border-color: rgb(69, 71, 90);
46+
--search-icon-color: var(--text-color);
47+
--input-focus-border-color: rgb(250, 180, 100); /* replaced orange */
5348

5449
/* Home page */
55-
--post-list-text-color: #f0f0f2;
50+
--post-list-text-color: var(--text-color);
5651
--btn-patinator-text-color: var(--text-color);
57-
--btn-paginator-hover-color: #4a4a50;
58-
59-
/* Posts - Paper harmony */
60-
--toc-highlight: #8b9dc3; /* Soft blue highlights */
61-
--toc-popup-border-color: #4a4a50;
62-
--tag-hover: #2a2a2f;
63-
--tb-odd-bg: #2a2a2f; /* Same as cards */
64-
--tb-even-bg: #1f1f23; /* Main background alternating */
52+
--btn-paginator-hover-color: rgb(91, 114, 186); /* replaced pink */
53+
54+
/* Posts */
55+
--toc-highlight: rgb(166, 227, 161);
56+
--tag-hover: rgb(17, 17, 27);
57+
--tb-odd-bg: rgb(30, 30, 46);
58+
--tb-even-bg: rgb(31, 31, 34);
6559
--tb-border-color: var(--tb-odd-bg);
66-
--footnote-target-bg: #5a7bc2; /* Blue footnotes */
67-
--btn-share-color: #7a7a7f;
68-
--btn-share-hover-color: #8b9dc3; /* Soft blue hover */
69-
--card-hover-bg: #3a3a40; /* Light gray hover */
60+
--footnote-target-bg: rgb(63, 81, 181);
61+
--btn-share-color: var(--text-color);
62+
--btn-share-hover-color: rgb(250, 180, 100); /* replaced orange */
63+
--card-hover-bg: rgb(49, 50, 68);
7064
--card-shadow: rgb(0 0 0 / 35%) 0 4px 16px 0,
71-
rgb(139 157 195 / 6%) 0 0 0 1px; /* Subtle blue glow */
65+
rgb(137 180, 250 / 6%) 0 0 0 1px;
7266

73-
--kbd-wrap-color: #7a7a7f;
74-
--kbd-text-color: #f8f8fa;
75-
--kbd-bg-color: #1a1a1e;
67+
--kbd-wrap-color: rgb(166, 173, 200);
68+
--kbd-text-color: var(--text-color);
69+
--kbd-bg-color: rgb(30, 30, 46);
7670
--prompt-text-color: rgb(240 240 242 / 85%);
77-
--prompt-tip-bg: rgb(34 139 69 / 65%); /* Muted green tips */
78-
--prompt-tip-icon-color: #4ade80; /* Soft green */
79-
--prompt-info-bg: rgb(90 123 194 / 65%); /* Soft blue info */
80-
--prompt-info-icon-color: #7c9dd9; /* Paper blue */
81-
--prompt-warning-bg: rgb(202 138 4 / 65%); /* Muted gold warnings */
82-
--prompt-warning-icon-color: #fbbf24; /* Soft gold */
83-
--prompt-danger-bg: rgb(185 28 28 / 65%); /* Muted red danger */
84-
--prompt-danger-icon-color: #f87171; /* Soft red */
85-
86-
/* Tags - Paper tones */
87-
--tag-border: #4a4a50;
88-
--tag-shadow: #1a1a1e;
89-
--dash-color: #7a7a7f;
90-
--search-tag-bg: #2a2a2f;
91-
92-
/* Categories */
93-
--categories-border: rgb(74 74 80 / 35%);
94-
--categories-hover-bg: #2a2a2f;
95-
--categories-icon-hover-color: #8b9dc3; /* Soft blue icon hover */
71+
--prompt-tip-bg: rgba(34, 139, 69, 0.65);
72+
--prompt-tip-icon-color: rgb(74, 222, 128);
73+
--prompt-info-bg: rgba(90, 123, 194, 0.65);
74+
--prompt-info-icon-color: rgb(124, 157, 217);
75+
--prompt-warning-bg: rgba(255, 180, 100, 0.65); /* replaced orange */
76+
--prompt-warning-icon-color: rgb(255, 180, 100); /* replaced orange */
77+
--prompt-danger-bg: rgba(185, 28, 28, 0.65);
78+
--prompt-danger-icon-color: rgb(248, 113, 113);
79+
80+
/* Tags & Categories */
81+
--tag-border: rgb(69, 71, 90);
82+
--tag-shadow: rgb(30, 30, 46);
83+
--dash-color: rgb(166, 173, 200);
84+
--search-tag-bg: rgb(30, 30, 46);
85+
--categories-border: rgba(74, 74, 80, 0.35);
86+
--categories-hover-bg: rgb(30, 30, 46);
87+
--categories-icon-hover-color: rgb(250, 180, 100);
9688

9789
/* Archive */
98-
--timeline-node-bg: #7a7a7f;
99-
--timeline-color: #4a4a50;
90+
--timeline-node-bg: rgb(166, 173, 200);
91+
--timeline-color: rgb(69, 71, 90);
10092
--timeline-year-dot-color: var(--timeline-color);
10193

102-
/* Code highlight colors - Paper manuscript palette */
103-
--language-border-color: #4a4a50;
104-
--highlight-bg-color: #1a1a1e; /* Dark paper code background */
105-
--highlighter-rouge-color: #f0f0f2;
106-
--highlight-lineno-color: #7a7a7f;
107-
--inline-code-bg: rgb(139 157 195 / 8%); /* Soft blue tint */
108-
--code-color: #f0f0f2;
109-
--code-header-text-color: #b4b4b8;
110-
--code-header-muted-color: #4a4a50;
111-
--code-header-icon-color: #7a7a7f;
112-
--clipboard-checked-color: #4ade80; /* Soft green success */
113-
--filepath-text-color: #c8c8cc;
94+
/* Code highlight */
95+
--language-border-color: rgb(69, 71, 90);
96+
--highlight-bg-color: rgb(17, 17, 27);
97+
--highlighter-rouge-color: rgb(255, 180, 100); /* replaced orange */
98+
--highlight-lineno-color: rgb(166, 173, 200);
99+
--inline-code-bg: rgb(30, 30, 46);
100+
--code-color: rgb(205, 214, 244);
101+
--code-header-text-color: rgb(255, 180, 100); /* replaced orange */
102+
--code-header-muted-color: rgb(255, 180, 100);
103+
--code-header-icon-color: rgb(255, 180, 100);
104+
--clipboard-checked-color: rgb(170, 190, 255); /* replaced pink */
105+
--filepath-text-color: rgb(170, 190, 255);
114106

115107
.light {
116108
display: none;
117109
}
118110

111+
119112
/* Categories */
120113
.categories.card,
121114
.list-group-item {

0 commit comments

Comments
 (0)