ResearchOS supports light and dark mode through semantic Tailwind tokens: bg-surface, bg-surface-raised, bg-surface-sunken, text-foreground, text-foreground-muted, and border-border. A few components still hardcode fixed colors such as bg-slate-800, text-white, or border-white/10 with no dark variant, so they look out of place in one of the two modes.
Task: grep src/components for bg-slate-800, bg-gray-900, or border-white/, pick one component, and convert its hardcoded colors to the semantic tokens above.
Leave the intentional cases alone: solid colored CTA buttons (for example bg-blue-600 text-white), the delete-undo toasts, and the JSON code blocks in the deposit dialogs are deliberately dark.
The recent LeaveDemoModal and AccountPasswordPopup conversions are good reference examples.
Why it is a good first issue: clear before-and-after pattern, one component at a time. See CONTRIBUTING.md for local setup.
ResearchOS supports light and dark mode through semantic Tailwind tokens: bg-surface, bg-surface-raised, bg-surface-sunken, text-foreground, text-foreground-muted, and border-border. A few components still hardcode fixed colors such as bg-slate-800, text-white, or border-white/10 with no dark variant, so they look out of place in one of the two modes.
Task: grep src/components for bg-slate-800, bg-gray-900, or border-white/, pick one component, and convert its hardcoded colors to the semantic tokens above.
Leave the intentional cases alone: solid colored CTA buttons (for example bg-blue-600 text-white), the delete-undo toasts, and the JSON code blocks in the deposit dialogs are deliberately dark.
The recent LeaveDemoModal and AccountPasswordPopup conversions are good reference examples.
Why it is a good first issue: clear before-and-after pattern, one component at a time. See CONTRIBUTING.md for local setup.