Skip to content

Enhance Chart.js Tooltip for both Light and Dark Mode#23141

Open
FrancisTRAlt wants to merge 2 commits intoforem:mainfrom
FrancisTRAlt:Francis/text
Open

Enhance Chart.js Tooltip for both Light and Dark Mode#23141
FrancisTRAlt wants to merge 2 commits intoforem:mainfrom
FrancisTRAlt:Francis/text

Conversation

@FrancisTRAlt
Copy link
Copy Markdown
Contributor

@FrancisTRAlt FrancisTRAlt commented Apr 14, 2026

What type of PR is this? (check all applicable)

  • Refactor
  • Feature
  • Bug Fix
  • Optimization
  • Documentation Update

Description

This PR fixes the Issue where the text is invisible if you were in dark mode. Created the Tooltip that Chart.js uses to make it visible for both Light and Dark Mode.

image image

Related Tickets & Documents

QA Instructions, Screenshots, Recordings

Make sure you are signed in. Same steps to reproduce as mention in the issue:

  • Set DEV to dark theme (Profile → Settings → Appearance, or system preference if you use “default to system”).
  • Open Dashboard and go to the analytics / stats view for a post where the time-series chart (Reads vs Avg Read Time) is shown.
  • Hover over a point on the chart so the tooltip appears.

UI accessibility checklist

  • Color contrast tested?

Added/updated tests?

  • Yes
  • No, and this is why: please replace this line with details on why tests
    have not been included
  • I need help with writing tests

What gif best describes this PR or how it makes you feel?

ditto

@github-actions
Copy link
Copy Markdown
Contributor

Thank you for opening this PR! We appreciate you!

For all pull requests coming from third-party forks we will need to
review the PR before we can process it through our CI pipelines.

A Forem Team member will review this contribution and get back to
you as soon as possible!

@FrancisTRAlt FrancisTRAlt marked this pull request as ready for review April 14, 2026 18:52
@FrancisTRAlt FrancisTRAlt requested a review from a team as a code owner April 14, 2026 18:52
@FrancisTRAlt
Copy link
Copy Markdown
Contributor Author

I have read the CLA Document and I hereby sign the CLA

@FrancisTRAlt FrancisTRAlt changed the title Enhance Tooltip for Chart.js for light and dark mode Enhance Chart.js Tooltip for both Light and Dark Mode Apr 14, 2026
@math-krish
Copy link
Copy Markdown

Do you think it makes sense to make the tooltip background light and just keep the text dark in light mode?

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.

Analytics chart tooltip unreadable in dark mode (light tooltip + light text)

2 participants