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

[cee-chen]

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.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: b7be6d8

History

• 💚 Build #2747 succeeded 77e870c
• 💚 Build #2746 succeeded 7cf8edd
• 💚 Build #2745 succeeded 657586f

[JasonStoltz]

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]

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.