Color schema toggle (not stored yet)

Author: fileformat

src/app/global.css

@@ -1,6 +1,6 @@
 :root {
-    --bs-body-color-rgb: 33, 37, 41;
-    --bs-body-bg-rgb: 255, 255, 255;
+    /*--bs-body-color-rgb: 33, 37, 41;
+    --bs-body-bg-rgb: 255, 255, 255;*/
     --bs-font-sans-serif: "IBM Plex Sans", "Helvetica Neue", sans-serif;
     --bs-font-serif: "IBM Plex Serif", serif;
     --bs-font-monospace: "IBM Plex Mono", monospace;
@@ -9,6 +9,6 @@
     --bs-body-font-size: 1.25em;
     --bs-body-font-weight: 400;
     --bs-body-line-height: 1.5;
-    --bs-body-color: #212121;
-    --bs-body-bg: #fff;
+    /*--bs-body-color: #212121;
+    --bs-body-bg: #fff;*/
 }

src/app/page.tsx

@@ -62,7 +62,7 @@ export default function Home() {
         <div className="card m-3 d-inline-block" style={{ "width": "18rem" }}>
           <h5 className="card-header xborder-bottom p-3 bg-body-tertiary">Regex Zone</h5>
           <div className="card-body pt-1">
-            The <a href="https://www.regex.zone/">Regex Zone</a> is a place to share regular expressions, and learn from others.  It is a community of regex enthusiasts.
+            The <a href="https://www.regex.zone/">Regex Zone</a> is the place to share regular expressions and find common regex patterns.
             <div className="pt-2 d-flex justify-content-center">
               <a className="btn btn-primary" href="https://www.regex.zone/" rel="nofollow">Visit the Regex Zone</a>
             </div>
@@ -74,14 +74,14 @@ export default function Home() {
       <hr />
 
       <h2 className="mt-3">One last thing</h2>
-      <div className="card my-3 bg-light">
+      <div className="card my-3 bg-body-tertiary">
         <div className="card-body">
           Some people, when confronted with a problem, think &ldquo;I know, I’ll use regular expressions.&rdquo; Now they have two problems.<br />
           &nbsp;&nbsp;-- <a href="http://www.jwz.org/">Jamie Zawinski</a> in comp.lang.emacs (or <a href="http://regex.info/blog/2006-09-15/247">somewhere else</a>).
         </div>
       </div>
 
-      <div className="card my-3 bg-light">
+      <div className="card my-3 bg-body-tertiary">
         <div className="card-body">
           I define UNIX as &ldquo;30 definitions of regular expressions living under one roof&rdquo;.<br />
           &nbsp;&nbsp;-- <a href="https://www-cs-faculty.stanford.edu/~knuth/">Donald Knuth</a> in <a href="http://amzn.to/GXRTbS">Digital Typography</a>, ch. 33, p. 649 (1999) via <a href="http://code.google.com/p/re2/wiki/Syntax">re2</a>.

src/components/ColorSchemeToggle.tsx

@@ -0,0 +1,42 @@
+'use client'
+import React from "react";
+
+function getColorScheme() {
+
+    if (typeof window === 'undefined') {
+        return 'light';
+    }
+
+    if (document.documentElement.hasAttribute('data-bs-theme')) {
+        return document.documentElement.getAttribute('data-bs-theme');
+    }
+
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return 'dark';
+    } else {
+        return 'light';
+    }
+}
+
+export function ColorSchemeToggle() {
+    const [currentScheme, setColorScheme] = React.useState(getColorScheme());
+
+    const onClick = (scheme: 'light' | 'dark' | 'auto') => {
+        if (scheme == 'auto') {
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                scheme = 'dark';
+            } else {
+                scheme = 'light';
+            }
+        }
+        document.documentElement.setAttribute('data-bs-theme', scheme);
+        setColorScheme(scheme);
+    }
+
+    return (
+        <div className="btn-group" role="group" aria-label="Color scheme selector">
+            <button className={`btn btn-sm ${currentScheme == 'light' ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => onClick('light')}>Light</button>
+            <button className={`btn btn-sm ${currentScheme == 'dark' ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => onClick('dark')}>Dark</button>
+        </div>
+    );
+}

src/components/Footer.tsx

@@ -1,5 +1,7 @@
 import Link from 'next/link';
 
+import { ColorSchemeToggle } from './ColorSchemeToggle';
+
 const links = [
     { link: 'https://github.com/regexplanet/regexplanet-next?tab=readme-ov-file#credits', label: 'Credits' },
     { link: 'https://github.com/regexplanet/regexplanet-next', label: 'Source' },
@@ -24,9 +26,9 @@ export function Footer() {
     return (
         <div className="container-lg py-3">
         <hr />
-        <footer className="d-flex justify-content-center text-body-tertiary"><small>
+        <footer className="d-flex justify-content-center text-body-tertiary"><small className="me-3">
             {initial}
-        </small></footer>
+        </small> <ColorSchemeToggle /></footer>
         </div>
     )
 }