From ca9e49a472e97eb4d09d428091a14d1db53ecba1 Mon Sep 17 00:00:00 2001
From: Martin Beroiz <martin.beroiz@ligo.org>
Date: Wed, 29 Dec 2021 10:29:41 -0800
Subject: [PATCH] Added option for a custom primary and accent color

---
 sphinx_material/sphinx_material/layout.html   |  6 ++++
 .../static/stylesheets/application-fixes.css  | 12 +++++++
 .../stylesheets/application-palette.css       | 32 +++++++++++++++++++
 sphinx_material/sphinx_material/theme.conf    |  8 +++--
 4 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/sphinx_material/sphinx_material/layout.html b/sphinx_material/sphinx_material/layout.html
index e86343c25..040c5e3dc 100644
--- a/sphinx_material/sphinx_material/layout.html
+++ b/sphinx_material/sphinx_material/layout.html
@@ -58,6 +58,12 @@
   {% if theme_touch_icon %}
     <link rel="apple-touch-icon" href="{{ pathto('_static/' ~ theme_touch_icon, 1) }}"/>
   {% endif %}
+  <style>
+    :root {
+      --custom-color-primary: #{{ theme_custom_color_primary }};
+      --custom-color-accent: #{{ theme_custom_color_accent }};
+    }
+  </style>
   {{ super() }}
 {% endblock %}
 
diff --git a/sphinx_material/sphinx_material/static/stylesheets/application-fixes.css b/sphinx_material/sphinx_material/static/stylesheets/application-fixes.css
index a65d194b7..ab9670a81 100644
--- a/sphinx_material/sphinx_material/static/stylesheets/application-fixes.css
+++ b/sphinx_material/sphinx_material/static/stylesheets/application-fixes.css
@@ -175,6 +175,14 @@ table.longtable.docutils.align-default {
     }
 }
 
+[data-md-color-primary=custom] .md-nav__extra_link:active {
+    color: var(--custom-color-primary)
+}
+
+[data-md-color-primary=custom] .md-nav__item--nested > .md-nav__extra_link {
+    color: inherit
+}
+
 [data-md-color-primary=red] .md-nav__extra_link:active {
     color: #ef5350
 }
@@ -327,6 +335,10 @@ table.longtable.docutils.align-default {
     color: inherit
 }
 
+[data-md-color-accent=custom] .md-nav__extra_link:focus, [data-md-color-accent=custom] .md-nav__extra_link:hover {
+    color: var(--custom-color-accent)
+}
+
 [data-md-color-accent=red] .md-nav__extra_link:focus, [data-md-color-accent=red] .md-nav__extra_link:hover {
     color: #ff1744
 }
diff --git a/sphinx_material/sphinx_material/static/stylesheets/application-palette.css b/sphinx_material/sphinx_material/static/stylesheets/application-palette.css
index 5eadc1c5b..9d95474bd 100644
--- a/sphinx_material/sphinx_material/static/stylesheets/application-palette.css
+++ b/sphinx_material/sphinx_material/static/stylesheets/application-palette.css
@@ -16,6 +16,28 @@ button[data-md-color-primary]:hover {
     opacity: .75
 }
 
+button[data-md-color-primary=custom] {
+    background-color: var(--custom-color-primary)
+}
+
+[data-md-color-primary=custom] .md-typeset a {
+    color: var(--custom-color-primary)
+}
+
+[data-md-color-primary=custom] .md-header,
+[data-md-color-primary=custom] .md-hero {
+    background-color: var(--custom-color-primary)
+}
+
+[data-md-color-primary=custom] .md-nav__link--active,
+[data-md-color-primary=custom] .md-nav__link:active {
+    color: var(--custom-color-primary)
+}
+
+[data-md-color-primary=custom] .md-nav__item--nested>.md-nav__link {
+    color: inherit
+}
+
 button[data-md-color-primary=red] {
     background-color: #ef5350
 }
@@ -1138,6 +1160,10 @@ button[data-md-color-accent=deep-orange] {
 }
 
 @media only screen and (max-width:59.9375em) {
+    [data-md-color-primary=custom] .md-nav__source {
+        background-color: var(--custom-color-primary);
+        opacity: 0.0325;
+    }
     [data-md-color-primary=red] .md-nav__source {
         background-color: rgba(190, 66, 64, .9675)
     }
@@ -1202,6 +1228,9 @@ button[data-md-color-accent=deep-orange] {
 }
 
 @media only screen and (max-width:76.1875em) {
+    html [data-md-color-primary=custom] .md-nav--primary .md-nav__title--site {
+        background-color: var(--custom-color-primary)
+    }
     html [data-md-color-primary=red] .md-nav--primary .md-nav__title--site {
         background-color: #ef5350
     }
@@ -1269,6 +1298,9 @@ button[data-md-color-accent=deep-orange] {
 }
 
 @media only screen and (min-width:76.25em) {
+    [data-md-color-primary=custom] .md-tabs {
+        background-color: var(--custom-color-primary)
+    }
     [data-md-color-primary=red] .md-tabs {
         background-color: #ef5350
     }
diff --git a/sphinx_material/sphinx_material/theme.conf b/sphinx_material/sphinx_material/theme.conf
index c77b5e4fc..586ce7134 100644
--- a/sphinx_material/sphinx_material/theme.conf
+++ b/sphinx_material/sphinx_material/theme.conf
@@ -55,14 +55,18 @@ theme_color = #3f51b5
 # Primary colors:
 # red, pink, purple, deep-purple, indigo, blue, light-blue, cyan,
 # teal, green, light-green, lime, yellow, amber, orange, deep-orange,
-# brown, grey, blue-grey, white
+# brown, grey, blue-grey, white, custom
 color_primary = blue-grey
 
 # Accent colors:
 # red, pink, purple, deep-purple, indigo, blue, light-blue, cyan,
-# teal, green, light-green, lime, yellow, amber, orange, deep-orange
+# teal, green, light-green, lime, yellow, amber, orange, deep-orange, custom
 color_accent = blue
 
+# Custom colors:
+custom_color_primary = 546e7a
+custom_color_accent = 448aff
+
 # Content Minification
 # Minify pages after creation using htmlmin
 html_minify = False