Skip to content

Commit 837acbc

Browse files
prasad-kumkarprasad-kumkar
committed
Force dark mode on all pages, remove Live on Preprod badge, fix sidebar labels
1 parent 6d84589 commit 837acbc

File tree

2 files changed

+83
-47
lines changed

2 files changed

+83
-47
lines changed

‎src/css/custom.css‎

Lines changed: 82 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
11
/* Cardano Blue + Dark theme */
22

33
:root {
4-
/* Light mode (secondary) */
5-
--ifm-color-primary: #0033AD;
6-
--ifm-color-primary-dark: #002d9b;
7-
--ifm-color-primary-darker: #002a92;
8-
--ifm-color-primary-darkest: #002278;
9-
--ifm-color-primary-light: #0039bf;
10-
--ifm-color-primary-lighter: #003cc8;
11-
--ifm-color-primary-lightest: #0044e2;
4+
/* Make light mode look dark too (dark-only site) */
5+
--ifm-color-primary: #4d8bff;
6+
--ifm-color-primary-dark: #2b73ff;
7+
--ifm-color-primary-darker: #1a67ff;
8+
--ifm-color-primary-darkest: #0052e6;
9+
--ifm-color-primary-light: #6fa3ff;
10+
--ifm-color-primary-lighter: #80adff;
11+
--ifm-color-primary-lightest: #b3d1ff;
1212
--ifm-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
1313
--ifm-code-font-size: 90%;
1414
--ifm-heading-font-weight: 600;
15-
--docusaurus-highlighted-code-line-bg: rgba(0, 51, 173, 0.1);
15+
--ifm-background-color: #0a0a0f;
16+
--ifm-background-surface-color: #12121a;
17+
--ifm-navbar-background-color: #0a0a0f;
18+
--ifm-footer-background-color: #060609;
19+
--ifm-font-color-base: #e6edf3;
20+
--ifm-toc-border-color: #1e1e2e;
21+
--ifm-color-emphasis-300: #2a2a3a;
22+
--ifm-menu-color-background-active: rgba(77, 139, 255, 0.1);
23+
--ifm-heading-color: #e6edf3;
24+
--ifm-link-color: #4d8bff;
25+
--ifm-table-border-color: rgba(255, 255, 255, 0.08);
26+
--docusaurus-highlighted-code-line-bg: rgba(77, 139, 255, 0.15);
1627
}
1728

1829
[data-theme='dark'] {
@@ -41,8 +52,8 @@
4152
backdrop-filter: blur(12px);
4253
}
4354

44-
[data-theme='dark'] .navbar {
45-
background: rgba(10, 10, 15, 0.85);
55+
.navbar {
56+
background: rgba(10, 10, 15, 0.85) !important;
4657
}
4758

4859
.navbar__title {
@@ -52,8 +63,8 @@
5263
}
5364

5465
/* Sidebar - clean dark */
55-
[data-theme='dark'] .theme-doc-sidebar-container {
56-
border-right: 1px solid rgba(255, 255, 255, 0.06);
66+
.theme-doc-sidebar-container {
67+
border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
5768
}
5869

5970
.menu__link {
@@ -98,55 +109,57 @@
98109
font-weight: 600;
99110
}
100111

101-
/* Code blocks - dark with glow */
102-
[data-theme='dark'] pre {
112+
/* Code blocks - always dark */
113+
pre {
103114
background: #0d1117 !important;
104-
border: 1px solid rgba(255, 255, 255, 0.08);
105-
border-radius: 8px;
115+
border: 1px solid rgba(255, 255, 255, 0.08) !important;
116+
border-radius: 8px !important;
106117
}
107118

108-
[data-theme='dark'] code {
109-
background: rgba(77, 139, 255, 0.1);
119+
code {
120+
background: rgba(77, 139, 255, 0.1) !important;
110121
border: 1px solid rgba(77, 139, 255, 0.15);
111122
border-radius: 4px;
112123
padding: 0.15em 0.35em;
113124
font-size: 0.88em;
114125
color: #8db4ff;
115126
}
116127

117-
[data-theme='dark'] pre code {
118-
background: transparent;
119-
border: none;
128+
pre code {
129+
background: transparent !important;
130+
border: none !important;
120131
padding: 0;
121-
color: #e6edf3;
132+
color: #e6edf3 !important;
122133
}
123134

124-
/* Tables - clean dark style */
125-
[data-theme='dark'] table {
135+
/* Tables - always dark */
136+
table {
126137
border-collapse: collapse;
127138
}
128139

129-
[data-theme='dark'] table th {
130-
background: rgba(77, 139, 255, 0.08);
131-
border-bottom: 2px solid rgba(77, 139, 255, 0.2);
140+
table th {
141+
background: rgba(77, 139, 255, 0.08) !important;
142+
border-bottom: 2px solid rgba(77, 139, 255, 0.2) !important;
132143
font-weight: 600;
133144
text-transform: uppercase;
134145
font-size: 0.78rem;
135146
letter-spacing: 0.05em;
147+
color: #e6edf3;
136148
}
137149

138-
[data-theme='dark'] table td {
139-
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
150+
table td {
151+
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
152+
color: #e6edf3;
140153
}
141154

142-
[data-theme='dark'] table tr:hover td {
155+
table tr:hover td {
143156
background: rgba(77, 139, 255, 0.04);
144157
}
145158

146-
/* Blockquotes - accent bar */
147-
[data-theme='dark'] blockquote {
148-
border-left: 3px solid #4d8bff;
149-
background: rgba(77, 139, 255, 0.05);
159+
/* Blockquotes - always dark */
160+
blockquote {
161+
border-left: 3px solid #4d8bff !important;
162+
background: rgba(77, 139, 255, 0.05) !important;
150163
border-radius: 0 8px 8px 0;
151164
}
152165

@@ -178,38 +191,61 @@
178191
transition: all 0.2s;
179192
}
180193

181-
[data-theme='dark'] .pagination-nav__link:hover {
182-
border-color: rgba(77, 139, 255, 0.3);
183-
background: rgba(77, 139, 255, 0.05);
194+
.pagination-nav__link {
195+
border-color: rgba(255, 255, 255, 0.08) !important;
196+
}
197+
198+
.pagination-nav__link:hover {
199+
border-color: rgba(77, 139, 255, 0.3) !important;
200+
background: rgba(77, 139, 255, 0.05) !important;
184201
}
185202

186203
/* Scrollbar */
187-
[data-theme='dark'] ::-webkit-scrollbar {
204+
::-webkit-scrollbar {
188205
width: 6px;
189206
height: 6px;
190207
}
191-
[data-theme='dark'] ::-webkit-scrollbar-track {
208+
::-webkit-scrollbar-track {
192209
background: transparent;
193210
}
194-
[data-theme='dark'] ::-webkit-scrollbar-thumb {
211+
::-webkit-scrollbar-thumb {
195212
background: rgba(255, 255, 255, 0.15);
196213
border-radius: 3px;
197214
}
198215

216+
/* Force dark mode on html element */
217+
html {
218+
color-scheme: dark;
219+
}
220+
221+
html:not([data-theme='dark']) {
222+
--ifm-background-color: #0a0a0f;
223+
--ifm-background-surface-color: #12121a;
224+
--ifm-navbar-background-color: #0a0a0f;
225+
--ifm-footer-background-color: #060609;
226+
--ifm-font-color-base: #e6edf3;
227+
--ifm-toc-border-color: #1e1e2e;
228+
--ifm-color-emphasis-300: #2a2a3a;
229+
}
230+
199231
/* Category labels in sidebar */
200232
.menu__list-item-collapsible .menu__link {
201233
font-weight: 600;
202234
font-size: 0.82rem;
203235
text-transform: uppercase;
204236
letter-spacing: 0.06em;
205-
color: rgba(255, 255, 255, 0.5);
237+
color: rgba(255, 255, 255, 0.5) !important;
238+
}
239+
240+
[data-theme='light'] .menu__list-item-collapsible .menu__link {
241+
color: rgba(0, 0, 0, 0.45) !important;
206242
}
207243

208244
/* Search bar */
209-
[data-theme='dark'] .DocSearch-Button {
210-
background: rgba(255, 255, 255, 0.06);
211-
border: 1px solid rgba(255, 255, 255, 0.08);
212-
border-radius: 8px;
245+
.DocSearch-Button {
246+
background: rgba(255, 255, 255, 0.06) !important;
247+
border: 1px solid rgba(255, 255, 255, 0.08) !important;
248+
border-radius: 8px !important;
213249
}
214250

215251
/* Emphasis color for teal accent (like ChainScore green) */

‎src/pages/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ function Hero() {
4949
<div className={styles.heroInner}>
5050
<div className={styles.badge}>
5151
<span className={styles.badgeDot} />
52-
Live on Preprod
52+
Cardano Node
5353
</div>
5454
<h1 className={styles.title}>
5555
<span className={styles.titleSolid}>Blue</span>

0 commit comments

Comments
 (0)