Merge pull request #868 from deka27/update-pydata

Added Dark mode, Fixed Search Bar for documentation site

docs/source/_static/css/custom.css

@@ -161,3 +161,14 @@ html[data-theme="light"] {
   --pst-color-navbar-link-hover: rgb(77, 171, 207);
 
 }
+/* Log:3/3/24 
+With updating the pydata-theme, there was issue with the <a> elements (They were underlined and colored by default, unlike previously), adding this code snippet helped fix the issue.
+You wouldn't want the links to be colored as there is a dark mode now, which will conflict with the color that pydata is assigning*/
+
+a, a:visited {
+  text-decoration: none;
+  color: inherit;
+}
+a:hover, a:active {
+  text-decoration: underline;
+}

docs/source/_static/css/navbar.css

@@ -4,18 +4,23 @@
 
 @import "../vendor/vars.css";
 
-
 /* Introduces the color change and highlight */
+
+/* Log:3/3/24
+with updating pydata-theme, I had to change some styles because dark mode was introduced. */
+
+.bd-header {
+  background-color: var(--colorPrimaryDark) !important;
+}
+
+.theme-switch-button {
+  color: white !important;
+}
+
 .bd-header .navbar-nav li a.nav-link,
 .search-button,
 .navbar-item {
-  color: var(--colorPrimaryDark);
-}
-
-.bd-header .navbar-nav li a.nav-link:hover,
-.search-button:hover,
-.navbar-item:hover {
-  color: var(--colorPrimaryLight);
+  color: white;
 }
 
 /* To remove highlight for logo text */

docs/source/_static/vendor/styles.css

@@ -123,6 +123,7 @@ em {
     font-size: 20px;
     margin-top: 8px;
     letter-spacing: 8px;
+    color: white !important;
 }
 
 #feature-card {

docs/source/_static/vendor/vars.css

@@ -1,5 +1,9 @@
-:root {
-  --fontFamily: {{ .Site.Params.font.name }};
+/* Log:3/3/24
+With the pydata-theme update, the {{ .Site.Params.font.name }} doesn't work anymore(not quite sure why), so I had to add the font-family to the root element. This helped restore back to the original font.
+ */
+
+ :root {
+  --fontFamily: "Helvetica Neue", sans-serif;
 
   --colorPrimaryDark:  rgb(153, 0, 0);
   --colorPrimary: rgb(77, 119, 207);

docs/source/_templates/custom-title.html

@@ -2,6 +2,6 @@
     <a class="navbar-brand" href="{{ pathto('index') }}">
         <img src="{{ pathto('_static/images/logo.svg', 1) }}" class="logo" alt="logo" style="padding-right: 1rem;">
         <!-- <img src="{{ pathto('_static/images/text-logo.png', 1) }}" class="logo" alt="logo"> -->
-        <div id="navbar-logo-text" style="color: #990000;">FURY</div>
+        <div id="navbar-logo-text">FURY</div>
     </a>
 </div>

docs/source/conf.py

@@ -178,13 +178,17 @@
 # documentation.
 #
 # html_theme_options = {}
+
+# Log:3/3/24 ~ footer_items is deprecated, using new keys for footer.
 html_theme_options = {
     'navigation_depth': 1,
+    'navigation_with_keys': True,
     #   "logo_link": 'index.html',
     'navbar_start': ['custom-title.html'],
-    'navbar_center': '',
-    'navbar_end': 'custom-navbar.html',
-    'footer_items': ['custom-footer.html'],
+    'navbar_center': ['custom-navbar.html'],
+    'footer_start': ['custom-footer.html'],
+    'footer_center': '',
+    'footer_end': '',
     'switcher': {
         'json_url': json_url,
         'version_match': version_match,
@@ -218,10 +222,16 @@
 #         'versions.html',
 #     ]
 # }
+
+# Log:3/3/24 ~ search-field is not necessary in sidebar anymore,
+# it is in the Navbar. Also with this update it can be easily accessed,
+# with the shortcut, which was not working previously.
 html_sidebars = {
     # "**": ["search-field", 'globaltoc.html',"sidebar-nav-bs"]
-    '**': ['search-field', 'globaltoc.html']
+    # '**': ['search-field', 'globaltoc.html']
+    '**': ['globaltoc.html']
 }
+
 # html_sidebars = {
 #     "**": ["logo-text.html", "globaltoc.html", "localtoc.html", "searchbox.html"],
 # }

requirements/docs.txt

@@ -4,7 +4,7 @@ ipython
 matplotlib
 sphinx-copybutton
 sphinx-gallery>=0.10.0
-pydata-sphinx-theme==0.12.0
+pydata-sphinx-theme==0.15.2
 tomli>=2.0.1
 networkx
 ablog >=0.11.1