Skip to content

Commit 5768502

Browse files
AjdinDevAjdinDev
authored
Merge pull request #5 from NETVPX/remove-light-mode-for-maintainability
Remove light mode for maintainability
2 parents f9a1f92 + 918381b commit 5768502

2 files changed

Lines changed: 68 additions & 89 deletions

File tree

‎docusaurus.config.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -278,8 +278,8 @@ const config: Config = {
278278
// Enhanced color mode configuration
279279
colorMode: {
280280
defaultMode: 'dark',
281-
disableSwitch: false,
282-
respectPrefersColorScheme: true,
281+
disableSwitch: true,
282+
respectPrefersColorScheme: false,
283283
},
284284

285285
navbar: {

‎src/css/custom.css‎

Lines changed: 66 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77
* Professional and corporate appearance
88
*/
99

10-
/* Light mode */
10+
/* Dark mode only - removed light mode for maintainability */
1111
:root {
12-
--ifm-color-primary: #1a365d;
13-
--ifm-color-primary-dark: #153955;
14-
--ifm-color-primary-darker: #133650;
15-
--ifm-color-primary-darkest: #0f2a42;
16-
--ifm-color-primary-light: #1f4365;
17-
--ifm-color-primary-lighter: #21476a;
18-
--ifm-color-primary-lightest: #285a7a;
12+
--ifm-color-primary: #2d7dd2;
13+
--ifm-color-primary-dark: #2563eb;
14+
--ifm-color-primary-darker: #1d4ed8;
15+
--ifm-color-primary-darkest: #1e40af;
16+
--ifm-color-primary-light: #3b82f6;
17+
--ifm-color-primary-lighter: #60a5fa;
18+
--ifm-color-primary-lightest: #93c5fd;
1919

2020
/* Secondary and status colors */
2121
--ifm-color-secondary: #2d7dd2;
@@ -25,29 +25,29 @@
2525
--ifm-color-danger: #ef4444;
2626

2727
/* Background colors */
28-
--ifm-background-color: #ffffff;
29-
--ifm-background-surface-color: #f8fafc;
28+
--ifm-background-color: #0f172a;
29+
--ifm-background-surface-color: #1e293b;
3030

3131
/* Content colors - improved contrast */
32-
--ifm-color-content: #1a202c;
33-
--ifm-color-content-secondary: #4a5568;
32+
--ifm-color-content: #f1f5f9;
33+
--ifm-color-content-secondary: #cbd5e1;
3434

3535
/* Border and divider colors */
36-
--ifm-color-emphasis-100: #f7fafc;
37-
--ifm-color-emphasis-200: #edf2f7;
38-
--ifm-color-emphasis-300: #e2e8f0;
39-
--ifm-color-emphasis-400: #cbd5e0;
36+
--ifm-color-emphasis-100: #334155;
37+
--ifm-color-emphasis-200: #475569;
38+
--ifm-color-emphasis-300: #64748b;
39+
--ifm-color-emphasis-400: #94a3b8;
4040

4141
/* Link colors */
42-
--ifm-link-color: #1a365d;
43-
--ifm-link-hover-color: #2d7dd2;
42+
--ifm-link-color: #60a5fa;
43+
--ifm-link-hover-color: #93c5fd;
4444

4545
/* Code block colors */
46-
--ifm-code-background: #f7fafc;
47-
--ifm-code-color: #2d3748;
46+
--ifm-code-background: #1e293b;
47+
--ifm-code-color: #e2e8f0;
4848
}
4949

50-
/* Dark mode */
50+
/* Keep dark theme specific overrides for Docusaurus compatibility */
5151
[data-theme='dark'] {
5252
--ifm-color-primary: #2d7dd2;
5353
--ifm-color-primary-dark: #2563eb;
@@ -248,39 +248,17 @@ code {
248248
color: white !important;
249249
}
250250

251-
/* Light mode specific overrides - Enhanced contrast */
252-
:root .menu__link {
253-
color: #1a202c !important; /* Dark text for light background */
254-
}
255-
256-
:root .menu__link--active {
257-
background-color: var(--ifm-color-primary) !important;
258-
color: white !important;
259-
font-weight: 600 !important;
260-
}
261-
262-
/* Higher specificity for active links in light mode */
263-
:root .menu__list-item .menu__link--active {
264-
background-color: var(--ifm-color-primary) !important;
265-
color: white !important;
266-
font-weight: 600 !important;
251+
/* Menu link styling for dark mode */
252+
.menu__link {
253+
color: #f1f5f9 !important; /* Light text for dark background */
267254
}
268255

269-
/* Nested menu active links */
270-
:root .menu__list .menu__list .menu__link--active {
256+
.menu__link--active {
271257
background-color: var(--ifm-color-primary) !important;
272258
color: white !important;
273259
font-weight: 600 !important;
274260
}
275261

276-
:root .menu__list-item .menu__link {
277-
color: #4a5568 !important; /* Slightly lighter for hierarchy */
278-
}
279-
280-
:root .menu__list-item .menu__link:hover {
281-
color: #1a202c !important; /* Darker on hover for better contrast */
282-
}
283-
284262
/* Dark mode specific overrides */
285263
[data-theme='dark'] .menu__link {
286264
color: #f1f5f9 !important; /* Light text for dark background */
@@ -291,28 +269,33 @@ code {
291269
color: white !important;
292270
}
293271

294-
[data-theme='dark'] .menu__list-item .menu__link {
295-
color: #cbd5e1 !important; /* Slightly darker for hierarchy */
272+
[data-theme='dark'] .menu__list-item:not(.menu__list-item-collapsible) .menu__link {
273+
color: #cbd5e1 !important; /* Slightly darker for hierarchy - but not dropdowns */
296274
}
297275

298-
[data-theme='dark'] .menu__list-item .menu__link:hover {
276+
[data-theme='dark'] .menu__list-item:not(.menu__list-item-collapsible) .menu__link:hover {
299277
color: #f1f5f9 !important; /* Brighter on hover for better contrast */
300278
}
301279

280+
/* Ensure dropdown headers stay bright */
281+
[data-theme='dark'] .menu__list-item-collapsible > .menu__link {
282+
color: #f1f5f9 !important;
283+
}
284+
302285
/* Additional contrast for category labels */
303286
.menu__list-item-collapsible .menu__link {
304287
font-weight: 600;
305-
color: var(--ifm-color-content) !important;
288+
color: #f1f5f9 !important; /* Same as regular menu items */
306289
}
307290

308291
/* Ensure proper contrast for nested items */
309292
.menu__list .menu__list .menu__link {
310293
padding-left: 1.5rem;
311-
color: var(--ifm-color-content-secondary) !important;
294+
color: #cbd5e1 !important; /* Good contrast for nested items */
312295
}
313296

314297
.menu__list .menu__list .menu__link:hover {
315-
color: var(--ifm-color-content) !important;
298+
color: #f1f5f9 !important; /* Brighter on hover */
316299
}
317300

318301
/* API-specific styling */
@@ -529,13 +512,11 @@ code {
529512
font-weight: 400;
530513
}
531514

532-
/* Ensure hero elements are visible in both themes */
533-
[data-theme='light'] .hero--primary .hero__title,
515+
/* Ensure hero elements are visible in dark theme */
534516
[data-theme='dark'] .hero--primary .hero__title {
535517
color: #ffffff !important;
536518
}
537519

538-
[data-theme='light'] .hero--primary .hero__subtitle,
539520
[data-theme='dark'] .hero--primary .hero__subtitle {
540521
color: rgba(255, 255, 255, 0.95) !important;
541522
}
@@ -570,23 +551,7 @@ code {
570551
--ifm-menu-color-background-active: var(--ifm-color-primary);
571552
}
572553

573-
/* Force proper styling for active sidebar items in light mode - ONLY for actual page links */
574-
html[data-theme='light'] .menu__link--active:not(.menu__link--sublist),
575-
html[data-theme='light'] .menu__list-item:not(.menu__list-item-collapsible) .menu__link--active {
576-
background-color: var(--ifm-color-primary) !important;
577-
color: #ffffff !important;
578-
font-weight: 600 !important;
579-
border-radius: 6px !important;
580-
}
581-
582-
/* Ensure hover states don't override active styles in light mode - ONLY for actual page links */
583-
html[data-theme='light'] .menu__link--active:not(.menu__link--sublist):hover,
584-
html[data-theme='light'] .menu__list-item:not(.menu__list-item-collapsible) .menu__link--active:hover {
585-
background-color: var(--ifm-color-primary-dark) !important;
586-
color: #ffffff !important;
587-
}
588-
589-
/* Dark mode equivalents for consistency - ONLY for actual page links */
554+
/* Force proper styling for active sidebar items in dark mode - ONLY for actual page links */
590555
html[data-theme='dark'] .menu__link--active:not(.menu__link--sublist),
591556
html[data-theme='dark'] .menu__list-item:not(.menu__list-item-collapsible) .menu__link--active {
592557
background-color: var(--ifm-color-primary) !important;
@@ -601,26 +566,40 @@ html[data-theme='dark'] .menu__list-item:not(.menu__list-item-collapsible) .menu
601566
color: #ffffff !important;
602567
}
603568

604-
/* Restore proper styling for collapsible/dropdown category headers in light mode */
605-
html[data-theme='light'] .menu__list-item-collapsible .menu__link {
606-
color: var(--ifm-color-content) !important;
569+
/* Restore proper styling for collapsible/dropdown category headers in dark mode */
570+
html[data-theme='dark'] .menu__list-item-collapsible .menu__link {
571+
color: #f1f5f9 !important; /* Same as regular menu items */
607572
background-color: transparent !important;
608573
font-weight: 600 !important;
609574
}
610575

611-
html[data-theme='light'] .menu__list-item-collapsible .menu__link:hover {
612-
color: var(--ifm-color-content) !important;
613-
background-color: var(--ifm-color-emphasis-100) !important;
576+
html[data-theme='dark'] .menu__list-item-collapsible .menu__link:hover {
577+
color: #f1f5f9 !important; /* Keep same color on hover */
578+
background-color: rgba(51, 65, 85, 0.5) !important; /* Subtle background on hover */
614579
}
615580

616-
/* Restore proper styling for collapsible/dropdown category headers in dark mode */
617-
html[data-theme='dark'] .menu__list-item-collapsible .menu__link {
618-
color: var(--ifm-color-content) !important;
619-
background-color: transparent !important;
620-
font-weight: 600 !important;
581+
/* Fix dropdown arrow visibility - using Unicode arrow only */
582+
.menu__caret::after {
583+
content: '▶';
584+
color: #f1f5f9;
585+
font-size: 0.6rem;
586+
transition: transform 0.2s;
587+
display: inline-block;
588+
line-height: 1;
621589
}
622590

623-
html[data-theme='dark'] .menu__list-item-collapsible .menu__link:hover {
624-
color: var(--ifm-color-content) !important;
625-
background-color: var(--ifm-color-emphasis-100) !important;
591+
/* Rotate arrow when expanded */
592+
.menu__list-item:not(.menu__list-item--collapsed) .menu__caret::after {
593+
transform: rotate(90deg);
594+
}
595+
596+
/* Ensure dark mode visibility */
597+
html[data-theme='dark'] .menu__caret::after {
598+
color: #f1f5f9 !important;
599+
}
600+
601+
/* Hover state */
602+
html[data-theme='dark'] .menu__list-item-collapsible:hover .menu__caret::after {
603+
color: #f1f5f9 !important;
604+
opacity: 1;
626605
}

0 commit comments

Comments
 (0)