Skip to content

Commit bd98bd1

Browse files
codeuralicodeurali
committed
Update custom.scss with modern accent colors and auto dark mode settings
1 parent 123f6f3 commit bd98bd1

File tree

1 file changed

+178
-142
lines changed

1 file changed

+178
-142
lines changed

‎docs/_sass/custom/custom.scss‎

Lines changed: 178 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -12,145 +12,181 @@
1212
.label-yellow { background-color: #d97706 !important; }
1313
.label-purple { background-color: #7c3aed !important; }
1414

15-
// // ── Auto dark mode (follows OS preference) ──
16-
// @media (prefers-color-scheme: dark) {
17-
// // Base - Darker background, brighter text for maximum contrast
18-
// body {
19-
// background-color: #020617 !important; // Deep Slate 950
20-
// color: #f8fafc !important; // Slate 50
21-
// }
22-
23-
// // Sidebar
24-
// .side-bar {
25-
// background-color: #0f172a !important; // Slate 900
26-
// }
27-
28-
// .site-title {
29-
// color: #ffffff !important;
30-
// font-weight: 600 !important;
31-
// }
32-
33-
// .site-nav,
34-
// .nav-list .nav-list-item a {
35-
// color: #e2e8f0 !important; // Slate 200
36-
// }
37-
38-
// .nav-list .nav-list-item a:hover,
39-
// .nav-list .nav-list-item a.active {
40-
// color: #ffffff !important;
41-
// background-color: #1e293b !important; // Slate 800
42-
// }
43-
44-
// .site-nav .nav-list-expander { color: #cbd5e1 !important; } // Brighter Slate 300
45-
46-
// // Main content
47-
// .main-content {
48-
// h1, h2, h3, h4, h5, h6 { color: #ffffff !important; }
49-
// hr { border-color: #1e293b !important; } // Slate 800
50-
// }
51-
52-
// // Links - Lighter indigo for better contrast against dark bg
53-
// a:not(.btn):not(.site-title):not(.search-result) {
54-
// color: #a5b4fc !important; // Indigo 300
55-
// &:hover { color: #c7d2fe !important; } // Indigo 200
56-
// }
57-
58-
// // Code
59-
// code {
60-
// background-color: #1e293b !important; // Slate 800
61-
// color: #f8fafc !important; // Slate 50
62-
// border-color: #334155 !important; // Slate 700
63-
// }
64-
65-
// pre {
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-
// }
72-
// }
73-
74-
// // Tables
75-
// table {
76-
// th {
77-
// background-color: #0f172a !important; // Slate 900
78-
// color: #ffffff !important;
79-
// border-color: #1e293b !important; // Slate 800
80-
// }
81-
// td {
82-
// border-color: #1e293b !important; // Slate 800
83-
// color: #f8fafc !important; // Slate 50
84-
// }
85-
// tr:nth-child(even) td {
86-
// background-color: #0f172a !important; // Slate 900
87-
// }
88-
// }
89-
90-
// // Search
91-
// .search-input {
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
96-
// }
97-
98-
// .search-results {
99-
// background-color: #0f172a !important; // Slate 900
100-
// border-color: #1e293b !important; // Slate 800
101-
// }
102-
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
106-
107-
// // Footer
108-
// .site-footer {
109-
// border-top-color: #1e293b !important; // Slate 800
110-
// color: #cbd5e1 !important; // Slate 300
111-
// a { color: #a5b4fc !important; }
112-
// }
113-
114-
// // Blockquotes
115-
// blockquote {
116-
// border-left-color: #a5b4fc !important; // Indigo 300
117-
// color: #e2e8f0 !important; // Slate 200
118-
// }
119-
120-
// // Buttons
121-
// .btn:not(.btn-primary) {
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
126-
// }
127-
128-
// // Main header & breadcrumbs
129-
// .main-header {
130-
// background-color: #020617 !important; // Slate 950
131-
// border-bottom-color: #1e293b !important; // Slate 800
132-
// }
133-
134-
// .breadcrumb-nav {
135-
// color: #cbd5e1 !important; // Slate 300
136-
// a { color: #a5b4fc !important; }
137-
// }
138-
139-
// .back-to-top {
140-
// color: #cbd5e1 !important; // Slate 300
141-
// &:hover { color: #a5b4fc !important; }
142-
// }
143-
144-
// // Callouts
145-
// .callout {
146-
// background-color: #0f172a !important; // Slate 900
147-
// border-color: #1e293b !important; // Slate 800
148-
// color: #f8fafc !important;
149-
// }
150-
151-
// // Aux links (npm, GitHub)
152-
// .aux-nav .aux-nav-list-item a {
153-
// color: #cbd5e1 !important; // Slate 300
154-
// &:hover { color: #ffffff !important; }
155-
// }
156-
// }
15+
// ── Auto dark mode (follows OS preference) ──
16+
@media (prefers-color-scheme: dark) {
17+
18+
// ── Base ──
19+
body {
20+
background-color: #020617 !important; // Slate 950
21+
color: #e2e8f0 !important; // Slate 200 — readable on dark bg
22+
}
23+
24+
// ── Sidebar ──
25+
.side-bar {
26+
background-color: #0f172a !important; // Slate 900
27+
color: #e2e8f0 !important;
28+
}
29+
30+
.site-title {
31+
color: #ffffff !important;
32+
font-weight: 600 !important;
33+
}
34+
35+
.site-nav,
36+
.nav-list .nav-list-item a {
37+
color: #cbd5e1 !important; // Slate 300
38+
}
39+
40+
.nav-list .nav-list-item a:hover,
41+
.nav-list .nav-list-item a.active {
42+
color: #ffffff !important;
43+
background-color: #1e293b !important; // Slate 800
44+
}
45+
46+
.site-nav .nav-list-expander { color: #94a3b8 !important; } // Slate 400
47+
48+
// ── Main content ──
49+
.main-content {
50+
color: #e2e8f0 !important; // Slate 200
51+
52+
p, li, dt, dd, figcaption { color: #e2e8f0 !important; }
53+
54+
h1, h2, h3, h4, h5, h6 { color: #f8fafc !important; } // Slate 50
55+
hr { border-color: #1e293b !important; } // Slate 800
56+
}
57+
58+
// ── Links ──
59+
a:not(.btn):not(.site-title):not(.search-result) {
60+
color: #818cf8 !important; // Indigo 400 — AA contrast on Slate 950
61+
&:hover { color: #a5b4fc !important; } // Indigo 300
62+
}
63+
64+
// ── Inline code ──
65+
code {
66+
background-color: #1e293b !important; // Slate 800
67+
color: #e2e8f0 !important; // Slate 200 — light text on dark bg
68+
border-color: #334155 !important; // Slate 700
69+
}
70+
71+
// ── Code blocks ──
72+
pre {
73+
background-color: #0f172a !important; // Slate 900
74+
border: 1px solid #334155 !important; // Slate 700
75+
color: #e2e8f0 !important;
76+
77+
> code {
78+
background-color: transparent !important;
79+
border: none !important;
80+
color: #e2e8f0 !important; // explicit so theme default can't bleed through
81+
}
82+
}
83+
84+
// ── Tables ──
85+
table {
86+
color: #e2e8f0 !important; // fallback for all cells
87+
88+
thead {
89+
background-color: #0f172a !important; // Slate 900
90+
color: #f8fafc !important; // Slate 50
91+
}
92+
93+
th {
94+
background-color: #0f172a !important; // Slate 900
95+
color: #f8fafc !important; // Slate 50 — white text in headers
96+
border-color: #334155 !important; // Slate 700
97+
}
98+
99+
td {
100+
background-color: #020617 !important; // Slate 950
101+
color: #e2e8f0 !important; // Slate 200 — readable on dark bg
102+
border-color: #334155 !important; // Slate 700
103+
}
104+
105+
tr:nth-child(even) td {
106+
background-color: #0f172a !important; // Slate 900 — subtle stripe
107+
color: #e2e8f0 !important;
108+
}
109+
110+
tr:hover td {
111+
background-color: #1e293b !important; // Slate 800
112+
color: #f8fafc !important;
113+
}
114+
}
115+
116+
// ── Search ──
117+
.search-input {
118+
background-color: #0f172a !important; // Slate 900
119+
color: #f8fafc !important;
120+
border-color: #334155 !important; // Slate 700
121+
&::placeholder { color: #64748b !important; } // Slate 500
122+
&:focus { border-color: #818cf8 !important; } // Indigo 400
123+
}
124+
125+
.search-results {
126+
background-color: #0f172a !important; // Slate 900
127+
border-color: #1e293b !important; // Slate 800
128+
}
129+
130+
.search-result-title { color: #f8fafc !important; }
131+
.search-result-previews { color: #94a3b8 !important; } // Slate 400
132+
.search-result:hover { background-color: #1e293b !important; }
133+
134+
// ── Footer ──
135+
.site-footer {
136+
border-top-color: #1e293b !important; // Slate 800
137+
color: #94a3b8 !important; // Slate 400
138+
a { color: #818cf8 !important; } // Indigo 400
139+
}
140+
141+
// ── Blockquotes ──
142+
blockquote {
143+
border-left-color: #818cf8 !important; // Indigo 400
144+
color: #cbd5e1 !important; // Slate 300
145+
background-color: #0f172a !important; // subtle tinted bg
146+
}
147+
148+
// ── Buttons (non-primary) ──
149+
.btn:not(.btn-primary) {
150+
color: #e2e8f0 !important; // Slate 200
151+
border-color: #475569 !important; // Slate 600
152+
background-color: #1e293b !important; // Slate 800
153+
&:hover {
154+
background-color: #334155 !important; // Slate 700
155+
color: #f8fafc !important;
156+
}
157+
}
158+
159+
// ── Main header & breadcrumbs ──
160+
.main-header {
161+
background-color: #020617 !important; // Slate 950
162+
border-bottom-color: #1e293b !important;
163+
}
164+
165+
.breadcrumb-nav {
166+
color: #94a3b8 !important; // Slate 400
167+
a { color: #818cf8 !important; }
168+
}
169+
170+
.back-to-top {
171+
color: #94a3b8 !important; // Slate 400
172+
&:hover { color: #818cf8 !important; }
173+
}
174+
175+
// ── Callouts ──
176+
.callout {
177+
background-color: #0f172a !important; // Slate 900
178+
border-color: #334155 !important; // Slate 700
179+
color: #e2e8f0 !important; // Slate 200
180+
}
181+
182+
// ── Aux links (npm, GitHub icons) ──
183+
.aux-nav .aux-nav-list-item a {
184+
color: #94a3b8 !important; // Slate 400
185+
&:hover { color: #f8fafc !important; }
186+
}
187+
188+
// ── Labels ──
189+
.label {
190+
color: #ffffff !important; // always white text inside labels
191+
}
192+
}

0 commit comments

Comments
 (0)