Skip to content

Fix label contrast against background in dark mode#14

Merged
FireAndIceFrog merged 1 commit into
developfrom
copilot/fix-labels-matching-background
May 31, 2026
Merged

Fix label contrast against background in dark mode#14
FireAndIceFrog merged 1 commit into
developfrom
copilot/fix-labels-matching-background

Conversation

Copilot AI commented May 31, 2026

Copy link
Copy Markdown
Contributor

Labels in the string art configuration UI become invisible when system dark mode is active — containers have hardcoded background: white but text color is inherited from :root which flips to white in dark mode.

Changes

  • Explicit text color on light containers: Added color: #333 to .generation-controls and .upload-section so labels are always readable regardless of inherited color
  • Dark mode overrides in App.css: Added @media (prefers-color-scheme: dark) block switching containers to dark backgrounds with light text
  • Upload component dark mode: Added dark mode styles for .image-uploader and .upload-text
  • Canvas container: Added explicit color: #333 to .string-art-canvas-container
/* Before: labels inherit white color from :root in dark mode, invisible on white bg */
.generation-controls {
  background: white;
}

/* After: explicit contrast + dark mode override */
.generation-controls {
  background: white;
  color: #333;
}

@media (prefers-color-scheme: dark) {
  .generation-controls {
    background: #1f1f1f;
    color: rgba(255, 255, 255, 0.87);
  }
}

Add explicit text colors to containers with hardcoded backgrounds so
labels remain readable in both light and dark mode. Add dark mode
overrides for generation-controls, upload-section, and other UI sections.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants