[ui] Add system setting option for themes #18655
Conversation
|
Current dependencies on/for this PR:
This stack of pull requests is managed by Graphite. |
|
Deploy preview for dagit-storybook ready! ✅ Preview Built with commit 952b75b. |
|
Deploy preview for dagit-core-storybook ready! ✅ Preview Built with commit 952b75b. |
|
The little triangle in the top right is white |
|
It sure is, good catch! Probably a mixup in the change to themes. Will fix. |
|
Love it. Is there anyway to force a refresh? It's slightly annoying that I have to manually do a browser refresh for the theme change to take effect. |
| modifiers={{offset: {enabled: true, options: {offset: [-12, 8]}}}} | ||
| > | ||
| {button} | ||
| </ProductTour> |
There was a problem hiding this comment.
Wow I think I'd missed this in other PRs, this is a really nice component interface 💯
| // return DagsterTheme.Dark; | ||
| // } | ||
| if (value === DagsterTheme.System) { | ||
| if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { |
There was a problem hiding this comment.
This looks good to me! I like that the memoize means this is only re-computed on page load so systems that change at dusk won't start returning dark as individual components on the page re-render.
hellendag
force-pushed
the
dish/theme-system-pref
branch
from
cdd56c5 to
952b75b
Compare
|
Fixed the tour arrow. 
|
Yeah, I have something in mind for this. |
Summary & Motivation
Allow using the system setting for light/dark mode. This is added as a "System setting" option in the theme selector.
Also add a product tour component to direct users to the feature. Track its dismissed state in localStorage.
How I Tested These Changes
Remove
dagster-themefrom localStorage, view app. Verify that the tour popover appears, and that it can be dismissed (with state tracked) by clicking "Dismiss".Choose "System setting" from theme selector in User Settings dialog, click "Done". Verify that I see dark mode on reload, with "System" as the value in localStorage.