Feat/gh 133 dark mode

[marciok]

closes #133

[Copilot]

🟡 Changes recommended

The new theme JS and layout changes introduce concrete cross-browser/runtime and navigation regressions that should be fixed before merging.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Implements system-aware dark mode styling across Gust’s Phoenix LiveView UI by switching templates and shared components to DaisyUI theme tokens, and adds client-side theme detection to keep Mermaid diagrams in sync with OS color-scheme changes.

Changes:

• Adds DaisyUI dark theme tokens and refactors UI surfaces/text/borders to base-*/*-content classes for consistent theming.
• Introduces JS-driven data-theme syncing with prefers-color-scheme, plus Mermaid re-rendering on theme changes.
• Updates branding assets (SVG logo) and adds a small LiveView test asserting theme-preference UI copy.

File summaries

File	Description
apps/gust_web/test/gust_web/live/system_live_test.exs	Adds a UI-level assertion for the system theme preference section.
apps/gust_web/test/gust_web/live/dag_live_test.exs	Minor whitespace adjustment in assertions block.
apps/gust_web/priv/static/images/gust-logo.svg	Adds an SVG logo asset for improved theme/scale handling.
apps/gust_web/lib/gust_web/live/system_live.html.heex	Adds “Web UI” panel describing system-driven theme behavior.
apps/gust_web/lib/gust_web/live/secret_live/index.html.heex	Replaces hard-coded light colors with theme tokens on cards/forms.
apps/gust_web/lib/gust_web/live/run_live/index.html.heex	Refactors run list UI to theme-aware background/border/text tokens.
apps/gust_web/lib/gust_web/live/dag_summary_component.ex	Updates “Paused” badge styling to theme token colors.
apps/gust_web/lib/gust_web/live/dag_live/index.html.heex	Updates empty state styling to theme tokens.
apps/gust_web/lib/gust_web/live/dag_live/dashboard.html.heex	Refactors dashboard/log/table styling and simplifies Mermaid config to allow theme switching.
apps/gust_web/lib/gust_web/live/breadcrumbs_component.ex	Updates breadcrumbs container styling to theme tokens.
apps/gust_web/lib/gust_web/components/layouts.ex	Switches logo to SVG and adjusts sidebar/mobile branding markup.
apps/gust_web/lib/gust_web/components/core_components.ex	Makes shared table/header actions theme-aware via token classes.
apps/gust_web/assets/js/app.js	Adds system theme detection, sets data-theme, emits theme-change events, and re-renders Mermaid diagrams accordingly.
apps/gust_web/assets/css/app.css	Adds/updates DaisyUI theme definitions, focus-visible outline, and refactors many component styles to theme tokens.

Review details

Suppressed comments (1)

apps/gust_web/lib/gust_web/components/layouts.ex:96

• The sidebar brand area is no longer a link. This removes a convenient navigation target and (on mobile) means tapping the logo/wordmark won’t close the sidebar as it did previously. Wrap the logo/wordmark back in a link (reusing the existing sidebar__brand-link styles) and keep the close button separate.

          <div class="sidebar__brand">
            <img src={~g"/images/gust-logo.svg"} alt="Gust" class="sidebar__logo" />
            <span class="gust-wordmark">Gust</span>
            <button
              type="button"
              id="mobile-navigation-close"
              class="sidebar__close"
              aria-label="Close navigation"
              phx-click={mobile_navigation(:closed)}
            >
              <.icon name="hero-x-mark" class="size-5" />
            </button>
          </div>

• Files reviewed: 13/15 changed files
• Comments generated: 3
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.