[EuiProvider] Detect OS/system light vs darkmode as a default #8026

cee-chen · 2024-09-16T21:10:47Z

Summary

Nobody asked for this, but I thought I'd do it anyway! 🤠

EUI's theme/colorMode currently defaults to light mode. I've added a new provider that detects the current system light/dark mode setting and if no consumer colorMode prop has been set/overridden, will automatically default to the OS/system setting.

There's also a few src-docs cleanup in here (tagged as such in individual commits), and I'll shortly be doing another pass of our various docs that remove/deprecate all references to Sass setup.

QA

Go to https://eui.elastic.co/pr_8026/#/
Clear any saved local data for the site:
Go to System > Appearance > Set to dark mode
Refresh the page and confirm the docs site is in dark mode
Without refreshing the page, go to your system appearances again and set it to light mode
Tab back to the docs site and confirm that the site has switched over automatically
Go to the switcher and manually change the site back to light mode
Refresh the page and confirm that preferred setting is saved and EUI is always in light mode regardless of system setting

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in Chrome, Safari, Edge, and Firefox
Docs site QA
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest ~~and cypress tests~~
Release checklist
- A changelog entry exists and is marked appropriately.

- doesn't have dynamic listening as a result, but oh well, that's how storybook's UI behaves so we might as well match it

…g from system setting

…`useEuiTheme`

… CSS file import

- due to previous legacy theme font changes

… prop - not really sure what either of these are doing, i'm guessing it's legacy code from before React context was more widely used

JasonStoltz · 2024-09-20T20:37:22Z

I think this is a tremendous and much needed improvement.

This wouldn't be breaking change, correct? I think we currently require a colorMode prop of either light or dark -- and this lets consumers simply omit a color mode prop in order to take advantage of system-level settings.

If that is the case, I see no reason why we couldn't proceed with this PR. Directionally, it's where we're headed with Kibana and moving this logic to EUI lets us take advantage of this in all of our products.

cee-chen · 2024-09-20T20:47:18Z

I think we currently require a colorMode prop of either light or dark -- and this lets consumers simply omit a color mode prop in order to take advantage of system-level settings.

No, we do not require the colorMode - it defaults to light mode if not passed.

This wouldn't be breaking change, correct?

Not a breaking change, correct. If consumers continue to not pass colorMode, then the default will be the system setting instead of the current default of light mode. If consumers pass a colorMode prop, that will always override / take precedence over our internal defaults.

cee-chen · 2024-09-23T01:21:46Z

@JasonStoltz did you mean to approve this, by the way? 👀

mgadewoll

🚢 🐈‍⬛ Requested or not, that's a great improvement! A much nicer experience respecting the user settings and it comes along with some cleanup, who wouldn't like it! The code LGTM and the colorMode changes work as expected. 🚀

packages/eui/src-docs/src/components/with_theme/theme_context.tsx

mgadewoll · 2024-09-23T17:28:00Z

packages/eui/src-docs/src/views/empty_prompt/_types_of_empty_states.tsx

-   * Setup theme based on current light/dark theme
-   */
-  const isDarkTheme = themeContext.theme.includes('dark');
+  const isDarkTheme = useEuiTheme().colorMode === 'DARK';


Yay for being able to reuse things! 👏

elasticmachine · 2024-09-23T23:02:52Z

💚 Build Succeeded

Buildkite Build
Commit: 2cdacd7

History

💚 Build #2780 succeeded 918b951
💚 Build #2755 succeeded b7be6d8
💚 Build #2747 succeeded 77e870c
💚 Build #2746 succeeded 7cf8edd
💚 Build #2745 succeeded 657586f

`v95.11.0`⏩`v95.12.0-backport.0` > [!note] > A few fun highlights from this release: > - Content within `EuiDataGrid`, `EuiBasicTable`, and `EuiInMemoryTable`, when manually selected/highlighted by users, should now more cleanly copy and paste into various spreadsheet apps > - `EuiProvider` will now detect the user's system-level dark or light mode and default to that if no `colorMode` prop is passed manually _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.12.0`](https://github.com/elastic/eui/releases/v95.12.0) - Enhanced `EuiDataGrid` and `EuiBasic/InMemoryTable` to clean content newlines/tabs when users copy and paste from their tabular data ([#8019](elastic/eui#8019)) - Updated `EuiResizableButton` with a new `accountForScrollbars` prop ([#8021](elastic/eui#8021)) - Updated `EuiProvider` to inherit from the user's OS/system light/dark mode setting if a `colorMode` prop has not been passed ([#8026](elastic/eui#8026)) **Bug fixes** - Fixed `EuiDatePicker`'s `onClear` button to not appear when the input is `disabled` ([#8020](elastic/eui#8020)) - Fixed several `EuiDataGrid` row height bugs: ([#8025](elastic/eui#8025)) - Fixed row heights not recalculating when `rowHeightOptions.lineHeight`, `gridStyles.fontSize`, or `gridStyles.cellPadding` changed - Fixed incorrect height calculations for `rowHeightOptions.rowHeights` with `lineCount`s - Fixed control column content to align better with multi-line row heights, as well as custom line-heights ## [`v95.12.0-backport.0`](https://github.com/elastic/eui/releases/v95.12.0-backport.0) **This is a backport release only intended for use by Kibana.** **Bug fixes** - Fixed `EuiProvider`'s system color mode detection causing errors during server-side rendering ([#8040](elastic/eui#8040)) - Fixed an `EuiDataGrid` rendering bug that was causing bouncing scrollbar issues ([#8041](elastic/eui#8041))

`v95.11.0`⏩`v95.12.0-backport.0` > [!note] > A few fun highlights from this release: > - Content within `EuiDataGrid`, `EuiBasicTable`, and `EuiInMemoryTable`, when manually selected/highlighted by users, should now more cleanly copy and paste into various spreadsheet apps > - `EuiProvider` will now detect the user's system-level dark or light mode and default to that if no `colorMode` prop is passed manually _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.12.0`](https://github.com/elastic/eui/releases/v95.12.0) - Enhanced `EuiDataGrid` and `EuiBasic/InMemoryTable` to clean content newlines/tabs when users copy and paste from their tabular data ([elastic#8019](elastic/eui#8019)) - Updated `EuiResizableButton` with a new `accountForScrollbars` prop ([elastic#8021](elastic/eui#8021)) - Updated `EuiProvider` to inherit from the user's OS/system light/dark mode setting if a `colorMode` prop has not been passed ([elastic#8026](elastic/eui#8026)) **Bug fixes** - Fixed `EuiDatePicker`'s `onClear` button to not appear when the input is `disabled` ([elastic#8020](elastic/eui#8020)) - Fixed several `EuiDataGrid` row height bugs: ([elastic#8025](elastic/eui#8025)) - Fixed row heights not recalculating when `rowHeightOptions.lineHeight`, `gridStyles.fontSize`, or `gridStyles.cellPadding` changed - Fixed incorrect height calculations for `rowHeightOptions.rowHeights` with `lineCount`s - Fixed control column content to align better with multi-line row heights, as well as custom line-heights ## [`v95.12.0-backport.0`](https://github.com/elastic/eui/releases/v95.12.0-backport.0) **This is a backport release only intended for use by Kibana.** **Bug fixes** - Fixed `EuiProvider`'s system color mode detection causing errors during server-side rendering ([elastic#8040](elastic/eui#8040)) - Fixed an `EuiDataGrid` rendering bug that was causing bouncing scrollbar issues ([elastic#8041](elastic/eui#8041)) (cherry picked from commit 8a89c85)

cee-chen force-pushed the system-color-mode branch from 7cf8edd to 77e870c Compare September 16, 2024 22:25

cee-chen added 8 commits September 17, 2024 17:28

Create provider/listener for detecting system light/dark mode setting

3d8caa4

[storybook] inherit toolbar/global from system setting

a9cee51

- doesn't have dynamic listening as a result, but oh well, that's how storybook's UI behaves so we might as well match it

[src-docs] Update to not set an initial theme, which allows inheritin…

acaf347

…g from system setting

[src-docs] Remove existing theme context light/dark mode in favor of …

23f4492

…`useEuiTheme`

[src-docs] Update codesandboxes - remove theme/color mode context and…

6b215a5

… CSS file import

[src-docs] remove text docs unnecessarily referencing theme

80dc95e

- due to previous legacy theme font changes

[src-docs] remove unnecessary theme render prop and selectedTheme…

6386602

… prop - not really sure what either of these are doing, i'm guessing it's legacy code from before React context was more widely used

changelog

b7be6d8

cee-chen force-pushed the system-color-mode branch from 77e870c to b7be6d8 Compare September 18, 2024 00:30

cee-chen marked this pull request as ready for review September 18, 2024 01:05

cee-chen requested a review from a team as a code owner September 18, 2024 01:05

Merge branch 'main' into system-color-mode

918b951

mgadewoll approved these changes Sep 23, 2024

View reviewed changes

[PR feedback] Clean up types in src-docs ThemeContext

2cdacd7

cee-chen enabled auto-merge (squash) September 23, 2024 22:36

cee-chen merged commit 9384ee0 into elastic:main Sep 23, 2024
5 checks passed

cee-chen deleted the system-color-mode branch September 23, 2024 23:02

This was referenced Sep 24, 2024

Upgrade EUI to v95.12.0 elastic/kibana#193805

Merged

[EuiProvider] Fix SSR crashing during new system color mode detection #8040

Merged

mgadewoll mentioned this pull request Oct 9, 2024

[Cypress] Add static colorMode for test environment #8066

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiProvider] Detect OS/system light vs darkmode as a default #8026

[EuiProvider] Detect OS/system light vs darkmode as a default #8026

cee-chen commented Sep 16, 2024 •

edited by mgadewoll

Loading

JasonStoltz commented Sep 20, 2024 •

edited

Loading

cee-chen commented Sep 20, 2024

cee-chen commented Sep 23, 2024

mgadewoll left a comment •

edited

Loading

mgadewoll Sep 23, 2024

elasticmachine commented Sep 23, 2024

[EuiProvider] Detect OS/system light vs darkmode as a default #8026

[EuiProvider] Detect OS/system light vs darkmode as a default #8026

Conversation

cee-chen commented Sep 16, 2024 • edited by mgadewoll Loading

Summary

QA

General checklist

JasonStoltz commented Sep 20, 2024 • edited Loading

cee-chen commented Sep 20, 2024

cee-chen commented Sep 23, 2024

mgadewoll left a comment • edited Loading

Choose a reason for hiding this comment

mgadewoll Sep 23, 2024

Choose a reason for hiding this comment

elasticmachine commented Sep 23, 2024

💚 Build Succeeded

History

cee-chen commented Sep 16, 2024 •

edited by mgadewoll

Loading

JasonStoltz commented Sep 20, 2024 •

edited

Loading

mgadewoll left a comment •

edited

Loading