Skip to content

fix: make dark mode gray text white#46

Open
pthmas wants to merge 2 commits intomainfrom
pthmas/white-text-fix
Open

fix: make dark mode gray text white#46
pthmas wants to merge 2 commits intomainfrom
pthmas/white-text-fix

Conversation

@pthmas
Copy link
Copy Markdown
Collaborator

@pthmas pthmas commented Mar 31, 2026

Summary

  • switch the shared dark-mode text-gray-* palette to white
  • keep the existing light-mode gray palette unchanged

Checks

  • frontend lint
  • frontend build
  • cargo test --workspace

Summary by CodeRabbit

  • Style
    • Dark-mode override for legacy gray text utilities: gray-200 through gray-700 now render as a lighter gray to improve text visibility in non-light themes.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 31, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1cef1640-2bb5-49c0-8733-67d2c15c63ff

📥 Commits

Reviewing files that changed from the base of the PR and between c37fe8c and 17d31d3.

📒 Files selected for processing (1)
  • frontend/src/index.css
🚧 Files skipped from review as they are similar to previous changes (1)
  • frontend/src/index.css

📝 Walkthrough

Walkthrough

Adds dark-theme CSS utility overrides in frontend/src/index.css that force Tailwind-style .text-gray-200 through .text-gray-700 to use rgb(248 250 252 / var(--tw-text-opacity, 1)) when :root:not([data-theme='light']).

Changes

Cohort / File(s) Summary
Dark-theme text utility overrides
frontend/src/index.css
Added @layer utilities rules: :root:not([data-theme='light']) .text-gray-200.text-gray-700 now set color: rgb(248 250 252 / var(--tw-text-opacity, 1)). Introduces dark-mode overrides for legacy gray text utility classes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 I hopped through styles in moonlit cheer,
Turning dusty grays to near-white clear,
Text now shimmers on the darkened theme,
A tiny rabbit's bright CSS dream. 🥕✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'fix: make dark mode gray text white' directly and accurately summarizes the main change: converting dark mode gray text utilities to white, which matches the changeset objective.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch pthmas/white-text-fix

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@pthmas pthmas changed the title Make dark mode gray text white fix: make dark mode gray text white Mar 31, 2026
@pthmas
Copy link
Copy Markdown
Collaborator Author

pthmas commented Apr 1, 2026

@coderabbitai review

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 1, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/src/index.css`:
- Around line 24-29: The change overrides shared --color-gray-* tokens, breaking
bg/border gray usages; instead revert the --color-gray-200..700 values back to
the original gray ramp and introduce/override dedicated text variables (e.g.,
--text-gray-200..--text-gray-700) or scope the override to the text utility by
updating the CSS rule that sets text color classes (text-gray-*) to use white in
dark mode; locate the CSS definitions you changed (the
--color-gray-200..--color-gray-700 entries) and replace them with restoring the
gray ramp, then add new --text-gray-* variables or a dark-mode selector that
forces .text-gray-* to rgb(255 255 255 / <alpha>) so bg-gray-* and border-gray-*
usages (referenced by Layout.tsx and NFTContractPage.tsx) remain unaffected.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0039bdad-672d-447f-b269-c480c36cd23c

📥 Commits

Reviewing files that changed from the base of the PR and between 1f86eb2 and c37fe8c.

📒 Files selected for processing (1)
  • frontend/src/index.css

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.

1 participant