Implemented automatic dark mode

index.html

@@ -13,8 +13,9 @@
   <link rel="stylesheet" href="web/style.css">
 
   <script>
-    // Checks if URL ends with "index.html?dark=true"
-    if (window.location.search.search(/[?&]theme=dark3/) !== -1) {
+    // Uses dark theme 3 if it's specified in query string orbrowser prefers dark mode and 
+    // theme is not explicitly set.
+    if ((window.location.search.search(/[?&]theme=dark3/) !== -1) || ((window.location.search.search(/[?&]theme=/) == -1) && (window.matchMedia('(prefers-color-scheme: dark)').matches))) {
       document.write("<link rel=\"stylesheet\" href=\"web/default_dark3.min.css\">");
       document.write("<link rel=\"stylesheet\" href=\"web/style_dark3.css\">");
     }
@@ -61,11 +62,15 @@
 
    <div><h1 id="comprehensivepythoncheatsheet">Comprehensive Python Cheatsheet</h1><p class="banner"><sup><a href="https://raw.githubusercontent.com/gto76/python-cheatsheet/main/README.md">Download text file</a>, <a href="https://github.com/gto76/python-cheatsheet">Fork me on GitHub</a>, <a href="https://github.com/gto76/python-cheatsheet/wiki/Frequently-Asked-Questions">Check out FAQ</a> or <a href="index.html?theme=dark3">Switch to dark theme</a>.
 </sup></p><p class="banner" style="margin-bottom: 20px; padding-bottom: 7px;"><img src="web/image_888.jpeg" alt="Monty Python"></p><script>
-  // Changes the image and link to theme if URL ends with "index.html?theme=dark". 
-  if (window.location.search.search(/[?&]theme=dark/) !== -1) {
+  // Changes the banner image and link-to-theme if "theme=dark" is in query string
+  // or if browser prefers dark mode and theme is not explicitly set.
+  if ( (window.location.search.search(/[?&]theme=dark/) !== -1) || ((window.location.search.search(/[?&]theme=light/) == -1) && (window.matchMedia('(prefers-color-scheme: dark)').matches)) ) {
+    activateDarkMode();
+  }
 
+  function activateDarkMode() {
     var link_to_theme = document.createElement("a")
-    link_to_theme.href = "index.html"
+    link_to_theme.href = "index.html?theme=light"
     link_to_theme.text = "Switch to light theme"
     document.getElementsByClassName("banner")[0].firstChild.children[3].replaceWith(link_to_theme)
 

parse.js

@@ -736,11 +736,15 @@ const MENU = '<a href="https://raw.githubusercontent.com/gto76/python-cheatsheet
 
 const DARK_THEME_SCRIPT =
   '<script>\n' +
-  '  // Changes the image and link to theme if URL ends with "index.html?theme=dark". \n' +
-  '  if (window.location.search.search(/[?&]theme=dark/) !== -1) {\n' +
+  '  // Changes the banner image and link-to-theme if "theme=dark" is in query string\n' +
+  '  // or if browser prefers dark mode and theme is not explicitly set.\n' +
+  '  if ( (window.location.search.search(/[?&]theme=dark/) !== -1) || ((window.location.search.search(/[?&]theme=light/) == -1) && (window.matchMedia(\'(prefers-color-scheme: dark)\').matches)) ) {\n' +
+  '    activateDarkMode();\n' +
+  '  }\n' +
   '\n' +
+  '  function activateDarkMode() {\n' +
   '    var link_to_theme = document.createElement("a")\n' +
-  '    link_to_theme.href = "index.html"\n' +
+  '    link_to_theme.href = "index.html?theme=light"\n' +
   '    link_to_theme.text = "Switch to light theme"\n' +
   '    document.getElementsByClassName("banner")[0].firstChild.children[3].replaceWith(link_to_theme)\n' +
   '\n' +

web/template.html

@@ -13,8 +13,9 @@
   <link rel="stylesheet" href="web/style.css">
 
   <script>
-    // Checks if URL ends with "index.html?dark=true"
-    if (window.location.search.search(/[?&]theme=dark3/) !== -1) {
+    // Uses dark theme 3 if it's specified in query string orbrowser prefers dark mode and 
+    // theme is not explicitly set.
+    if ((window.location.search.search(/[?&]theme=dark3/) !== -1) || ((window.location.search.search(/[?&]theme=/) == -1) && (window.matchMedia('(prefers-color-scheme: dark)').matches))) {
       document.write("<link rel=\"stylesheet\" href=\"web/default_dark3.min.css\">");
       document.write("<link rel=\"stylesheet\" href=\"web/style_dark3.css\">");
     }