Skip to content

Commit 4144580

Browse files
codeuralicodeurali
authored
enchance dark mode
1 parent b8e622a commit 4144580

1 file changed

Lines changed: 62 additions & 54 deletions

File tree

‎docs/_sass/custom/custom.scss‎

Lines changed: 62 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -14,135 +14,143 @@
1414

1515
// ── Auto dark mode (follows OS preference) ──
1616
@media (prefers-color-scheme: dark) {
17-
// Base
17+
// Base - Darker background, brighter text for maximum contrast
1818
body {
19-
background-color: #0f172a !important;
20-
color: #e2e8f0 !important;
19+
background-color: #020617 !important; // Deep Slate 950
20+
color: #f8fafc !important; // Slate 50
2121
}
2222

2323
// Sidebar
2424
.side-bar {
25-
background-color: #1e293b !important;
25+
background-color: #0f172a !important; // Slate 900
2626
}
2727

28-
.site-title { color: #f1f5f9 !important; }
28+
.site-title {
29+
color: #ffffff !important;
30+
font-weight: 600 !important;
31+
}
2932

3033
.site-nav,
3134
.nav-list .nav-list-item a {
32-
color: #cbd5e1 !important;
35+
color: #e2e8f0 !important; // Slate 200
3336
}
3437

3538
.nav-list .nav-list-item a:hover,
3639
.nav-list .nav-list-item a.active {
37-
color: #f1f5f9 !important;
38-
background-color: #334155 !important;
40+
color: #ffffff !important;
41+
background-color: #1e293b !important; // Slate 800
3942
}
4043

41-
.site-nav .nav-list-expander { color: #94a3b8 !important; }
44+
.site-nav .nav-list-expander { color: #cbd5e1 !important; } // Brighter Slate 300
4245

4346
// Main content
4447
.main-content {
45-
h1, h2, h3, h4, h5, h6 { color: #f1f5f9 !important; }
46-
hr { border-color: #334155 !important; }
48+
h1, h2, h3, h4, h5, h6 { color: #ffffff !important; }
49+
hr { border-color: #1e293b !important; } // Slate 800
4750
}
4851

49-
// Links
52+
// Links - Lighter indigo for better contrast against dark bg
5053
a:not(.btn):not(.site-title):not(.search-result) {
51-
color: #818cf8 !important;
52-
&:hover { color: #a5b4fc !important; }
54+
color: #a5b4fc !important; // Indigo 300
55+
&:hover { color: #c7d2fe !important; } // Indigo 200
5356
}
5457

5558
// Code
5659
code {
57-
background-color: #1e293b !important;
58-
color: #e2e8f0 !important;
59-
border-color: #334155 !important;
60+
background-color: #1e293b !important; // Slate 800
61+
color: #f8fafc !important; // Slate 50
62+
border-color: #334155 !important; // Slate 700
6063
}
6164

6265
pre {
63-
background-color: #1e293b !important;
64-
> code { background-color: transparent !important; }
66+
background-color: #0f172a !important; // Slate 900
67+
border: 1px solid #1e293b !important;
68+
> code {
69+
background-color: transparent !important;
70+
border: none !important;
71+
}
6572
}
6673

6774
// Tables
6875
table {
6976
th {
70-
background-color: #1e293b !important;
71-
color: #f1f5f9 !important;
72-
border-color: #334155 !important;
77+
background-color: #0f172a !important; // Slate 900
78+
color: #ffffff !important;
79+
border-color: #1e293b !important; // Slate 800
7380
}
7481
td {
75-
border-color: #334155 !important;
76-
color: #e2e8f0 !important;
82+
border-color: #1e293b !important; // Slate 800
83+
color: #f8fafc !important; // Slate 50
7784
}
7885
tr:nth-child(even) td {
79-
background-color: rgba(30, 41, 59, 0.5) !important;
86+
background-color: #0f172a !important; // Slate 900
8087
}
8188
}
8289

8390
// Search
8491
.search-input {
85-
background-color: #1e293b !important;
86-
color: #e2e8f0 !important;
87-
border-color: #334155 !important;
88-
&:focus { border-color: #818cf8 !important; }
92+
background-color: #0f172a !important; // Slate 900
93+
color: #ffffff !important;
94+
border-color: #334155 !important; // Slate 700
95+
&:focus { border-color: #a5b4fc !important; } // Indigo 300
8996
}
9097

9198
.search-results {
92-
background-color: #1e293b !important;
93-
border-color: #334155 !important;
99+
background-color: #0f172a !important; // Slate 900
100+
border-color: #1e293b !important; // Slate 800
94101
}
95102

96-
.search-result-title { color: #f1f5f9 !important; }
97-
.search-result-previews { color: #94a3b8 !important; }
98-
.search-result:hover { background-color: #334155 !important; }
103+
.search-result-title { color: #ffffff !important; }
104+
.search-result-previews { color: #cbd5e1 !important; } // Slate 300
105+
.search-result:hover { background-color: #1e293b !important; } // Slate 800
99106

100107
// Footer
101108
.site-footer {
102-
border-top-color: #334155 !important;
103-
color: #94a3b8 !important;
104-
a { color: #818cf8 !important; }
109+
border-top-color: #1e293b !important; // Slate 800
110+
color: #cbd5e1 !important; // Slate 300
111+
a { color: #a5b4fc !important; }
105112
}
106113

107114
// Blockquotes
108115
blockquote {
109-
border-left-color: #818cf8 !important;
110-
color: #cbd5e1 !important;
116+
border-left-color: #a5b4fc !important; // Indigo 300
117+
color: #e2e8f0 !important; // Slate 200
111118
}
112119

113120
// Buttons
114121
.btn:not(.btn-primary) {
115-
color: #e2e8f0 !important;
116-
border-color: #475569 !important;
117-
background-color: #1e293b !important;
118-
&:hover { background-color: #334155 !important; }
122+
color: #f8fafc !important; // Slate 50
123+
border-color: #475569 !important; // Slate 600
124+
background-color: #0f172a !important; // Slate 900
125+
&:hover { background-color: #1e293b !important; } // Slate 800
119126
}
120127

121128
// Main header & breadcrumbs
122129
.main-header {
123-
background-color: #0f172a !important;
124-
border-bottom-color: #334155 !important;
130+
background-color: #020617 !important; // Slate 950
131+
border-bottom-color: #1e293b !important; // Slate 800
125132
}
126133

127134
.breadcrumb-nav {
128-
color: #94a3b8 !important;
129-
a { color: #818cf8 !important; }
135+
color: #cbd5e1 !important; // Slate 300
136+
a { color: #a5b4fc !important; }
130137
}
131138

132139
.back-to-top {
133-
color: #94a3b8 !important;
134-
&:hover { color: #818cf8 !important; }
140+
color: #cbd5e1 !important; // Slate 300
141+
&:hover { color: #a5b4fc !important; }
135142
}
136143

137144
// Callouts
138145
.callout {
139-
background-color: #1e293b !important;
140-
border-color: #334155 !important;
146+
background-color: #0f172a !important; // Slate 900
147+
border-color: #1e293b !important; // Slate 800
148+
color: #f8fafc !important;
141149
}
142150

143151
// Aux links (npm, GitHub)
144152
.aux-nav .aux-nav-list-item a {
145-
color: #94a3b8 !important;
146-
&:hover { color: #f1f5f9 !important; }
153+
color: #cbd5e1 !important; // Slate 300
154+
&:hover { color: #ffffff !important; }
147155
}
148-
}
156+
}

0 commit comments

Comments
 (0)