Enable dark mode in Customize Avatars page

[Dhairya1890]

Related issues

Fixes #846

Changes

• Added dark mode support to the Customize Avatars page
• Updated Tailwind CSS classes for proper dark mode rendering

Screenshots

Summary by CodeRabbit

Release Notes

• Style
  • Enhanced form control styling in the avatar customization interface with improved visual feedback, including better focus states and dark mode support for all customization options.

[coderabbitai]

Walkthrough

The web/templates/avatar/customize.html template was updated with enhanced Tailwind utility classes on form controls (selects and inputs) to add padding, borders, focus rings, dark-mode background/text colors, and focus states across all customization fields.

Changes

Cohort / File(s)	Summary
Avatar Customization Template Styling web/templates/avatar/customize.html	Enhanced form control styling with Tailwind utility classes for dark mode support, borders, focus rings, and improved visual appearance on all select dropdowns and input fields (Style, Hair Style, Colors, Facial features, Clothing, Accessories).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

files-changed: 2

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and specifically describes the main change: enabling dark mode support on the Customize Avatars page, which matches the core objective of fixing dark mode rendering issues.
Linked Issues check	✅ Passed	The PR successfully addresses issue #846 by adding Tailwind dark mode classes to form controls (selects and color inputs), fixing the white-on-white text readability problem described in the linked issue.
Out of Scope Changes check	✅ Passed	All changes are scoped to the customize.html template file and directly address dark mode styling for form controls; no unrelated modifications or out-of-scope changes are present.
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
• Post copyable unit tests in a comment

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

web/templates/avatar/customize.html (1)

8-8: ⚠️ Potential issue | 🟡 Minor

Heading missing dark mode text color.

The <h1> has no dark:text-white or dark:text-gray-100 class, so it may be invisible against the dark background. Same applies to the <h2> elements on lines 12 and 33.

Proposed fix

-      <h1 class="text-3xl font-bold mb-8">Customize Your Avatar</h1>
+      <h1 class="text-3xl font-bold mb-8 dark:text-white">Customize Your Avatar</h1>

-          <h2 class="text-xl font-semibold mb-4">Preview</h2>
+          <h2 class="text-xl font-semibold mb-4 dark:text-white">Preview</h2>

-          <h2 class="text-xl font-semibold mb-4">Customize</h2>
+          <h2 class="text-xl font-semibold mb-4 dark:text-white">Customize</h2>

🤖 Fix all issues with AI agents

In `@web/templates/avatar/customize.html`:
- Line 38: Update all form <label> elements in
web/templates/avatar/customize.html that currently use the class "block text-sm
font-medium mb-1" (appearing at the locations mentioned) to include the Tailwind
dark-mode classes by adding "text-gray-700 dark:text-gray-300" to their class
attribute so they become "block text-sm font-medium text-gray-700
dark:text-gray-300 mb-1"; ensure every label in the file is updated
consistently.
- Around line 39-42: Update all form inputs and selects in this template (e.g.,
the <select name="style"> element and every other <select> and <input>
referenced in the review) to use the project's Tailwind form classes: swap
dark:text-white for dark:text-gray-300 and change px-3 to px-4, and ensure the
full class string follows the guideline pattern (w-full px-4 py-2 border
border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500
dark:focus:ring-blue-400 bg-white dark:bg-gray-800 text-gray-700) so each
input/select (identify by attributes like name="style" and other name attributes
in the file) matches the specified style.