Skip to content

Remove light mode for maintainability #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AjdinDev merged 4 commits into from
Aug 12, 2025
Merged

Remove light mode for maintainability #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b35b6cb
Remove lightmode from docusaurus configfile
AjdinDev Aug 12, 2025
aa5c744
Remove light-specific styling from CSS
AjdinDev Aug 12, 2025
ab3cc70
Fix dropdown text
AjdinDev Aug 12, 2025
918381b
Fix arrow visibility
AjdinDev Aug 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docusaurus.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,8 +278,8 @@ const config: Config = {
// Enhanced color mode configuration
colorMode: {
defaultMode: 'dark',
disableSwitch: false,
respectPrefersColorScheme: true,
disableSwitch: true,
respectPrefersColorScheme: false,
},

navbar: {
Expand Down
153 changes: 66 additions & 87 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@
* Professional and corporate appearance
*/

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

/* Secondary and status colors */
--ifm-color-secondary: #2d7dd2;
Expand All @@ -25,29 +25,29 @@
--ifm-color-danger: #ef4444;

/* Background colors */
--ifm-background-color: #ffffff;
--ifm-background-surface-color: #f8fafc;
--ifm-background-color: #0f172a;
--ifm-background-surface-color: #1e293b;

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

/* Border and divider colors */
--ifm-color-emphasis-100: #f7fafc;
--ifm-color-emphasis-200: #edf2f7;
--ifm-color-emphasis-300: #e2e8f0;
--ifm-color-emphasis-400: #cbd5e0;
--ifm-color-emphasis-100: #334155;
--ifm-color-emphasis-200: #475569;
--ifm-color-emphasis-300: #64748b;
--ifm-color-emphasis-400: #94a3b8;

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

/* Code block colors */
--ifm-code-background: #f7fafc;
--ifm-code-color: #2d3748;
--ifm-code-background: #1e293b;
--ifm-code-color: #e2e8f0;
}

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

/* Light mode specific overrides - Enhanced contrast */
:root .menu__link {
color: #1a202c !important; /* Dark text for light background */
}

:root .menu__link--active {
background-color: var(--ifm-color-primary) !important;
color: white !important;
font-weight: 600 !important;
}

/* Higher specificity for active links in light mode */
:root .menu__list-item .menu__link--active {
background-color: var(--ifm-color-primary) !important;
color: white !important;
font-weight: 600 !important;
/* Menu link styling for dark mode */
.menu__link {
color: #f1f5f9 !important; /* Light text for dark background */
}

/* Nested menu active links */
:root .menu__list .menu__list .menu__link--active {
.menu__link--active {
background-color: var(--ifm-color-primary) !important;
color: white !important;
font-weight: 600 !important;
}

:root .menu__list-item .menu__link {
color: #4a5568 !important; /* Slightly lighter for hierarchy */
}

:root .menu__list-item .menu__link:hover {
color: #1a202c !important; /* Darker on hover for better contrast */
}

/* Dark mode specific overrides */
[data-theme='dark'] .menu__link {
color: #f1f5f9 !important; /* Light text for dark background */
Expand All @@ -291,28 +269,33 @@ code {
color: white !important;
}

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

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

/* Ensure dropdown headers stay bright */
[data-theme='dark'] .menu__list-item-collapsible > .menu__link {
color: #f1f5f9 !important;
}

/* Additional contrast for category labels */
.menu__list-item-collapsible .menu__link {
font-weight: 600;
color: var(--ifm-color-content) !important;
color: #f1f5f9 !important; /* Same as regular menu items */
}

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

.menu__list .menu__list .menu__link:hover {
color: var(--ifm-color-content) !important;
color: #f1f5f9 !important; /* Brighter on hover */
}

/* API-specific styling */
Expand Down Expand Up @@ -529,13 +512,11 @@ code {
font-weight: 400;
}

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

[data-theme='light'] .hero--primary .hero__subtitle,
[data-theme='dark'] .hero--primary .hero__subtitle {
color: rgba(255, 255, 255, 0.95) !important;
}
Expand Down Expand Up @@ -570,23 +551,7 @@ code {
--ifm-menu-color-background-active: var(--ifm-color-primary);
}

/* Force proper styling for active sidebar items in light mode - ONLY for actual page links */
html[data-theme='light'] .menu__link--active:not(.menu__link--sublist),
html[data-theme='light'] .menu__list-item:not(.menu__list-item-collapsible) .menu__link--active {
background-color: var(--ifm-color-primary) !important;
color: #ffffff !important;
font-weight: 600 !important;
border-radius: 6px !important;
}

/* Ensure hover states don't override active styles in light mode - ONLY for actual page links */
html[data-theme='light'] .menu__link--active:not(.menu__link--sublist):hover,
html[data-theme='light'] .menu__list-item:not(.menu__list-item-collapsible) .menu__link--active:hover {
background-color: var(--ifm-color-primary-dark) !important;
color: #ffffff !important;
}

/* Dark mode equivalents for consistency - ONLY for actual page links */
/* Force proper styling for active sidebar items in dark mode - ONLY for actual page links */
html[data-theme='dark'] .menu__link--active:not(.menu__link--sublist),
html[data-theme='dark'] .menu__list-item:not(.menu__list-item-collapsible) .menu__link--active {
background-color: var(--ifm-color-primary) !important;
Expand All @@ -601,26 +566,40 @@ html[data-theme='dark'] .menu__list-item:not(.menu__list-item-collapsible) .menu
color: #ffffff !important;
}

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

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

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

html[data-theme='dark'] .menu__list-item-collapsible .menu__link:hover {
color: var(--ifm-color-content) !important;
background-color: var(--ifm-color-emphasis-100) !important;
/* Rotate arrow when expanded */
.menu__list-item:not(.menu__list-item--collapsed) .menu__caret::after {
transform: rotate(90deg);
}

/* Ensure dark mode visibility */
html[data-theme='dark'] .menu__caret::after {
color: #f1f5f9 !important;
}

/* Hover state */
html[data-theme='dark'] .menu__list-item-collapsible:hover .menu__caret::after {
color: #f1f5f9 !important;
opacity: 1;
}