Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix the tables dark theme issue for Headless Typedoc #5077

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

eguyon-coveo
Copy link
Contributor

@eguyon-coveo eguyon-coveo commented Mar 14, 2025

To see the problem we currently have, you can open an incognito window and go to https://docs.coveo.com/en/headless/latest/reference/index.html

You'll see that the table has a bad UI when in dark mode

This is because data-theme is set to "os" when we dont have the cookies selected.

The solution is to use --color-background as the background color

Screenshot 2025-03-14 at 2 20 45 PM Screenshot 2025-03-14 at 2 34 04 PM

Copy link

Pull Request Report

PR Title

❌ Title should follow the conventional commit spec:
<type>(optional scope): <description>

Example: feat(headless): add result-list controller

Live demo links

Bundle Size

File Old (kb) New (kb) Change (%)
case-assist 246.6 246.6 0
commerce 359.2 359.2 0
search 417.3 417.3 0
insight 408.5 408.5 0
recommendation 258 258 0
ssr 411.1 411.1 0
ssr-commerce 375.7 375.7 0

Copy link
Contributor

@alexprudhomme alexprudhomme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should you also fix this for headless-react ?

Copy link
Contributor

@jpmarceau jpmarceau left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought I fixed this 🤔
#4963
In fact, I can't reproduce the bug on my machine...

If you do a hard refresh, does the issue go away on your browser @eguyon-coveo ?
(if you have a cached version of the CSS before my fix, it would explain why your table styling is messed up)

@eguyon-coveo
Copy link
Contributor Author

I thought I fixed this 🤔 #4963 In fact, I can't reproduce the bug on my machine...

If you do a hard refresh, does the issue go away on your browser @eguyon-coveo ? (if you have a cached version of the CSS before my fix, it would explain why your table styling is messed up)

I don't think it's a cache issue because I ran it on incognito and got the same issue. When I load the page, the data-theme is set to "os" by default. The theme then changes based on the computer settings

Screenshot 2025-03-14 at 4 56 26 PM

When I change it to "dark", your code works. I think it might related to cookies. I talked to @jsmith2-coveo about it and he could probably explain it better than me

Screen.Recording.2025-03-14.at.5.10.24.PM.mov

Copy link
Contributor

@jpmarceau jpmarceau left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah my bad, TIL
Thanks Elouan

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.

3 participants