Customize color theme for docs

docs/overrides/stylesheets/extra.css

@@ -1,52 +1,214 @@
-:root,
-[data-md-color-scheme="default"] {
-  /* --md-primary-fg-color: #cf3f02;
-  --md-default-fg-color: #443f3f; */
-  --boxShadowD: 0px 12px 24px 0px rgba(68, 63, 63, 0.08),
-    0px 0px 4px 0px rgba(68, 63, 63, 0.08);
-}
-body {
-  margin: 0;
-  padding: 0;
-  /* font-size: 16px; */
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--md-heading-font);
-  font-weight: bold;
-}
-.md-typeset h1,
-.md-typeset h2 {
-  font-weight: normal;
-  color: var(--md-default-fg-color);
-}
-.md-typeset h3,
-.md-typeset h4 {
-  font-weight: bold;
-  color: var(--md-default-fg-color);
-}
-.md-button,
-.md-typeset .md-button {
-  font-family: var(--md-heading-font);
-}
-.md-content .supheading {
-  font-family: var(--md-heading-font);
-  text-transform: uppercase;
+:root {
+  --gradient-start: #e58077;
+  --gradient-mid-1: #e57a77;
+  --gradient-mid-2: #e46876;
+  --gradient-mid-3: #e34b75;
+  --gradient-mid-4: #e12374;
+  --gradient-mid-5: #e01073;
+  --gradient-end: #bb1085;
+
+  /* Primary theme colors
+  --md-primary-fg-color: #e34b75;
+  --md-primary-fg-color--light: #e57a77;
+  --md-primary-fg-color--dark: #bb1085;
+
+  /* Accent colors */
+  --md-accent-fg-color: #e01073;
+  --md-accent-fg-color--transparent: rgba(224, 16, 115, 0.1);
+
+  /* Text colors that work well with the palette */
+  --md-text-color: #333333;
+  --md-text-color--light: #666666;
+}
+
+/* Dark mode color adjustments */
+[data-md-color-scheme="slate"] {
+  --md-primary-fg-color: #e57a77;
+  --md-primary-fg-color--light: #e58077;
+  --md-primary-fg-color--dark: #bb1085;
+  --md-accent-fg-color: #e46876;
+  --md-accent-fg-color--transparent: rgba(228, 104, 118, 0.1);
+}
+
+/* Header styling with gradient background */
+.md-header {
+  background: linear-gradient(
+    135deg,
+    var(--gradient-start) 0%,
+    var(--gradient-mid-1) 16.66%,
+    var(--gradient-mid-2) 33.33%,
+    var(--gradient-mid-3) 50%,
+    var(--gradient-mid-4) 66.66%,
+    var(--gradient-mid-5) 83.33%,
+    var(--gradient-end) 100%
+  );
+  box-shadow: 0 2px 8px rgba(187, 16, 133, 0.15);
+}
+
+/* Ensure header text is readable over gradient */
+.md-header__title,
+.md-header__button,
+.md-header .md-icon {
+  color: white;
+}
+
+/* Search box styling */
+.md-search__input {
+  background-color: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: white;
+}
+
+.md-search__input::placeholder {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Navigation tabs */
+.md-tabs {
+  background: linear-gradient(
+    90deg,
+    var(--gradient-mid-3) 0%,
+    var(--gradient-mid-4) 50%,
+    var(--gradient-mid-5) 100%
+  );
+}
+
+.md-tabs__link {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.md-tabs__link--active,
+.md-tabs__link:hover {
+  color: white;
+  opacity: 1;
+}
+
+/* Sidebar navigation */
+.md-nav__link--active {
+  color: var(--md-primary-fg-color);
+  font-weight: 500;
+}
+
+.md-nav__link:hover {
+  color: var(--md-accent-fg-color);
+}
+
+/* Code blocks */
+.highlight {
+  border-left: 4px solid var(--md-accent-fg-color);
+  background-color: rgba(228, 104, 118, 0.05);
+}
+
+/* Admonitions */
+.md-typeset .admonition.note {
+  border-color: var(--md-primary-fg-color);
+}
+
+.md-typeset .admonition.note > .admonition-title {
+  background-color: rgba(227, 75, 117, 0.1);
+  border-color: var(--md-primary-fg-color);
+}
+
+.md-typeset .admonition.tip {
+  border-color: var(--gradient-mid-1);
+}
+
+.md-typeset .admonition.tip > .admonition-title {
+  background-color: rgba(229, 122, 119, 0.1);
+  border-color: var(--gradient-mid-1);
+}
+
+.md-typeset .admonition.warning {
+  border-color: var(--gradient-end);
+}
+
+.md-typeset .admonition.warning > .admonition-title {
+  background-color: rgba(187, 16, 133, 0.1);
+  border-color: var(--gradient-end);
+}
+
+/* Links */
+.md-content a {
+  color: var(--md-accent-fg-color);
+}
+
+.md-content a:hover {
+  color: var(--gradient-end);
+}
+
+/* Table of contents */
+.md-nav--secondary .md-nav__link--active {
+  color: var(--md-accent-fg-color);
+  border-left: 2px solid var(--md-accent-fg-color);
+  padding-left: calc(1rem - 2px);
+}
+
+/* Footer */
+.md-footer {
+  background-color: var(--gradient-end);
+}
+
+/* Buttons and interactive elements */
+.md-button {
+  background: linear-gradient(135deg, var(--md-primary-fg-color), var(--md-accent-fg-color));
+  border: none;
+  color: white;
+  transition: all 0.3s ease;
+}
+
+.md-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(187, 16, 133, 0.3);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(187, 16, 133, 0.1);
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(
+    180deg,
+    var(--md-primary-fg-color),
+    var(--md-accent-fg-color)
+  );
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(
+    180deg,
+    var(--md-accent-fg-color),
+    var(--gradient-end)
+  );
+}
+
+/* Search results highlighting */
+.md-search-result__title {
   color: var(--md-primary-fg-color);
-  font-size: 0.75rem;
-  font-weight: bold;
+}
+
+.md-search-result__teaser mark {
+  background-color: rgba(224, 16, 115, 0.2);
+  color: var(--gradient-end);
 }
 
 .md-header__button.md-logo img,
 .md-header__button.md-logo svg {
-  height: 2rem;
-  width: auto;
+    height: 42px !important;  /* Increase from default ~24px */
+    width: auto !important;
+    max-height: none !important;
+    padding: 0 0 0 16px !important;  /* Keep left padding, remove others */
+    margin: 0 !important;   /* Remove any margin */
 }
 
-.md-header {
-  padding: 0.2rem 0;
+/* Also remove padding from the logo button container except left */
+.md-header__button.md-logo {
+    padding: 0 0 0 8px !important;  /* Keep some left padding on container */
+    margin: 0 !important;
+    min-width: auto !important;
 }

mkdocs.yml

@@ -62,30 +62,26 @@ theme:
   language: en
   name: material
   custom_dir: docs/overrides
-  logo: _static/logo_horizontal.svg
-  palette:
-    # Palette toggle for automatic mode
-    - media: "(prefers-color-scheme)"
-      toggle:
-        icon: material/brightness-auto
-        name: Switch to light mode
+  logo: _static/logo_bw.png
 
-    # Palette toggle for light mode
+  palette:
+    # Light mode
     - media: "(prefers-color-scheme: light)"
-      primary: blue grey
-      accent: pink
+      scheme: default
+      primary: custom
+      accent: custom
       toggle:
         icon: material/brightness-7
         name: Switch to dark mode
 
-    # Palette toggle for dark mode
+    # Dark mode
     - media: "(prefers-color-scheme: dark)"
       scheme: slate
-      primary: grey
-      accent: pink
+      primary: custom
+      accent: custom
       toggle:
         icon: material/brightness-4
-        name: Switch to system preference
+        name: Switch to light mode
 
   font:
     text: Roboto