refactor: Simplify and consolidate dark mode styling for navigation, sidebar, header, and search elements.

Author: bhaskar0210s

docs/stylesheets/custom.css

@@ -168,124 +168,45 @@ nav.md-nav--primary .md-nav__item--section > .md-nav__link {
 }
 
 /* Ensure navigation bar and sidebar respect dark mode */
-nav.md-nav--primary,
-.md-sidebar--primary {
-  background-color: var(--md-default-bg-color) !important;
-}
-
-/* Explicitly set dark mode background for navigation and sidebar */
 [data-md-color-scheme="slate"] nav.md-nav--primary,
-[data-md-color-scheme="slate"] .md-sidebar--primary {
-  background-color: var(--md-default-bg-color) !important;
-}
-
-/* Additional specificity for sidebar inner elements */
-.md-sidebar--primary .md-sidebar__scrollwrap,
-.md-sidebar--primary .md-sidebar__inner {
+[data-md-color-scheme="slate"] .md-sidebar--primary,
+[data-md-color-scheme="slate"] .md-sidebar--primary .md-sidebar__scrollwrap,
+[data-md-color-scheme="slate"] .md-sidebar--primary .md-sidebar__inner {
   background-color: var(--md-default-bg-color) !important;
 }
 
 /* Fix top navigation bar (header) for dark mode */
-/* Material theme uses --md-primary-fg-color for header, we need to override it */
-.md-header {
-  background-color: var(--md-default-bg-color) !important;
-}
-
-[data-md-color-scheme="slate"] .md-header {
-  background-color: var(--md-default-bg-color) !important;
-  color: var(--md-default-fg-color) !important;
-}
-
-/* Also fix header inner container */
-.md-header__inner {
-  background-color: var(--md-default-bg-color) !important;
-}
-
+[data-md-color-scheme="slate"] .md-header,
 [data-md-color-scheme="slate"] .md-header__inner {
   background-color: var(--md-default-bg-color) !important;
-  color: var(--md-default-fg-color) !important;
 }
 
-/* Fix header text elements for dark mode */
-[data-md-color-scheme="slate"] .md-header__title,
-[data-md-color-scheme="slate"] .md-header__topic,
-[data-md-color-scheme="slate"] .md-header__ellipsis,
-[data-md-color-scheme="slate"] .md-header__button,
-[data-md-color-scheme="slate"] .md-header__button svg,
-[data-md-color-scheme="slate"] .md-header__button path {
+/* Fix all header text, links, buttons, labels, and general content */
+[data-md-color-scheme="slate"] .md-header,
+[data-md-color-scheme="slate"] .md-header * {
   color: var(--md-default-fg-color) !important;
-  fill: var(--md-default-fg-color) !important;
 }
 
-/* Fix all header links and text */
-[data-md-color-scheme="slate"] .md-header a,
-[data-md-color-scheme="slate"] .md-header__title a,
-[data-md-color-scheme="slate"] .md-header__topic a,
-[data-md-color-scheme="slate"] .md-header__ellipsis a,
-[data-md-color-scheme="slate"] .md-header__source a,
-[data-md-color-scheme="slate"] .md-header__nav a {
-  color: var(--md-default-fg-color) !important;
-}
-
-/* Fix header icons and SVG elements */
+/* Fix header SVG icons */
 [data-md-color-scheme="slate"] .md-header svg,
-[data-md-color-scheme="slate"] .md-header path,
-[data-md-color-scheme="slate"] .md-header__button svg,
-[data-md-color-scheme="slate"] .md-header__button path,
-[data-md-color-scheme="slate"] .md-header__icon,
-[data-md-color-scheme="slate"] .md-header .md-icon {
-  color: var(--md-default-fg-color) !important;
+[data-md-color-scheme="slate"] .md-header path {
   fill: var(--md-default-fg-color) !important;
-  stroke: var(--md-default-fg-color) !important;
 }
 
-/* Fix header labels */
-[data-md-color-scheme="slate"] .md-header label,
-[data-md-color-scheme="slate"] .md-header__button label {
-  color: var(--md-default-fg-color) !important;
-}
-
-/* Fix search input fields in header */
-[data-md-color-scheme="slate"] .md-header input,
-[data-md-color-scheme="slate"] .md-header input[type="text"],
-[data-md-color-scheme="slate"] .md-header input[type="search"],
-[data-md-color-scheme="slate"] .md-search__input,
-[data-md-color-scheme="slate"] .md-search__input::placeholder {
+/* Fix search input fields */
+[data-md-color-scheme="slate"] .md-search__input {
   color: var(--md-default-fg-color) !important;
   background-color: var(--md-default-bg-color) !important;
   border-color: var(--md-default-fg-color--light) !important;
 }
 
 [data-md-color-scheme="slate"] .md-search__input::placeholder {
   color: var(--md-default-fg-color--light) !important;
-  opacity: 0.7;
 }
 
 /* Fix search icon */
-[data-md-color-scheme="slate"] .md-search__icon,
 [data-md-color-scheme="slate"] .md-search__icon svg,
 [data-md-color-scheme="slate"] .md-search__icon path {
-  color: var(--md-default-fg-color) !important;
-  fill: var(--md-default-fg-color) !important;
-}
-
-/* Fix header source/repository info */
-[data-md-color-scheme="slate"] .md-header__source {
-  color: var(--md-default-fg-color) !important;
-}
-
-/* Fix all text content in header */
-[data-md-color-scheme="slate"] .md-header span,
-[data-md-color-scheme="slate"] .md-header div,
-[data-md-color-scheme="slate"] .md-header p {
-  color: var(--md-default-fg-color) !important;
-}
-
-/* Fix header logo */
-[data-md-color-scheme="slate"] .md-header__button.md-logo,
-[data-md-color-scheme="slate"] .md-header__button.md-logo img,
-[data-md-color-scheme="slate"] .md-header__button.md-logo svg {
-  color: var(--md-default-fg-color) !important;
   fill: var(--md-default-fg-color) !important;
 }
 /* Community Resources cards */