Add Dark Mode feature

[emmanuelekopimo]

Summary

Adds dark mode to the frontend with a persistent theme toggle and updates the main app surfaces so the experience stays readable and visually consistent across pages and editor chrome.

What’s included

• Added a global dark mode toggle with persisted theme selection
• Introduced shared theme tokens in the global stylesheet for text, surfaces, borders, hover states, and overlays
• Applied dark mode to the main routes:
  • Landing page
  • Files page
  • Create/editor entry flow
• Updated editor chrome to support dark mode:
  • Floating sidebar
  • Floating toolbars and popovers
  • Export menu
  • Canvas zoom slider
  • Range slider styling
  • Artboard resize controls
• Updated sidebar panels to support dark mode:
  • Layers
  • Uploads
  • Images
  • Vector boards
  • Apps
  • Magic/AI
• Updated dialogs and cards for dark mode:
  • New canvas dialog
  • Delete confirmation dialog
  • File grid cards
• Tuned contrast in dark mode for:
  • Slider knob visibility
  • Artboard size controls and labels
  • Sidebar popup text and controls
  • Files page background glow/gradient intensity

Notes

• The work focuses on keeping contrast readable without making the dark theme overly harsh.
• package-lock.json was also updated in this commit.

---

Summary by cubic

Adds Dark Mode across the app with a persistent theme toggle and expanded design tokens. Pages and editor chrome now use theme classes for consistent contrast; the editor also supports clipboard image paste and a canvas context menu.

• New Features

  • Theme toggle persists via localStorage (avnac-theme) and respects system preference on first load.
  • Expanded tokens in styles.css (text, surfaces, borders, hover, overlays, shadows, buttons, inputs) and applied across Landing, Files, Create/editor flow, editor chrome, side panels, dialogs, and cards.
  • Editor: paste images from clipboard and use a canvas context menu.
  • Added MIT LICENSE.

• Refactors

  • Replaced hard-coded colors with variables and utility classes: theme-toolbar-shell, theme-sidebar-panel, theme-primary-button, theme-secondary-button, theme-input, theme-glass-card, theme-segmented.
  • Unified borders/overlays and text tokens (e.g., var(--line), var(--overlay-backdrop), var(--text), var(--text-muted)); tuned contrast for sliders, artboard controls, sidebar text, and Files background.
  • Theme state managed in __root.tsx by setting data-theme and color-scheme.

^{Written for commit 8e91aeb. Summary will update on new commits.}

[vercel]

@emmanuelekopimo is attempting to deploy a commit to the Akinkunmi Team on Vercel.

A member of the Team first needs to authorize it.

[cubic-dev-ai]

1 issue found across 22 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/routes/__root.tsx">

<violation number="1" location="frontend/src/routes/__root.tsx:20">
P2: Unguarded localStorage access in root theme initialization/persistence can throw and break app startup in storage-restricted environments.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: Unguarded localStorage access in root theme initialization/persistence can throw and break app startup in storage-restricted environments.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At frontend/src/routes/__root.tsx, line 20:

<comment>Unguarded localStorage access in root theme initialization/persistence can throw and break app startup in storage-restricted environments.</comment>

<file context>
@@ -7,7 +8,35 @@ export const Route = createRootRoute({
+    return "light";
+  }
+
+  const saved = window.localStorage.getItem(THEME_STORAGE_KEY);
+  if (saved === "light" || saved === "dark") {
+    return saved;
</file context>