Improve GitHub star badge contrast

[ReneWerner87]

Summary

• adjust the GitHub star badge styling for better contrast in light and dark themes
• add explicit text color and subtle borders to improve readability

Testing

• not run (CSS change only)

---

https://chatgpt.com/codex/tasks/task_e_68debd8022c08326a75b1fe669c9cb5a

Summary by CodeRabbit

• Style
  • Refreshed the GitHub stars count badge appearance for both light and dark themes.
  • Improved contrast with explicit background and text colors, plus a subtle border for clearer readability.
  • Standardized visuals to ensure a more consistent look across themes and states.
  • Reduces translucency-related inconsistencies, making the badge easier to scan without altering layout or behavior.

[gemini-code-assist]

Summary of Changes

Hello @ReneWerner87, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on refining the visual presentation of the GitHub star badge. By introducing specific background colors, text colors, and subtle borders, the changes aim to enhance the badge's contrast and overall readability, ensuring it stands out clearly in both light and dark mode environments.

Highlights

• Improved Contrast: The GitHub star badge styling has been adjusted to provide better contrast in both light and dark themes.
• Enhanced Readability: Explicit text colors and subtle borders have been added to the badge to significantly improve its readability.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[coderabbitai]

Walkthrough

Updated CSS for the GitHub stars navbar badge: replaced variable-based background colors with explicit RGBA values, and added explicit text color and borders for both light and dark themes. No layout or behavioral changes.

Changes

Cohort / File(s)	Summary of Changes
GitHub stars badge styling src/css/custom.css	Replaced light/dark background variables with explicit RGBA colors; added explicit text color and border for .github-stars-navbar-item__count; removed previous CSS variable fallbacks.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I nibble CSS like clover and chard,
Tweaking stars to shimmer, soft yet hard. ✨
Borders crisp, colors set—no more guess,
A tidy badge in the navbar’s dress.
Hop! The UI blinks, neat and bright—
Night and day, styled just right. 🐇

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The PR description does not follow the repository’s required template, which begins with a notice about documentation changes and specific headings, and instead only includes custom "Summary" and "Testing" sections.	Update the description to include the mandatory notice from the provided template at the top and reformat the information under the specified headings as outlined in the repository’s description template.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title clearly summarizes the primary change of improving the GitHub star badge contrast in a concise single sentence without any unrelated details.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch codex/2025-10-02-18-05-17

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2b42d72 and 807c102.

📒 Files selected for processing (1)

• src/css/custom.css (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: deploy (docs, gofiber/docs, docs.gofiber.io)

---

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.}

[gemini-code-assist]

Code Review

This pull request improves the contrast of the GitHub star badge for better readability in both light and dark themes by adding explicit colors and borders. The changes are effective, but they introduce hardcoded color values which could be less maintainable. My feedback suggests using CSS custom properties (variables) to improve maintainability, especially for the dark theme where colors are derived from the same base RGB value.

[gemini-code-assist]

While these hardcoded rgba values improve contrast, they reduce maintainability. If the site's color palette is updated in the future, these colors will have to be changed manually. Consider defining custom CSS properties for these colors within this rule, or check if any existing Infima variables can be used to derive these colors (e.g., using rgba(var(--ifm-some-color-rgb), 0.08)).

[gemini-code-assist]

The background-color and border properties use the same RGB values with different alpha transparencies. You can define a custom CSS property for the RGB values to avoid repetition and improve maintainability. This makes the relationship between the colors explicit and easier to manage.

  --github-stars-badge-color-rgb: 148, 163, 184;
  background-color: rgba(var(--github-stars-badge-color-rgb), 0.16);
  color: var(--ifm-color-emphasis-100);
  border: 1px solid rgba(var(--github-stars-badge-color-rgb), 0.35);