Add dark mode to the web page

--- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/richorama/AzureSpeedTest2?shareId=XXXX-XXXX-XXXX-XXXX).
richorama · Aug 19, 2024 · 0f9c9b3 · 0f9c9b3
1 parent 0e37e3b
commit 0f9c9b3
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -12,6 +12,31 @@
     <title>Azure Speed Test 2.0</title>
     <link rel="icon" type="image/png" href="/favicon.png" />
     <style>
+        :root {
+            --background-color: #ffffff;
+            --text-color: #000000;
+            --table-background-color: #ffffff;
+            --table-header-background-color: #f8f9fa;
+            --table-row-background-color: #ffffff;
+            --table-row-hover-background-color: #f1f1f1;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --background-color: #121212;
+                --text-color: #ffffff;
+                --table-background-color: #1e1e1e;
+                --table-header-background-color: #2c2c2c;
+                --table-row-background-color: #1e1e1e;
+                --table-row-hover-background-color: #333333;
+            }
+        }
+
+        body {
+            background-color: var(--background-color);
+            color: var(--text-color);
+        }
+
         .container {
             /*width: 970px;*/
         }
@@ -23,11 +48,21 @@
 
         .results-table {
             margin-bottom: 75px;
+            background-color: var(--table-background-color);
         }
 
         tr {
             display: flex;
             width: 100%;
+            background-color: var(--table-row-background-color);
+        }
+
+        tr:hover {
+            background-color: var(--table-row-hover-background-color);
+        }
+
+        th {
+            background-color: var(--table-header-background-color);
         }
 
         td,
@@ -68,4 +103,4 @@ <h1 class="display-4">Azure Speed Test 2.0</h1>
     <script src="index.min.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/index.jsx b/index.jsx
@@ -27,11 +27,36 @@ function render(jsx) {
 const Table = class extends React.Component {
   constructor(props) {
     super(props)
+    this.state = {
+      darkMode: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    }
     this.renderButton = this.renderButton.bind(this)
     this.renderFlag = this.renderFlag.bind(this)
     this.renderRow = this.renderRow.bind(this)
     this.renderError = this.renderError.bind(this)
+    this.toggleDarkMode = this.toggleDarkMode.bind(this)
+  }
+
+  componentDidMount() {
+    if (window.matchMedia) {
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.handleSystemDarkModeChange)
+    }
+  }
+
+  componentWillUnmount() {
+    if (window.matchMedia) {
+      window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this.handleSystemDarkModeChange)
+    }
   }
+
+  handleSystemDarkModeChange = (e) => {
+    this.setState({ darkMode: e.matches })
+  }
+
+  toggleDarkMode() {
+    this.setState(prevState => ({ darkMode: !prevState.darkMode }))
+  }
+
   renderButton() {
     let item = this.props.history[0]
 
@@ -113,9 +138,15 @@ const Table = class extends React.Component {
   }
 
   render() {
+    const { darkMode } = this.state
+    const tableClassName = darkMode ? 'table results-table dark-mode' : 'table results-table'
+
     return (
       <div>
-        <table className="table results-table">
+        <button onClick={this.toggleDarkMode} className="btn btn-secondary">
+          Toggle Dark Mode
+        </button>
+        <table className={tableClassName}>
           <thead>
             <tr>
               <th>Data Center</th>