Integrate custom CSS theme assets into documentation configuration

[Sachindu-Nethmin]

Purpose

The documentation theme needed refinement to improve the visibility of diagrams in dark mode and to standardize interactive elements. Specifically, transparent diagrams were difficult to read against the dark background, and link hover colors were inconsistent, appearing blue in some contexts instead of the brand orange.

Goals

• Enhance dark mode visibility for transparent images and diagrams.
• Standardize the visual identity by integrating a comprehensive theme CSS.
• Ensure a consistent brand experience by forcing orange hover colors on all links and navigation items.

Approach

• New Theme Asset: Created en/docs/assets/css/theme.css to house the primary theme styles.
• Dark Mode Visibility: Updated en/docs/assets/css/custom.css to apply a white background, padding, and border-radius to images in the content area when the "slate" (dark) color scheme is active. This rule specifically excludes logos and icons to preserve their intended appearance.
• Hover Consistency: Added global overrides in custom.css to ensure .md-nav__link and .md-typeset a tags use the brand orange color (#ff7300) on hover.
• Configuration: Modified en/mkdocs.yml to register the new CSS assets in the extra_css pipeline.

User stories

• As a user viewing the docs in dark mode, I want transparent diagrams to be clearly visible so that I can follow technical flows easily.
• As a visitor, I want consistent hover feedback across the site that aligns with the WSO2 brand identity.

Release note

Improved diagram visibility in dark mode and standardized link hover colors across the documentation.

Documentation

N/A - This PR is a styling update to the documentation site itself.

Training

N/A

Certification

N/A

Marketing

N/A

Automation tests

• Manual Verification: Verified UI changes using mkdocs serve on local environment across both light and dark color schemes.

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines? yes
• Ran FindSecurityBugs plugin and verified report? N/A (CSS/Config changes only)
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? yes

Samples

N/A

Related PRs

N/A

Migrations (if applicable)

N/A

Test environment

• Operating System: macOS
• Browser: Google Chrome
• Tools: MkDocs Material

Learning

N/A

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9356a453-4c62-43aa-b860-1f6c6ca180c6

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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