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

[Docs] EuiThemeProvider global theme switching #5072

Closed
thompsongl opened this issue Aug 24, 2021 · 5 comments
Closed

[Docs] EuiThemeProvider global theme switching #5072

thompsongl opened this issue Aug 24, 2021 · 5 comments
Labels
documentation Issues or PRs that only affect documentation - will not need changelog entries emotion EUI Plus stale-issue stale-issue-closed

Comments

@thompsongl
Copy link
Contributor

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 #4511 (comment)

@github-actions
Copy link

👋 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
Copy link

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
Copy link
Contributor

ebuildy commented Nov 7, 2022

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>

@elizabetdev elizabetdev added documentation Issues or PRs that only affect documentation - will not need changelog entries EUI Plus labels Nov 8, 2022
@github-actions
Copy link

👋 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.

Copy link

❌ Per our previous message, this issue is auto-closing after having been open and inactive for a year. If you strongly feel this is still a high-priority issue, or are interested in contributing, please leave a comment or open a new issue linking to this one for context.

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Apr 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Issues or PRs that only affect documentation - will not need changelog entries emotion EUI Plus stale-issue stale-issue-closed
Projects
None yet
Development

No branches or pull requests

6 participants