Add dark mode with system preference detection and localStorage persistence #112

Copilot · 2025-11-03T17:23:12Z

Implements dark mode that respects system preferences and provides manual toggle with persistence.

Changes

Theme System

CSS variables for light/dark color schemes (background, text, table, borders, sparklines)
prefers-color-scheme media query for automatic system preference detection
Theme initialization script prevents white flash on load

Toggle Component

Fixed-position button (top-right) with sun/moon emoji
localStorage persistence across sessions
CSS variable cache optimization to avoid repeated getComputedStyle calls in table row renders

Theme Management

const getTheme = () => {
  const saved = localStorage.getItem('theme')
  if (saved) return saved
  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    return 'dark'
  }
  return 'light'
}

Screenshots

Light Mode

Dark Mode

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

jioindiawest47365.z1.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestaic18632.z45.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestamw18632.z48.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestapac18632.z24.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestaqc18632.z1.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestat53726.z49.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestcac18632.z9.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestcae18632.z27.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestchile53201.z47.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestden18632.z1.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestein18632.z38.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestene18632.z1.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestesc218632.z1.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestesn18632.z1.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestfrc18632.z28.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestjpw18632.z31.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestkoreasout18632.z32.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestmeic18632.z39.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestmmc18632.z41.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestne18632.z16.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestnea18632.z15.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestnsus18632.z14.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestnzn18632.z44.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestoze18632.z8.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestozse07105.z26.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestozse07315.z26.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestplc18632.z36.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestsan18632.z1.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestscus18632.z21.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestsea18632.z23.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestspain53288.z43.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestuaen18632.z1.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestuks18632.z33.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestwe07148.z6.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestwestcentr18632.z4.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestwestindia18632.z10.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestwestus218632.z5.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
speedtestwus318632.z1.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
stci08318.z29.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)
stcus09377.z19.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
stea09073.z7.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
stei08516.z30.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
steus09377.z13.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
steus208516.z20.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
stjpe09377.z11.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
stkc09377.z12.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
stukw08516.z35.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
stwe08516.z6.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)
stwus09377.z22.web.core.windows.net
- Triggering command: node test/cb-endpoints-test.mjs (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

This section details on the original issue you should resolve

<issue_title>Add dark mode</issue_title>
<issue_description></issue_description>

Comments on the Issue (you are @copilot in this section)
@richorama The app should switch to dark/light mode based on system default. It should also offer a toggle to the customer which uses local storage for persistence.

Fixes Add dark mode #40

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

…stence Co-authored-by: richorama <353138+richorama@users.noreply.github.com>

…ve unused code Co-authored-by: richorama <353138+richorama@users.noreply.github.com>

…tation

Initial plan

79bc9d2

Copilot AI assigned Copilot and richorama Nov 3, 2025

Copilot started work on behalf of richorama November 3, 2025 17:23 View session

Copilot AI and others added 2 commits November 3, 2025 18:13

Add dark mode with system preference detection and localStorage persi…

222e4dd

…stence Co-authored-by: richorama <353138+richorama@users.noreply.github.com>

Address code review feedback - optimize CSS variable caching and remo…

c0215ec

…ve unused code Co-authored-by: richorama <353138+richorama@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add dark mode and light mode toggle feature~~ Add dark mode with system preference detection and localStorage persistence Nov 3, 2025

Copilot AI requested a review from richorama November 3, 2025 18:16

Copilot finished work on behalf of richorama November 3, 2025 18:16

Enhance theme toggle button with SVG icons for better visual represen…

155f1f8

…tation

richorama marked this pull request as ready for review November 4, 2025 15:56

richorama merged commit 6ebdb7f into master Nov 4, 2025
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add dark mode with system preference detection and localStorage persistence #112

Add dark mode with system preference detection and localStorage persistence #112

Uh oh!

Copilot AI commented Nov 3, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Add dark mode with system preference detection and localStorage persistence #112

Add dark mode with system preference detection and localStorage persistence #112

Uh oh!

Conversation

Copilot AI commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Screenshots

I tried to connect to the following addresses, but was blocked by firewall rules:

Comments on the Issue (you are @copilot in this section)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Nov 3, 2025 •

edited

Loading