Add dark mode

.gitignore

@@ -6,3 +6,4 @@ Gemfile.lock
 .jekyll-cache
 *.DS_Store
 .history/
+*CLAUDE.md

_includes/head.html

@@ -50,4 +50,41 @@
 {% endif %}
 <!-- end of Twitter cards -->
 
+<!-- Dark Mode Script -->
+<script>
+  // Function to set theme based on system preference
+  function setTheme(isDark) {
+    document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+  }
+
+  // Initialize when DOM is ready
+  document.addEventListener('DOMContentLoaded', function() {
+    // Initial theme setup based on system preference
+    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+    setTheme(prefersDarkScheme.matches);
+
+    // Listen for system dark mode preference changes
+    if (prefersDarkScheme.addEventListener) {
+      prefersDarkScheme.addEventListener('change', function(e) {
+        setTheme(e.matches);
+      });
+    } else {
+      // Fallback for older browsers
+      prefersDarkScheme.addListener(function(e) {
+        setTheme(e.matches);
+      });
+    }
+  });
+
+  // Apply theme immediately to reduce flash of incorrect theme
+  (function() {
+    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+    if (prefersDarkScheme.matches) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    } else {
+      document.documentElement.setAttribute('data-theme', 'light');
+    }
+  })();
+</script>
+
 {% seo %}

_pages/contact.md

@@ -15,11 +15,6 @@ If the above steps do not work for you, please contact Julie Barnum at LASP, [Ju
 
 <br>
 
-## Twitter
-Follow [PyHC on Twitter](https://twitter.com/PyHC_official) for quick announcements, updates, projects updates, etc.! 
-
-<br>
-
 ## Chat rooms
 For more informal discussions and questions there is a chat room to enable live chat between users and developers. The chat is hosted on matrix and clicking the following [link](https://app.element.io/#/room/#heliopython:openastronomy.org) will open a browser window with the chat interface. There is no need to install any software.
 

_pages/meetings.md

@@ -36,9 +36,128 @@ Additionally, there is a more [general calendar](https://helioanalytics.io/event
 <div id="helioanalyticscalendar-container"></div>
 
 <script type="text/javascript">
-    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    const pyhchtml = `<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23f9e79f&showTitle=0&title=PyHC%20Events&showDate=1&showPrint=0&showTabs=1&showCalendars=0&showNav=1&src=NG42Z3YyaWZncDZyZ25rOGF1N2pzZjF1azBAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&color=%237CB342&ctz=${timezone}" width="100%" height="600" frameborder="0" scrolling="no"></iframe>`;
-    const helioanalyticshtml = `<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23ffffff&src=aWJwbWhrMTFlMWEyMTFpa3V0bGY1M2d0ZnNAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&color=%23D50000&ctz=${timezone}" width="100%" height="600" frameborder="0" scrolling="no"></iframe>`;
-    document.getElementById('pyhccalendar-container').innerHTML = pyhchtml;
-    document.getElementById('helioanalyticscalendar-container').innerHTML = helioanalyticshtml;
+    document.addEventListener('DOMContentLoaded', function() {
+        // Initial setup with a slight delay to ensure all elements are loaded
+        setTimeout(setupGoogleCalendars, 500);
+
+        // Set up a MutationObserver to detect theme attribute changes
+        const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.attributeName === 'data-theme') {
+                    setupGoogleCalendars();
+                }
+            });
+        });
+
+        // Start observing document for data-theme attribute changes
+        observer.observe(document.documentElement, { 
+            attributes: true,
+            attributeFilter: ['data-theme'] 
+        });
+    });
+
+    function setupGoogleCalendars() {
+        const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+
+        // Create calendar iframes
+        const pyhcContainer = document.getElementById('pyhccalendar-container');
+        const helioContainer = document.getElementById('helioanalyticscalendar-container');
+
+        // Clear existing content
+        pyhcContainer.innerHTML = '';
+        helioContainer.innerHTML = '';
+
+        // Create PyHC calendar iframe with dark mode support
+        createCalendarIframe(
+            pyhcContainer, 
+            'https://calendar.google.com/calendar/embed',
+            {
+                height: '600',
+                wkst: '1',
+                bgcolor: isDark ? '%23121212' : '%23f9e79f',
+                showTitle: '0',
+                showDate: '1',
+                showPrint: '0',
+                showTabs: '1',
+                showCalendars: '0',
+                showNav: '1',
+                src: 'NG42Z3YyaWZncDZyZ25rOGF1N2pzZjF1azBAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ',
+                color: '%237CB342',
+                ctz: timezone
+            }
+        );
+
+        // Create Helioanalytics calendar iframe with dark mode support
+        createCalendarIframe(
+            helioContainer,
+            'https://calendar.google.com/calendar/embed',
+            {
+                height: '600',
+                wkst: '1',
+                bgcolor: isDark ? '%23121212' : '%23ffffff',
+                src: 'aWJwbWhrMTFlMWEyMTFpa3V0bGY1M2d0ZnNAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ',
+                color: '%23D50000',
+                ctz: timezone
+            }
+        );
+    }
+
+    function createCalendarIframe(container, baseUrl, params) {
+        const iframe = document.createElement('iframe');
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+
+        // Build URL with parameters
+        let url = baseUrl + '?';
+        for (const [key, value] of Object.entries(params)) {
+            url += `${key}=${value}&`;
+        }
+
+        iframe.src = url;
+        iframe.width = '100%';
+        iframe.height = '600';
+        iframe.frameBorder = '0';
+        iframe.scrolling = 'no';
+        iframe.style.border = 'none';
+        iframe.style.transition = 'filter 0.3s ease';
+
+        // Apply styles for dark mode
+        if (isDark) {
+            iframe.style.filter = 'hue-rotate(180deg) invert(92%) contrast(90%)';
+        }
+
+        // Add the iframe to the container
+        container.appendChild(iframe);
+
+        // Add event listeners to modify the iframe content once it's loaded
+        iframe.onload = function() {
+            if (isDark) {
+                try {
+                    // Access the iframe content and add CSS to force dark mode
+                    const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+
+                    if (iframeDocument) {
+                        // Create a style element
+                        const style = iframeDocument.createElement('style');
+                        style.textContent = `
+                            body, .view-container, .view-cap-container, .mv-container {
+                                background-color: #121212 !important;
+                                color: #e0e0e0 !important;
+                            }
+                            .view-container-border {
+                                background-color: #333 !important;
+                            }
+                            .cal-header { 
+                                background-color: #121212 !important;
+                                color: #e0e0e0 !important;
+                            }
+                        `;
+                        iframeDocument.head.appendChild(style);
+                    }
+                } catch (e) {
+                    console.warn('Could not inject styles into iframe due to Same-Origin Policy', e);
+                }
+            }
+        };
+    }
 </script>

_pages/people.html

@@ -12,7 +12,7 @@ <h2>Leadership</h2><hr>
     <div class="row">
         {% for leader in leaders %}
         <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
-            <div class="card" style="margin:0px;padding:0px;background-color:#ffffff;border:0;box-shadow:none">
+            <div class="card people-card">
                 <img class="card-img-top img-fluid rounded-circle" src="https://github.com/{{ leader.handle }}.png" alt="{{ leader.name }}"/>
                 <div class="card-body">
                     <h6 class="card-title">{{ leader.role }}</h6>
@@ -31,7 +31,7 @@ <h2>Members</h2><hr>
     <div class="row">
         {% for member in sorted_team %}
         <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
-            <div class="card" style="margin:0px;padding:0px;background-color:#ffffff;border:0;box-shadow:none">
+            <div class="card people-card">
                 <img class="card-img-top img-fluid rounded-circle" src="https://github.com/{{ member.handle }}.png" alt="{{ member.name }}"/>
                 <div class="card-body">
                     <h6 class="card-title">@{{ member.handle }}</h6>

_posts/2025-03-12-pyhc-docs-hub-announcement.markdown

@@ -0,0 +1,9 @@
+---
+layout: post
+title: "Introducing the PyHC Documentation Hub!"
+author: sapols
+---
+
+<img src="/../img/page_images/pyhc-docs-hub.jpg" alt="PyHC Documentation Hub screenshot" style="display: block; margin-left: auto; margin-right: auto; width: 60%">
+
+We're excited to announce the launch of the PyHC Documentation Hub, now available at **[pyhc.org/pyhc-docs](https://pyhc.org/pyhc-docs)**. This centralized resource simplifies how you search across documentation for all PyHC packages that use Read The Docs. No more switching between dozens of disparate package websites to find the information you need. The Hub not only links all packages together in one convenient place but also provides a powerful search interface that organizes results by package for easy navigation. Find documentation faster than ever—we hope you find it useful. _**[Try it out today!](https://pyhc.org/pyhc-docs)**_

css/custom.css

@@ -263,3 +263,143 @@ select.filter {
 .hidden {
   display: none;
 }
+
+/* Dark Mode Styles */
+:root {
+  --background-color: #ffffff;
+  --text-color: #262626;
+  --card-bg-color: #f0f0f0;
+  --card-border-color: #e5e5e5;
+  --link-color: #007bff;
+  --navbar-bg: #F9E79F;
+  --footer-color: #777;
+  --footer-border: #e5e5e5;
+  --header-border: #e5e5e5;
+  --jumbotron-border: #e5e5e5;
+  --table-border: #aaa;
+  --button-bg: #ededed;
+  --button-border: #d3d3d3;
+}
+
+[data-theme="dark"] {
+  --background-color: #1a1a1a;
+  --text-color: #f5f5f5;
+  --card-bg-color: #2d2d2d;
+  --card-border-color: #444;
+  --link-color: #8ab4f8;
+  --navbar-bg: #2d2d2d;
+  --footer-color: #aaa;
+  --footer-border: #444;
+  --header-border: #444;
+  --jumbotron-border: #444;
+  --table-border: #555;
+  --button-bg: #444;
+  --button-border: #555;
+}
+
+body {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.navbar {
+  background-color: var(--navbar-bg);
+  transition: background-color 0.3s ease;
+}
+
+[data-theme="dark"] .navbar {
+  background-color: var(--navbar-bg);
+}
+
+[data-theme="dark"] .navbar-nav .nav-link,
+[data-theme="dark"] .navbar-brand {
+  color: white;
+}
+
+[data-theme="dark"] .navbar-nav .nav-link.active {
+  color: #F9E79F;
+  font-weight: bold;
+}
+
+[data-theme="dark"] .navbar-nav .nav-link:hover,
+[data-theme="dark"] .navbar-brand:hover {
+  color: #F9E79F;
+}
+
+.card {
+  background-color: var(--card-bg-color);
+  border-color: var(--card-border-color);
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+a {
+  color: var(--link-color);
+  transition: color 0.3s ease;
+}
+
+.footer {
+  color: var(--footer-color);
+  border-top-color: var(--footer-border);
+  transition: color 0.3s ease, border-color 0.3s ease;
+}
+
+.header {
+  border-bottom-color: var(--header-border);
+  transition: border-color 0.3s ease;
+}
+
+.jumbotron {
+  border-bottom-color: var(--jumbotron-border);
+  transition: border-color 0.3s ease;
+}
+
+.tables_filter {
+  border-color: var(--table-border);
+  color: var(--text-color);
+  background-color: var(--card-bg-color);
+  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
+}
+
+select.filter {
+  background-color: var(--card-bg-color);
+  color: var(--text-color);
+  border-color: var(--table-border);
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+.white {
+  color: var(--text-color);
+  border-color: var(--button-border);
+  background: var(--button-bg);
+  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
+}
+
+/* Dark mode - using system preference */
+
+/* Table styling in dark mode */
+[data-theme="dark"] table {
+  color: var(--text-color);
+}
+
+[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+[data-theme="dark"] .table-hover tbody tr:hover {
+  background-color: rgba(255, 255, 255, 0.075);
+}
+
+/* People cards styling */
+.people-card {
+  margin: 0px;
+  padding: 0px;
+  background-color: transparent !important;
+  border: 0;
+  box-shadow: none;
+}
+
+.people-card .card-body {
+  padding-top: 10px;
+  padding-bottom: 0px;
+}