From b35b6cbc3d6b42778466436297195e9840a0145b Mon Sep 17 00:00:00 2001 From: AjdinDev Date: Tue, 12 Aug 2025 21:45:17 +0200 Subject: [PATCH 1/4] Remove lightmode from docusaurus configfile --- docusaurus.config.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 86ee5d4..4ea4f68 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -278,8 +278,8 @@ const config: Config = { // Enhanced color mode configuration colorMode: { defaultMode: 'dark', - disableSwitch: false, - respectPrefersColorScheme: true, + disableSwitch: true, + respectPrefersColorScheme: false, }, navbar: { From aa5c744d3c17d6872ed0a42cfa212d7df5ed7038 Mon Sep 17 00:00:00 2001 From: AjdinDev Date: Tue, 12 Aug 2025 21:46:38 +0200 Subject: [PATCH 2/4] Remove light-specific styling from CSS --- src/css/custom.css | 106 ++++++++++++--------------------------------- 1 file changed, 27 insertions(+), 79 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 8b09934..927bd7c 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -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; @@ -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; @@ -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 */ @@ -529,13 +507,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; } @@ -570,23 +546,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; @@ -601,18 +561,6 @@ 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; - 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; -} - /* 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; From ab3cc702b01ddb2b84d282701d2cb3516a4656b4 Mon Sep 17 00:00:00 2001 From: AjdinDev Date: Tue, 12 Aug 2025 21:53:07 +0200 Subject: [PATCH 3/4] Fix dropdown text --- src/css/custom.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 927bd7c..86b81c8 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -280,17 +280,17 @@ code { /* Additional contrast for category labels */ .menu__list-item-collapsible .menu__link { font-weight: 600; - color: var(--ifm-color-content) !important; + color: #94a3b8 !important; /* Darker color for dropdown headers */ } /* 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 */ @@ -563,12 +563,12 @@ html[data-theme='dark'] .menu__list-item:not(.menu__list-item-collapsible) .menu /* 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; + color: #94a3b8 !important; /* Darker grey for better distinction */ background-color: transparent !important; font-weight: 600 !important; } 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; + color: #cbd5e1 !important; /* Lighter on hover */ + background-color: rgba(51, 65, 85, 0.5) !important; /* Subtle background on hover */ } From 918381b5f9471fcb7636f9d5e788e2220bde146b Mon Sep 17 00:00:00 2001 From: AjdinDev Date: Tue, 12 Aug 2025 22:02:31 +0200 Subject: [PATCH 4/4] Fix arrow visibility --- src/css/custom.css | 43 +++++++++++++++++++++++++++++++++++++------ 1 file changed, 37 insertions(+), 6 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 86b81c8..dca2c18 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -269,18 +269,23 @@ 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: #94a3b8 !important; /* Darker color for dropdown headers */ + color: #f1f5f9 !important; /* Same as regular menu items */ } /* Ensure proper contrast for nested items */ @@ -563,12 +568,38 @@ html[data-theme='dark'] .menu__list-item:not(.menu__list-item-collapsible) .menu /* Restore proper styling for collapsible/dropdown category headers in dark mode */ html[data-theme='dark'] .menu__list-item-collapsible .menu__link { - color: #94a3b8 !important; /* Darker grey for better distinction */ + color: #f1f5f9 !important; /* Same as regular menu items */ background-color: transparent !important; font-weight: 600 !important; } html[data-theme='dark'] .menu__list-item-collapsible .menu__link:hover { - color: #cbd5e1 !important; /* Lighter on hover */ + color: #f1f5f9 !important; /* Keep same color on hover */ background-color: rgba(51, 65, 85, 0.5) !important; /* Subtle background on hover */ } + +/* 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; +} + +/* 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; +}