G Pas

static/css/lesgv.css

@@ -48,3 +48,12 @@ img.lesgv.hero {
   margin: 0 auto;
   max-height: 35vh;
 }
+
+div.card {
+  flex-direction: row;
+}
+
+div.card-header {
+  transform: rotate(180deg);
+  writing-mode: vertical-lr;
+}

static/javascript/burger.js

@@ -18,3 +18,61 @@ if (document.getElementById('menu-checkbox')) {
   }
 }
 
+
+
+let toggle = document.querySelector('#jour-nuit');
+
+function lesgvGoDark(toggle) {
+  localStorage.removeItem('lightmode');
+  localStorage.setItem('darkmode', true);
+  toggle.innerText = 'Nuit';
+  document.body.classList.add('darkmode');
+}
+
+function lesgvGoLight(toggle) {
+  localStorage.removeItem('darkmode');
+  localStorage.setItem('lightmode', true);
+  toggle.innerText = 'Jour';
+  document.body.classList.remove('darkmode');
+}
+
+function toggleDarkmode() {
+  let toggle = document.querySelector('#jour-nuit');
+  if (document.body.classList.contains('darkmode')) {
+    lesgvGoLight(toggle);
+  } else {
+    lesgvGoDark(toggle);
+  }
+}
+
+toggle.addEventListener('click', function(e) {
+  if (document.body.classList.contains('darkmode')) {
+    lesgvGoLight(toggle);
+  } else {
+    lesgvGoDark(toggle);
+  }
+});
+
+// Turn the theme off if the 'darkmode' key exists in localStorage
+if (localStorage.getItem('darkmode')) {
+  lesgvGoDark(toggle);
+}  else if (localStorage.getItem('lightmode')) {
+  lesgvGoLight(toggle);
+} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+  lesgvGoDark(toggle);
+}
+
+
+window.addEventListener(
+  "pagehide",
+  (event) => {
+    if (toggle) {
+      if (document.body.classList.contains('darkmode')) {
+        lesgvGoDark(toggle);
+      } else {
+        lesgvGoLight(toggle);
+      }
+    }
+  },
+  false,
+);

templates/layout.html

@@ -55,6 +55,7 @@
               </li>
             </ul>
           </li>
+          <li> &nbsp;&lt;&nbsp;<a href="#" class="jour-nuit" id="jour-nuit">Jour et nuit</a></li>
           {{template "admenu" .}}
         </ul>