[Docs] `EuiThemeProvider` global theme switching

[thompsongl]

trafficstars

We should add an example like this of how to hook up the theme names and colorMode in the https://eui.elastic.co/pr_4511/#/theming/theme-provider#euithemeprovider example

Originally posted by @cchaos in https://github.com/elastic/eui/pull/4511#discussion_r690675903

[github-actions[bot]]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[blessedjasonmwanza]

Hi @cchaos && @cconboy - This mention illustrates some weird behavior of how theming fails to comply with index.js provider configs. Is there a way to make this setting intuitive?

[ebuildy]

Agree, documentation is really missing a concrete example, by using React Lazy & suspense. Here what I did:

https://github.com/datatok/gui/pull/13/files

Embed theme inside React component:

import React, { FC } from 'react'

import '@elastic/eui/dist/eui_theme_light.css'

const Theme: FC = () => (<React.Fragment></React.Fragment>)

export default Theme

The magic (where state.theme host the theme):

const LightTheme = React.lazy(async () => await import('../themes/Light'))
const DarkTheme = React.lazy(async () => await import('../themes/Dark'))

<React.Suspense fallback={<></>}>
        {(state.theme === 'light') && <LightTheme />}
        {(state.theme === 'dark') && <DarkTheme />}
      </React.Suspense>

[github-actions[bot]]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.