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

[ui] Fix dark mode scrollbars #26033

Merged
merged 1 commit into from
Nov 20, 2024
Merged

[ui] Fix dark mode scrollbars #26033

merged 1 commit into from
Nov 20, 2024

Conversation

hellendag
Copy link
Member

@hellendag hellendag commented Nov 20, 2024

Summary & Motivation

Fix scrollbars in dark mode.

  • Use dark instead of 'dark' as the color scheme value. This fixes the main issue, where we're rendering light-mode browser controls. I'm not sure if this has been broken since we shipped dark mode, or if something recently changed. Either way, sorry for leaving it broken for so long.
  • Style the scrollbar to use our themed colors, instead of the (mismatching) defaults.
Screenshot 2024-11-20 at 08 31 03 Screenshot 2024-11-20 at 08 31 18

How I Tested These Changes

Change MacOS settings to show scrollbars in all cases. Load an asset detail page, shrink the viewport to force scrollbars to appear.

Verify that they look correct (including themed colors) in both dark mode and light mode.

Changelog

[ui] Fix scrollbars in dark mode.

Copy link
Member Author

This stack of pull requests is managed by Graphite. Learn more about stacking.

@hellendag hellendag marked this pull request as ready for review November 20, 2024 14:38
@hellendag hellendag requested a review from katefarrar November 20, 2024 14:38
Copy link

github-actions bot commented Nov 20, 2024

Deploy preview for dagit-storybook ready!

✅ Preview
https://dagit-storybook-hd4slhcj2-elementl.vercel.app
https://dish-dark-scrollbars.components-storybook.dagster-docs.io

Built with commit fc516c8.
This pull request is being automatically deployed with vercel-action

Copy link

github-actions bot commented Nov 20, 2024

Deploy preview for dagit-core-storybook ready!

✅ Preview
https://dagit-core-storybook-6hqr16b2a-elementl.vercel.app
https://dish-dark-scrollbars.core-storybook.dagster-docs.io

Built with commit fc516c8.
This pull request is being automatically deployed with vercel-action

@hellendag hellendag force-pushed the dish/dark-scrollbars branch from 7ea26bb to 7fa4425 Compare November 20, 2024 15:15
@hellendag hellendag force-pushed the dish/dark-scrollbars branch from 7fa4425 to fc516c8 Compare November 20, 2024 16:47
@hellendag hellendag merged commit 7360e30 into master Nov 20, 2024
3 checks passed
@hellendag hellendag deleted the dish/dark-scrollbars branch November 20, 2024 18:19
pskinnerthyme pushed a commit to pskinnerthyme/dagster that referenced this pull request Dec 16, 2024
## Summary & Motivation

Fix scrollbars in dark mode.

- Use `dark` instead of `'dark'` as the color scheme value. This fixes
the main issue, where we're rendering light-mode browser controls. I'm
not sure if this has been broken since we shipped dark mode, or if
something recently changed. Either way, sorry for leaving it broken for
so long.
- Style the scrollbar to use our themed colors, instead of the
(mismatching) defaults.

<img width="1098" alt="Screenshot 2024-11-20 at 08 31 03"
src="https://github.com/user-attachments/assets/638d77b9-5add-4cc2-a2ba-0de7c2c68b40">

<img width="1098" alt="Screenshot 2024-11-20 at 08 31 18"
src="https://github.com/user-attachments/assets/f062f452-0e97-42db-9311-07ba0017626b">


## How I Tested These Changes

Change MacOS settings to show scrollbars in all cases. Load an asset
detail page, shrink the viewport to force scrollbars to appear.

Verify that they look correct (including themed colors) in both dark
mode and light mode.

## Changelog

[ui] Fix scrollbars in dark 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.

2 participants