Add (auto) Dark mode

hybula · Nov 21, 2023 · 979b1e0 · 979b1e0
1 parent 2233426
commit 979b1e0
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 5 deletions.
diff --git a/LookingGlass.php b/LookingGlass.php
@@ -50,6 +50,9 @@ public static function validateConfig(): void
         if (!defined('LG_LOGO')) {
             die('LG_LOGO not found in config.php');
         }
+        if (!defined('LG_LOGO_DARK')) {
+            die('LG_LOGO_DARK not found in config.php');
+        }
         if (!defined('LG_LOGO_URL')) {
             die('LG_LOGO_URL not found in config.php');
         }
@@ -122,6 +125,9 @@ public static function validateConfig(): void
         if (!defined('LG_CHECK_LATENCY')) {
             die('LG_CHECK_LATENCY not found in config.php');
         }
+        if (!defined('LG_THEME')) {
+            die('LG_THEME not found in config.php');
+        }
         //@formatter:on
     }
 

diff --git a/README.md b/README.md
@@ -14,6 +14,7 @@ made user-friendly for everyone to use. It allows you to execute network related
 - Easy to customize and to configure.
 - DNS checking to prevent unnecessary executions.
 - Latency feature from visitor to LG.
+- Dark/light/auto mode theme.
 
 ### Requirements
 - Any Linux distribution, this has been tested on RHEL 8 + 9.

diff --git a/bootstrap.php b/bootstrap.php
@@ -41,6 +41,7 @@ function exitNormal(): void
     'custom_head'              => LG_CUSTOM_HEAD,
     'logo_url'                 => LG_LOGO_URL,
     'logo_data'                => LG_LOGO,
+    'logo_data_dark'                => LG_LOGO_DARK,
     //
     'block_network'            => LG_BLOCK_NETWORK,
     'block_lookingglas'        => LG_BLOCK_LOOKINGGLAS,

diff --git a/config.dist.php b/config.dist.php
@@ -5,10 +5,15 @@
 const LG_TITLE = 'Looking Glass';
 
 // Define a logo, this can be HTML too, see the other example for an image;
-const LG_LOGO = '<h2>Company Looking Glass</h2>';
+const LG_LOGO = '<h2 style="color: #000000;">Company Looking Glass</h2>';
+const LG_LOGO_DARK = '<h2 style="color: #ffffff;">Company Looking Glass</h2>';
+
 // Define the URL where the logo points to;
 const LG_LOGO_URL = 'https://github.com/hybula/lookingglass/';
 
+// Theme mode;
+const LG_THEME = 'auto';
+
 // Enable the latency check feature;
 const LG_CHECK_LATENCY = false;
 

diff --git a/docker/php-fpm/src/config.php b/docker/php-fpm/src/config.php
@@ -5,10 +5,15 @@
 const LG_TITLE = 'Looking Glass';
 
 // Define a logo, this can be HTML too, see the other example for an image;
-const LG_LOGO = '<h2>Company Looking Glass</h2>';
+const LG_LOGO = '<h2 style="color: #000000;">Company Looking Glass</h2>';
+const LG_LOGO_DARK = '<h2 style="color: #ffffff;">Company Looking Glass</h2>';
+
 // Define the URL where the logo points to;
 const LG_LOGO_URL = 'https://github.com/hybula/lookingglass/';
 
+// Theme mode;
+const LG_THEME = 'auto';
+
 // Enable the latency check feature;
 const LG_CHECK_LATENCY = false;
 

diff --git a/index.php b/index.php
@@ -96,7 +96,7 @@
 $templateData['csrfToken'] = $_SESSION[LookingGlass::SESSION_CSRF] = bin2hex(random_bytes(12));
 ?>
 <!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="<?php if (LG_THEME != 'auto') echo LG_THEME; ?>">
 <head>
     <meta charset="utf-8">
     <meta content="width=device-width, initial-scale=1" name="viewport">
@@ -115,9 +115,12 @@
 
     <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
             <div class="col-8">
-                <a class="d-flex align-items-center text-dark text-decoration-none" href="<?php echo $templateData['logo_url'] ?>" target="_blank">
+                <a class="d-flex align-items-center text-primary text-decoration-none color-mode-choice color-mode-light-visible" href="<?php echo $templateData['logo_url'] ?>" target="_blank">
                     <?php echo $templateData['logo_data'] ?>
                 </a>
+                <a class="d-flex align-items-center text-primary text-decoration-none color-mode-choice color-mode-dark-visible" href="<?php echo $templateData['logo_url'] ?>" target="_blank">
+                    <?php echo $templateData['logo_data_dark'] ?>
+                </a>
             </div>
             <div class="col-4 float-end">
                 <select class="form-select" onchange="window.location = this.options[this.selectedIndex].value">
@@ -234,7 +237,7 @@
                         <div class="alert alert-danger mt-3" role="alert"><?php echo $templateData['error_message'] ?></div>
                         <?php endif ?>
 
-                        <div class="card card-body bg-light mt-4" style="display: none;" id="outputCard">
+                        <div class="card card-body bg-dark text-light mt-4" style="display: none;" id="outputCard">
                             <pre id="outputContent" style="white-space: pre;word-wrap: normal;margin-bottom: 0;padding-bottom: 1rem;"></pre>
                         </div>
                     </form>
@@ -288,6 +291,32 @@
     </footer>
 </div>
 
+<script type="text/javascript">
+    function setThemeClass() {
+        const colorMode = document.querySelector("html").getAttribute("data-bs-theme");
+        const allDivs = document.querySelectorAll('.color-mode-choice')
+        allDivs.forEach((div) => {
+            div.classList.add('d-none')
+            if (div.matches('.color-mode-' + colorMode + '-visible')){
+                div.classList.remove('d-none')
+            }
+        })
+    };
+    setThemeClass();
+</script>
+
+<?php if (LG_THEME == 'auto'): ?>
+<script type="text/javascript">
+    function updateThemeHelper() {
+        const colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+        document.querySelector("html").setAttribute("data-bs-theme", colorMode);
+        setThemeClass();
+    }
+    updateThemeHelper();
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateThemeHelper);
+</script>
+<?php endif ?>
+
 <?php echo isset($templateData['custom_footer']) ? $templateData['custom_footer'] : '' ?>
 
 <?php if ($templateData['session_call_backend']): ?>