bootstrap to 5.3.3, dark mode

kolappannathan · Jul 30, 2024 · a7b3fda · a7b3fda
1 parent cf26425
commit a7b3fda
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -31,4 +31,10 @@ A cookie banner for websites using Bootstrap 5.
 
 ## Screenshot
 
-![Demo image](./demo/demo.jpg)
+*Light mode*
+
+![Demo image](./demo/light-mode.png)
+
+*Dark mode*
+
+![Demo image](./demo/dark-mode.png)
diff --git a/changelog.md b/changelog.md
@@ -5,7 +5,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
+## [4.0.0] - 2024-07-30
 ### Changed
+ - Demo website now has auto dark and light mode. Screenshot of dark mdoe added to Readme.
+ - Updated bootstrap version to 5.3.3
  - Fixed an error in documentation - [Issue #9](https://github.com/kolappannathan/bootstrap-cookie-banner/issues/9) raised by [@Ahleroy](https://github.com/Ahleroy)
 
 ## [3.0.0] - 2021-11-19

diff --git a/demo/dark-mode.png b/demo/dark-mode.png
diff --git a/demo/demo.jpg b/demo/demo.jpg
diff --git a/demo/light-mode.png b/demo/light-mode.png
diff --git a/index.html b/index.html
@@ -7,24 +7,37 @@
     <title>Bootstrap Cookie Banner</title>
 
     <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 
     <!-- Cookie Banner -->
     <link rel="stylesheet" href="./src/cookie-banner.css">
     <script async src="./src/cookie-banner.js"></script>
+
+    <!-- Simple script to switch bootstrap theme -->
+    <script>
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.setAttribute('data-bs-theme', 'dark');
+            console.log('switching to dark theme');
+        }
+
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+            document.documentElement.setAttribute('data-bs-theme', 'light');
+            console.log('switching to light theme');
+        }
+    </script>
   </head>
 
   <body>
-    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <nav class="navbar navbar-expand-lg">
       <div class="container-fluid">
         <span class="navbar-brand">
           Bootstrap Cookie Banner
           <span class="badge rounded-pill bg-primary">Demo</span></h1>
         </span>
       </div>
     </nav>
-    <main class="container mt-3">
+    <main class="container mt-5">
       <p>
         Demo website for Bootstrap Cookie Banner. If you don't see the cookie banner below, clear the localstorage.
       </p>
@@ -33,7 +46,7 @@
           <a href="https://github.com/kolappannathan/bootstrap-cookie-banner" target="_blank">GitHub</a>
         </li>
         <li>
-          Bootstrap Version used: 5.1.3
+          Bootstrap Version used: 5.3.3
         </li>
       </ul>