1.1.0; Dark mode added

joho1968 · Jun 7, 2023 · 599a90b · 599a90b
1 parent 62f0ce0
commit 599a90b
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -19,6 +19,28 @@ The [WCMS-BS5-LOCAL plugin for WonderCMS](https://github.com/joho1968/wcms-bs5-l
 3. Make sure you remove any folder prefix like `-1.0.0` of the unpacked folder
 4. Edit the `data/files/database.js` file and change the theme to `wcms-bs5`
 
+## Dark mode
+
+The theme will, since 1.1.0, automatically detect the visitor browser's "theme
+preference" and toggle Bootstrap 5 to the corresponding setting ("dark" or
+"light"). One could possibly also add a manual toggle, but this involves a nice
+looking icon, and some more code. I would consider adding this if there's a
+request for it.
+
+There's, unfortunately, a small "flash effect" when a page is first loaded if
+the visitor's browser has "Dark mode" enabled. I'm not sure if there's a better
+solution than the one I use in the theme to switch colors, if there is, I'm all
+ears.
+
+I'm not entirely satisfied with Bootstrap 5's choices for the background colors
+used in its "dark mode", but to stay true to Boostrap's CSS classes, I have
+chosen not to modify anything.
+
+## Changelog
+
+### 1.1.0 (2023-06-07)
+* Added support for "Dark mode" (auto detected)
+
 ## License
 
 Please see [LICENSE](LICENSE) for a full copy of GPLv2

diff --git a/preview.jpg b/preview.jpg
diff --git a/theme.php b/theme.php
@@ -1,7 +1,6 @@
 <?php global $Wcms; ?>
-
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="auto">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -12,7 +11,7 @@
         ?></title>
         <meta name="description" content="<?php echo $Wcms->page('description') ?>">
         <meta name="keywords" content="<?php echo $Wcms->page('keywords') ?>">
-		<meta name="title" content="<?php echo $Wcms->get('config', 'siteTitle') ?> - <?php echo $Wcms->page('title') ?>" />
+        <meta name="title" content="<?php echo $Wcms->get('config', 'siteTitle') ?> - <?php echo $Wcms->page('title') ?>" />
         <meta property="og:url" content="<?php echo $this->url() ?>" />
         <meta property="og:type" content="website" />
         <meta property="og:site_name" content="<?php echo $Wcms->get('config', 'siteTitle') ?>" />
@@ -30,6 +29,30 @@
 
     </head>
 
+    <script>
+        (() => {
+            'use strict'
+
+            // Set theme to the user's preferred color scheme
+            function updateBootstrapTheme() {
+                const colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ?
+                    "dark" :
+                    "light";
+                document.querySelector("html").setAttribute("data-bs-theme", colorMode);
+            }
+            function documentModeSetup() {
+                // Update theme when the preferred scheme changes
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateBootstrapTheme);
+            }
+
+            if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
+                documentModeSetup();
+            } else {
+                document.addEventListener("DOMContentLoaded", documentModeSetup);
+            }
+        })()
+    </script>
+
     <!-- Disable Bootstrap's "animation" on "collapsing" for the navbar -->
     <style>
         #bs5navBar.collapsing {
@@ -40,6 +63,25 @@
     </style>
 
     <body>
+        <script>
+            <?php
+            /**
+             * It's not always best practice to put a script tag here since it
+             * will block rendering of the page marginally, but this is a very
+             * minor script block that is used to set the correct Bootstrap 5
+             * "color mode" so it matches the visitor browser's setting (i.e.
+             * "Dark mode" or "Light mode") without getting a brief flash
+             * effect every time the page loads
+             **/
+            ?>
+            (() => {
+            'use strict'
+                const colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ?
+                    "dark" :
+                    "light";
+                document.querySelector("html").setAttribute("data-bs-theme", colorMode);
+            })()
+        </script>
         <div class="container p-1 wcmsbs5-body">
 
         <?php echo $Wcms->alerts() ?>
@@ -131,4 +173,5 @@
         ?>
         </div>
     </body>
+
 </html>
diff --git a/version b/version
@@ -1 +1 @@
-1.0.0
+1.1.0
diff --git a/wcms-modules.json b/wcms-modules.json
@@ -6,7 +6,7 @@
             "repo": "https://github.com/joho1968/wcms-bs5/tree/master",
             "zip": "https://github.com/joho1968/wcms-bs5/archive/master.zip",
             "summary": "Simple WonderCMS Bootstrap 5 theme.",
-            "version": "1.0.0",
+            "version": "1.1.0",
             "image": "https://raw.githubusercontent.com/joho1968/wcms-bs5/master/preview.jpg"
         }
     }