message feed: Refine dark mode styles for alert_word.
This pull request addresses various style enhancements in dark mode to improve readability and accessibility:
- All colors used in this pull request have been suggested in #12614(comment)
- Adjusts the color and background-color of alert words for better visibility.
- Modifies the alert_word link color to enhance contrast and readability.
- Improves the search result background-color for a more cohesive dark mode experience.
- I've ensured that the changes made for dark mode don't affect the light mode. Attached is a screenshot of the light mode that shows the adjustments made exclusively for dark mode, ensuring readability and accessibility.
Fixes: #12614
Screenshots and screen captures:
- Dark Mode Before Changes for Alert Word:
- Dark Mode After Changes for Alert Word:
- Dark Mode Before Changes for Alert Word Link tag:
- Dark Mode After Changes for Alert Word Link tag:
- Dark Mode Before Changes for search results
- Dark Mode After Changes for search results
-
Light Mode:
- Doesn't Effect the Changes for Search Results:
- Doesn't Effect the Changes for Alert Word:
- Before Changes for highlighted link text:
-
After Changes for highlighted link text:
Self-review checklist
- [x] Self-reviewed the changes for clarity and maintainability (variable names, code reuse, readability, etc.).
Communicate decisions, questions, and potential concerns.
- [x] Explains differences from previous plans (e.g., issue description).
- [x] Highlights technical choices and bugs encountered.
- [x] Calls out remaining decisions and concerns.
- [x] Automated tests verify logic where appropriate.
Individual commits are ready for review (see commit discipline).
- [x] Each commit is a coherent idea.
- [x] Commit message(s) explain reasoning and motivation for changes.
Completed manual review and testing of the following:
- [x] Visual appearance of the changes.
- [x] Responsiveness and internationalization.
- [x] Strings and tooltips.
- [x] End-to-end functionality of buttons, interactions and flows.
- [x] Corner cases, error conditions, and easily imagined bugs.
Hello @zulip/design members, this pull request was labeled with the "design" label, so you may want to check it out!
Continues work from #28813.
I believe the next step here is @karlstolley 's review. Unless there's feedback on #28813 that still needs to be addressed?
Okay. Please see my comments above. Also, make your screenshots way more simple to compare as before and after. The best ways to do this:
- Make sure you have EXACTLY the same content on screen in both the before and after shots
- Use GitHub-flavored Markdown table syntax to show before and after shots, side by side. See for example the screenshots in #29203
Heads up @amaranand360, we just merged some commits that conflict with the changes you made in this pull request! You can review this repository's recent commits to see where the conflicts occur. Please rebase your feature branch against the upstream/main branch and resolve your pull request's merge conflicts accordingly.