📝 Star History

_sass/_custom.scss

@@ -17,6 +17,7 @@
  *  - $screen-lg-min = 1200px
  */
 :root {
+  prefers-color-scheme: light;
   --bg-midsection: radial-gradient(circle, rgba(0,0,0, 1) 0%, rgba(0,0,0, 0) 60%, rgba(0,0,0, 0) 100%);
   --color-background: #F8FCFE;
   --color-color: #000;
@@ -202,6 +203,7 @@
 
 /* Variable declaration for dark mode */
 [data-theme="dark"] {
+  prefers-color-scheme: dark;
   --bg-midsection: radial-gradient(circle, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 60%, rgba(255,255,255, 0) 100%);
   --color-background: #000;
   --color-color: #B5B5B5;
@@ -867,6 +869,8 @@ a.panel-wrapper:hover, a.panel-wrapper:active {
 .panel-discord { background: rgb(115, 138, 219); }
 .panel-svg { padding: 1em; }
 
+#starchart img { display: block; margin: 0 auto; }
+
 //
 // Tagline
 //

assets/javascript/custom.js

@@ -42,6 +42,7 @@ function setDarkMode(dark) {
     .attr('src', q + 'btn-' + (dark ? 'day' : 'night') + '.svg')
     .css('visibility', 'visible');
   $('#discord-frame').attr('src', `${discord_widget_url}&theme=` + (dark ? 'dark' : 'light'));
+  $('#starchart img').attr('src', 'https://api.star-history.com/svg?repos=MarlinFirmware/Marlin&type=Date' + (dark ? '&theme=dark' : ''));
 }
 
 function toggleDarkMode() {
@@ -60,8 +61,11 @@ function userToggleDarkMode() {
 // Set dark / light theme as soon as possible
 var nightMode = getCookie('nightMode');        // A cookie?
 if (nightMode === '') {
+  const hasMatchMedia = () => window && window.matchMedia,
+        prefersDarkColorScheme = () => hasMatchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
+        prefersLightColorScheme = () => hasMatchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
   var d = new Date(), h = d.getHours();
-  nightMode = (h >= 19 || h < 6);
+  nightMode = prefersDarkColorScheme || (!prefersLightColorScheme && (h >= 19 || h < 6));
 }
 else
   nightMode = (nightMode === 'true');

index.html

@@ -103,6 +103,11 @@ <h2 id="tagline">Open Source 3D Printer Driver</h2>
         </div>
       </a>
   </div>
+
+  <a id="starchart" href="https://star-history.com/#MarlinFirmware/Marlin&Date">
+    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=MarlinFirmware/Marlin&type=Date" />
+  </a>
+
 </div>
 
 <script src="{{ '/assets/javascript/vivus.js'}}"></script>