fix(docs): fixed the color scheme (#2371)

* fix(docs): fixed the color scheme

Signed-off-by: Hakeem Abbas <[email protected]>

* fix(docs): colors background

Signed-off-by: Hakeem Abbas <[email protected]>

---------

Signed-off-by: Hakeem Abbas <[email protected]>

Author: hakeemsyd

docs/stylesheets/extra.css

@@ -1,106 +1,130 @@
 
-.md-header {
+/* Dark mode styles - only apply when Material theme is in dark mode (slate scheme) */
+[data-md-color-scheme="slate"] .md-header {
     background-color: #02030C !important;
 }
-.md-search__input {
+[data-md-color-scheme="slate"] .md-search__input {
     background-color: rgba(22, 18, 48, 0.40) !important;
     color: rgba(233, 219, 189, 0.90) !important;
 }
-.md-search__input::placeholder {
+[data-md-color-scheme="slate"] .md-search__input::placeholder {
     color: rgba(233, 219, 189, 0.60) !important; 
     opacity: 1;
 }
-.md-tabs {
+[data-md-color-scheme="slate"] .md-tabs {
     background-color: #02030C !important;
 }
-.md-ellipsis{
+[data-md-color-scheme="slate"] .md-ellipsis{
     color: rgba(233, 219, 189, 0.90) !important;
 }
-.md-footer {
+[data-md-color-scheme="slate"] .md-footer {
     background-color: #02030C !important;
 }
-.md-footer-meta{
+[data-md-color-scheme="slate"] .md-footer-meta{
     background-color: #02030C !important;
 }
 /* General Markdown background and text colors */
-body {
-    background-color: #02030C;
+[data-md-color-scheme="slate"] body {
+    background-color: #02030C !important;
     color: rgba(233, 219, 189, 0.90) !important;
     font-family: 'Arial', sans-serif;
 }
 
+/* Main content area background */
+[data-md-color-scheme="slate"] .md-main {
+    background-color: #02030C !important;
+}
+
+[data-md-color-scheme="slate"] .md-content {
+    background-color: #02030C !important;
+}
+
+[data-md-color-scheme="slate"] .md-content__inner {
+    background-color: #02030C !important;
+}
+
+[data-md-color-scheme="slate"] .md-typeset {
+    background-color: #02030C !important;
+    color: rgba(233, 219, 189, 0.90) !important;
+}
+
 /* Headings */
-h1, h2, h3, h4, h5, h6 {
+[data-md-color-scheme="slate"] h1, 
+[data-md-color-scheme="slate"] h2, 
+[data-md-color-scheme="slate"] h3, 
+[data-md-color-scheme="slate"] h4, 
+[data-md-color-scheme="slate"] h5, 
+[data-md-color-scheme="slate"] h6 {
     color: rgba(233, 219, 189, 0.90) !important;
 }
 
 /* Links */
-a {
+[data-md-color-scheme="slate"] a {
     color: rgba(233, 219, 189, 0.90) !important;
-
 }
-a:hover {
+[data-md-color-scheme="slate"] a:hover {
     color: rgba(233, 219, 189, 0.90) !important;
 }
 
 /* Code blocks */
-pre, code {
+[data-md-color-scheme="slate"] pre, 
+[data-md-color-scheme="slate"] code {
     background-color: rgba(22, 18, 48, 0.40) !important;
     color: rgba(233, 219, 189, 0.90) !important;
 }
 
 /* Blockquotes */
-blockquote {
+[data-md-color-scheme="slate"] blockquote {
     border-left: 4px solid rgba(233, 219, 189, 0.90);
     background-color: #02030C !important;
     color: rgba(233, 219, 189, 0.90) !important;
 }
 
-
 /* Tables */
-table {
+[data-md-color-scheme="slate"] table {
     background-color: rgba(22, 18, 48, 0.40) !important;
     color: rgba(233, 219, 189, 0.90) !important;
 }
-th, td {
+[data-md-color-scheme="slate"] th, 
+[data-md-color-scheme="slate"] td {
     background-color: rgba(22, 18, 48, 0.40) !important;
     color: rgba(233, 219, 189, 0.90) !important;
     border: 1px solid rgba(210, 198, 172, 0.08) !important; 
 }
 /* Horizontal rules */
-hr {
+[data-md-color-scheme="slate"] hr {
     background-color: rgba(22, 18, 48, 0.40) !important;
 }
-.md-search__icon.md-icon {
+[data-md-color-scheme="slate"] .md-search__icon.md-icon {
     color: rgba(233, 219, 189, 0.90) !important;
 }
 
-.md-search__icon.md-icon:hover {
+[data-md-color-scheme="slate"] .md-search__icon.md-icon:hover {
     color: rgba(233, 219, 189, 0.90) !important;
 }
-.card {
+[data-md-color-scheme="slate"] .card {
     background-color: rgba(22, 18, 48, 0.40) !important;
     border: 1px solid rgba(210, 198, 172, 0.08) !important; 
 }
 
-details {
+[data-md-color-scheme="slate"] details {
     border: 1.65px solid rgba(210, 198, 172, 0.08) !important; 
     background-color: rgba(22, 18, 48, 0.40) !important;
     color: rgba(233, 219, 189, 0.90) !important;
 }
-summary {
+[data-md-color-scheme="slate"] summary {
     background-color: rgba(22, 18, 48, 0.40) !important;
     color: rgba(233, 219, 189, 0.90) !important;
 }
-.md-header__button {
+[data-md-color-scheme="slate"] .md-header__button {
     color: rgba(233, 219, 189, 0.90) !important;
 }
-.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
+[data-md-color-scheme="slate"] .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
     background: none !important;
     box-shadow: none !important;
 }
-.md-nav--secondary .md-nav__title {
-    background: none !important; 
+[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__title {
+    background: #02030C !important; 
     box-shadow: none !important;
     color: rgba(233, 219, 189, 0.90) !important;
 }

mkdocs.yml

@@ -7,28 +7,27 @@ theme:
   name: material
   custom_dir: docs/overrides
   palette:
-    # Palette toggle for automatic mode
-    - media: "(prefers-color-scheme)"
-      scheme: default
+    # Default dark mode
+    - scheme: slate
       primary: black
       toggle:
-        icon: material/brightness-auto
+        icon: material/brightness-7
         name: Switch to light mode
 
-    # Palette toggle for light mode
+    # Light mode
     - media: "(prefers-color-scheme: light)"
       scheme: default
       primary: black
       toggle:
-        icon: material/brightness-7
+        icon: material/brightness-4
         name: Switch to dark mode
 
-    # Palette toggle for dark mode
+    # System preference (dark)
     - media: "(prefers-color-scheme: dark)"
       scheme: slate
       primary: black
       toggle:
-        icon: material/brightness-4
+        icon: material/brightness-auto
         name: Switch to system preference
 
   logo: assets/logo.png