fix: force input text color to black for dark mode visibility

[Atharva1015]

Closes #6

Title: fix(settings): force input text color to black for dark mode visibility

Description: This PR fixes the usability issue where input text becomes invisible (white-on-white) when the device is in Dark Mode.

The bug was identified by analyzing SettingsScreen.tsx, I found that the inputContainer has a static light background (colors.neutral[50]), but the input text was using a dynamic color (colors.neutral[900]).

Light Mode: Background is White, Text is Dark. (OK)

Dark Mode: Background stays White (Static), but Text turns White (Dynamic). (Invisible)

The Fix: I have updated the input style to use a hardcoded black color (#000000). Since the container background is always light regardless of the theme, the text must always be black to ensure contrast in both modes.

[IamLRBA]

Thanks @Atharva1015, the approach is straightforward and accurate!
As a small improvement, I think these would be great:

1. Align the text color with our project’s unified design tokens system, you could take time and read the tokens documentation here and examples of using them in the Formulas app here.

I believe this should help you even for future contributions rather than using hardcoded values, to keep styling consistent and future-proof.

2. Screenshots aren’t strictly required for this fix, but a quick before/after image could add extra clarity for reviewers.

Thanks again for the initiative and interest!

[Atharva1015]

Thanks for pointing that out! I found colors.neutral.black in the design tokens and have updated the styles to use that instead of the hardcoded hex value. The PR is updated!

[IamLRBA]

Hi @Atharva1015

Thanks for making the change! You're on the right track.
You just need to use tokens from the official @ode/tokens package instead of the local theme file.

What to change:

• Import the tokens: Add import { tokens } from '@ode/tokens/dist/react-native/tokens'; to your imports.
• Otherwise, it would result into an error because of a wrong import!

How to test:
From the packages/tokens directory, run npm install and npm run build to ensure the tokens package is built locally. Then, you can verify the color works in your Formulus component.

Your change will guarantee visibility. The key is just sourcing it from the right place.

Let me know if you have any questions!
Sorry for dragging this too long, but we can also have fun with code and its rules right buddy? (>ᴗ•) !

[Atharva1015]

Hello @IamLRBA !
So, I've explored the @ode/tokens package and successfully built it locally!
I noticed that the new tokens are structured as objects (e.g., tokens.color.neutral.black.value). Since I'm switching the import for the input color fix, would you like me to:

1. Refactor the entire SettingsScreen.tsx styles to use the new tokens for consistency?
2. Or just apply it to the input field for now to keep this PR focused specifically on the dark mode bug?

[IamLRBA]

Nice work checking the @ode/tokens package and successfully building it!
For now, just apply it to the input field to keep this PR focused specifically on the dark mode bug.
Then perhaps as a follow up contribution, you can open an issue to "Refactor the entire SettingsScreen.tsx styles to use the new tokens" and then proceed to solve the issue after being assigned.
Well done @Atharva1015!

[Atharva1015]

Hi @IamLRBA. Thanks for the feedback!
I’ve applied the changes as mentioned and pushed the update. Let me know if there’s anything else needed 😊.