From 2ad9f5e29144356a2f6b414bf7108d2c79af653f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 31 May 2026 10:27:20 +0000 Subject: [PATCH] fix: ensure labels always contrast with background in config sections 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. --- string-art-website/package-lock.json | 20 +-------- string-art-website/src/App.css | 41 +++++++++++++++++++ .../src/features/1Upload/components/style.css | 26 ++++++++++++ .../StringArtCanvas/style.module.css | 1 + 4 files changed, 69 insertions(+), 19 deletions(-) diff --git a/string-art-website/package-lock.json b/string-art-website/package-lock.json index 67fe72f..1e1373d 100644 --- a/string-art-website/package-lock.json +++ b/string-art-website/package-lock.json @@ -81,7 +81,6 @@ "integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", @@ -397,7 +396,6 @@ "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz", "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -441,7 +439,6 @@ "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz", "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -1848,7 +1845,6 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.10.tgz", "integrity": "sha512-EhBeSYX0Y6ye8pNebpKrwFJq7BoQ8J5SO6NlvNwwHjSj6adXJViPQrKlsyPw7hLBLvckEMO1yxeGdR82YBBlDg==", "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -1924,7 +1920,6 @@ "integrity": "sha512-pUXGCuHnnKw6PyYq93lLRiZm3vjuslIy7tus1lIQTYVK9bL8XBgJnCWm8a0KcTtHC84Yya1Q6rtll+duSMj0dg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.39.1", "@typescript-eslint/types": "8.39.1", @@ -2177,7 +2172,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2455,7 +2449,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001733", "electron-to-chromium": "^1.5.199", @@ -2752,7 +2745,6 @@ "integrity": "sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==", "hasInstallScript": true, "license": "MIT", - "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -2816,7 +2808,6 @@ "integrity": "sha512-TS9bTNIryDzStCpJN93aC5VRSW3uTx9sClUn4B87pwiCaJh220otoI0X8mJKr+VcPtniMdN8GKjlwgWGUv5ZKA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", @@ -3374,7 +3365,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.27.6" }, @@ -4188,7 +4178,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz", "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -4198,7 +4187,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz", "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -4243,7 +4231,6 @@ "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", "license": "MIT", - "peer": true, "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" @@ -4307,8 +4294,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/redux-thunk": { "version": "3.1.0", @@ -4754,7 +4740,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -4820,7 +4805,6 @@ "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==", "devOptional": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -5000,7 +4984,6 @@ "integrity": "sha512-J0SQBPlQiEXAF7tajiH+rUooJPo0l8KQgyg4/aMunNtrOa7bwuZJsJbDWzeljqQpgftxuq5yNJxQ91O9ts29UQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.6", @@ -5091,7 +5074,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, diff --git a/string-art-website/src/App.css b/string-art-website/src/App.css index b80b00e..e2f4f27 100644 --- a/string-art-website/src/App.css +++ b/string-art-website/src/App.css @@ -48,6 +48,7 @@ .upload-section { background: white; + color: #333; border-radius: 8px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); @@ -55,6 +56,7 @@ .generation-controls { background: white; + color: #333; border-radius: 8px; padding: 1.5rem; display: flex; @@ -231,3 +233,42 @@ flex-direction: column; } } + +@media (prefers-color-scheme: dark) { + .app { + background-color: #242424; + } + + .generation-controls { + background: #1f1f1f; + color: rgba(255, 255, 255, 0.87); + } + + .upload-section { + background: #1f1f1f; + color: rgba(255, 255, 255, 0.87); + } + + .config-section h3 { + color: rgba(255, 255, 255, 0.87); + } + + .progress-section { + background: #2a2a2a; + border-color: #444; + } + + .progress-header { + color: rgba(255, 255, 255, 0.87); + } + + .progress-details { + color: rgba(255, 255, 255, 0.7); + } + + .app-loading, + .app-error { + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + } +} diff --git a/string-art-website/src/features/1Upload/components/style.css b/string-art-website/src/features/1Upload/components/style.css index 546b257..fe434f3 100644 --- a/string-art-website/src/features/1Upload/components/style.css +++ b/string-art-website/src/features/1Upload/components/style.css @@ -66,4 +66,30 @@ .upload-button:disabled { background: #ccc; cursor: not-allowed; +} + +@media (prefers-color-scheme: dark) { + .image-uploader { + border-color: #555; + background: #2a2a2a; + color: rgba(255, 255, 255, 0.87); + } + + .image-uploader:hover:not(.disabled) { + border-color: #5E35B1; + background: #332a4a; + } + + .image-uploader.drag-over { + border-color: #5E35B1; + background: #3d2e5e; + } + + .image-uploader.disabled { + background: #1f1f1f; + } + + .upload-text { + color: rgba(255, 255, 255, 0.7); + } } \ No newline at end of file diff --git a/string-art-website/src/features/3RenderImage/components/StringArtCanvas/style.module.css b/string-art-website/src/features/3RenderImage/components/StringArtCanvas/style.module.css index a029268..ab78998 100644 --- a/string-art-website/src/features/3RenderImage/components/StringArtCanvas/style.module.css +++ b/string-art-website/src/features/3RenderImage/components/StringArtCanvas/style.module.css @@ -3,6 +3,7 @@ border-radius: 8px; overflow: hidden; background: white; + color: #333; } .canvas-header {