implement complete WSPeer as fallback if WebRTC is deactivated. Only ever use on self-hosted instances as clients need to trust the server!

public_included_ws_fallback/scripts/theme.js

@@ -0,0 +1,39 @@
+(function(){
+
+  // Select the button
+  const btnTheme = document.getElementById('theme');
+  // Check for dark mode preference at the OS level
+  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+  

+  // Get the user's theme preference from local storage, if it's available
+  const currentTheme = localStorage.getItem('theme');
+  // If the user's preference in localStorage is dark...
+  if (currentTheme === 'dark') {
+    // ...let's toggle the .dark-theme class on the body
+    document.body.classList.toggle('dark-theme');
+  // Otherwise, if the user's preference in localStorage is light...
+  } else if (currentTheme === 'light') {
+    // ...let's toggle the .light-theme class on the body
+    document.body.classList.toggle('light-theme');
+  }
+  

+  // Listen for a click on the button
+  btnTheme.addEventListener('click', function(e) {
+    e.preventDefault();
+    // If the user's OS setting is dark and matches our .dark-theme class...
+    let theme;
+    if (prefersDarkScheme.matches) {
+      // ...then toggle the light mode class
+      document.body.classList.toggle('light-theme');
+      // ...but use .dark-theme if the .light-theme class is already on the body,
+      theme = document.body.classList.contains('light-theme') ? 'light' : 'dark';
+    } else {
+      // Otherwise, let's do the same thing, but for .dark-theme
+      document.body.classList.toggle('dark-theme');
+      theme = document.body.classList.contains('dark-theme') ? 'dark' : 'light';
+    }
+    // Finally, let's save the current preference to localStorage to keep using it
+    localStorage.setItem('theme', theme);
+  });
+
+})();