Skip to content

Fix Default Theme text contrast - #445

Open
pankaj512 wants to merge 2 commits into
Figma-Linux:devfrom
pankaj512:fix/default-theme-contrast
Open

Fix Default Theme text contrast#445
pankaj512 wants to merge 2 commits into
Figma-Linux:devfrom
pankaj512:fix/default-theme-contrast

Conversation

@pankaj512

@pankaj512 pankaj512 commented Aug 31, 2026

Copy link
Copy Markdown

Summary

Fix the Default Theme producing light backgrounds with foreground tokens that still resolve for Figma's dark mode, which makes labels and secondary text faint or invisible.

Root cause

Figma stores its resolved appearance on body[data-preferred-theme] and body.style.colorScheme. The Linux wrapper applied its own palette variables and backgrounds without synchronizing that resolved mode.

With the light Default Theme selected while Figma resolved to dark mode:

  • wrapper background tokens became light;
  • newer Figma foreground tokens remained dark-mode values such as white;
  • the resulting mixed state caused the contrast problems shown below.

Custom dark themes appeared correct because their palette happened to agree with Figma's dark resolved state.

What changed

  • Infer whether a custom palette is light or dark from the relative luminance of bg-panel.
  • Synchronize Figma's data-preferred-theme and CSS color-scheme whenever a palette is applied.
  • Reassert that scheme if Figma changes its appearance preference while custom themes are active.
  • Synchronize Electron nativeTheme.themeSource during startup and live theme switching so media queries and native UI use the same resolved scheme.
  • Implement and persist Figma's setThemePreference desktop message.
  • Preserve Figma's explicit System, Light, and Dark behavior when custom themes are disabled.
  • Safely migrate existing settings with a default system preference and fall back to it for invalid values.

Verification

  • Reproduced the mixed Default-palette/dark-Figma state against the authenticated live Figma Recents DOM.
  • Measured visible text elements below 3:1 contrast:
    • before synchronization: 8
    • after synchronization: 0
  • Verified palette inference for white/light-gray and black/dark-gray backgrounds.
  • npm run check passes with 0 errors and 0 warnings.
  • Targeted ESLint passes with pre-existing warnings only.
  • npm run build passes with the repository's existing Rollup/Svelte warnings.
  • git diff --check passes.

Testing help requested

I could not complete an end-to-end visual test in the packaged Electron application. The repository's bundled Electron 30 and legacy desktop API bridge stall on the current live Figma frontend after authentication; testing with Electron 44 reached the same frontend initialization limitation. The authenticated route itself loads normally in a standard browser, which allowed the exact DOM/theme mismatch and contrast result to be verified.

Please help test this branch in a currently working Figma Linux installation, particularly:

  • Default Theme with system dark mode;
  • Default Theme with system light mode;
  • explicit Light and Dark appearance settings;
  • switching between Default and custom light/dark themes without restarting;
  • startup with a persisted theme preference;
  • editor screens in addition to Recent Files.

Screenshots

The first image shows the broken Default Theme. The second shows the same screen with a coherent dark theme for comparison.

Broken: Default Theme

Default Theme with low-contrast text

Working comparison: Dark Theme

Dark Theme with coherent foreground and background colors

pankaj512 and others added 2 commits August 31, 2026 13:17
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant