sharang/compliance-scanner-agent
1
0
Fork 0
Code Issues 51 Pull Requests 2 Actions Packages Projects Releases 1 Wiki Activity

feat(dashboard): add light/dark theme with sidebar toggle
CI / Check (pull_request) Successful in 10m12s
Details
CI / Detect Changes (pull_request) Has been skipped
Details
CI / Deploy Agent (pull_request) Has been skipped
Details
CI / Deploy Dashboard (pull_request) Has been skipped
Details
CI / Deploy Docs (pull_request) Has been skipped
Details
CI / Deploy MCP (pull_request) Has been skipped
Details

Browse Source 
Introduces a light theme alongside the existing dark Obsidian Control
look, plus a sun/moon toggle in the sidebar footer.

The dashboard's CSS already drove every surface through custom
properties on :root, so the light theme is added as a second token set
under `:root[data-theme="light"]` and, in parallel, inside a
`@media (prefers-color-scheme: light)` block guarded by
`:not([data-theme="dark"])`. Net effect:
- A user with no stored preference gets their OS theme via the media
  query (no flash, no JS required).
- A user who clicked the toggle gets `data-theme="light|dark"` set on
  `<html>`, which wins over the media query.

The toggle component (`theme_toggle.rs`) reads `localStorage` first
then `prefers-color-scheme` on mount, and writes both the DOM
attribute and `localStorage` on click. All `web_sys` calls are gated
behind `#[cfg(feature = "web")]` so the server build stays clean.

Three CSS rules that hardcoded near-black hex values (the page dot
grid, `.code-block`, and the graph stabilization overlay) get explicit
light-mode overrides so they don't render as dark patches on white.

web-sys feature list extended with Storage, MediaQueryList, and
Element so the toggle can read the media query and set the attribute.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
2026-05-13 13:26:37 +02:00
parent 927fbc8ecb
commit 4424db5acb
5 changed files with 247 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
compliance-dashboard/Cargo.toml
+1 -1
View File
@@ -51,7 +51,7 @@ thiserror = { workspace = true }
# Web-only
reqwest = { workspace = true, optional = true }
web-sys = { version = "0.3", optional = true, features = ["Blob", "BlobPropertyBag", "HtmlAnchorElement", "Url", "Document", "Window"] }
web-sys = { version = "0.3", optional = true, features = ["Blob", "BlobPropertyBag", "HtmlAnchorElement", "Url", "Document", "Element", "Window", "Storage", "MediaQueryList"] }
js-sys = { version = "0.3", optional = true }
wasm-bindgen = { version = "0.2", optional = true }
gloo-timers = { version = "0.3", features = ["futures"], optional = true }