Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Nov 10, 2025

Please check the following before creating a Pull Request

  • If this is a new feature or piece of functionality, have you started a discussion and gotten agreement on it?
  • If it fixes a bug or problem, is there an issue to track it? If not, create one first and link it please so there's clear visibility.
  • Did you write tests to ensure you code works properly?

Description

The Assertions Library page rendered light-colored text on white backgrounds when users switched to light mode, making content unreadable.

Root cause: CSS module only defined colors for dark theme. Light mode inherited these values, causing insufficient contrast.

Changes

  • Added light mode color palette (slate/gray tones) for text, backgrounds, and interactive elements
  • Wrapped existing styles in [data-theme='dark'] selectors to scope them properly
  • Applied default light mode styles at root level, following Docusaurus convention

Elements fixed

  • Text: descriptions, labels, counts (dark slate on light backgrounds)
  • Search input: reduced background opacity, darker text
  • Category buttons: lighter backgrounds with proper hover states
  • Assertion cards: subtle tinted backgrounds with visible borders
  • Code blocks: light gray backgrounds with dark blue text
  • Example sections: reduced purple tinting for readability

Visual comparison

Before (light mode):
Before

After (light mode):
After

Dark mode (unchanged):
Dark mode

Technical details

CSS-only fix. No functional changes. Pattern: default styles target light mode, dark mode overrides applied via [data-theme='dark'] attribute selector.

Original prompt

This section details on the original issue you should resolve

<issue_title>Documentation: Text blends into background when using the light mode</issue_title>
<issue_description>https://tunit.dev/docs/assertions/library/

Image</issue_description>

Comments on the Issue (you are @copilot in this section)


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI changed the title [WIP] Fix documentation text blending into background in light mode Fix light mode text contrast in Assertions Library page Nov 10, 2025
Copilot AI requested a review from thomhurst November 10, 2025 13:49
Copilot finished work on behalf of thomhurst November 10, 2025 13:49
@thomhurst thomhurst marked this pull request as ready for review November 10, 2025 13:52
@thomhurst thomhurst merged commit 10b0e69 into main Nov 10, 2025
5 checks passed
@thomhurst thomhurst deleted the copilot/fix-text-blending-issue branch November 10, 2025 13:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Documentation: Text blends into background when using the light mode

2 participants