Lack of documentation on colorMode switching

[lightwave]

trafficstars

My apology if there is documentation on switch between light/dark colorMode but I couldn't find it on the eui documentation site.

Passing colorMode="dark" to EuiProvider doesn't switch it to dark mode. What's the recommended way to set up light/dark mode switching? I don't think I should import both light and dark css files.

Thanks for any clarification.

[thompsongl]

Hey @lightwave

Partial component support The EuiThemeProvider is only available for consuming the values. Modifying or overriding the values will not have any effect on the individual EUI components, yet. Instead, you will need to use the Sass method.

We could do a better job explaining, but the no EUI components have yet been converted to take advantage of CSS-in-JS. As such, CSS-in-JS color mode switching will have no effect. You'll need to use a CSS/Sass method for color mode switching until components are converted.

[elizabetdev]

Hi @lightwave,

As @thompsongl mentioned:

You'll need to use a CSS/Sass method for color mode switching until components are converted.

This answer can give you some ideas on how to achieve that using a CSS/Sass method: https://github.com/elastic/eui/discussions/2574#discussioncomment-127117.

[blessedjasonmwanza]

@lightwave Same issue here. I configured color mode to light in the index page but still, header components still end up in dark mode.

root.render(
  <React.StrictMode>
    <EuiProvider colorMode='light'>
      <App />
    </EuiProvider>
  </React.StrictMode>
);

And unfortunately,

import {
    EuiHeader,
    EuiHeaderSectionItem,
    EuiHeaderLogo,
    EuiHeaderLinks,
    EuiHeaderLink,
  } from '@elastic/eui';
import React from 'react'

export default function TopNav() {
  return (
    <EuiHeader>
      <EuiHeaderSectionItem border="right">
        <EuiHeaderLogo>Elastic</EuiHeaderLogo>
      </EuiHeaderSectionItem>

      <EuiHeaderSectionItem>
        <EuiHeaderLinks aria-label="App navigation links example">
          <EuiHeaderLink isActive>Docs</EuiHeaderLink>

          <EuiHeaderLink>Code</EuiHeaderLink>

          <EuiHeaderLink iconType="help">Help</EuiHeaderLink>
        </EuiHeaderLinks>
      </EuiHeaderSectionItem>
    </EuiHeader>
  )
}

Still ends defaulting to dark mode, why???

@thompsongl Do we have a way to fix this? Under normal working circumstances, I assume a framework should adapt to the provider config and should only change if explicitly told so through eight component props e.t.c

I would appreciate your help on this.

[cchaos]

@blessedjasonmwanza How are you importing the CSS styles? EUI is currently in the process of moving towards a complete CSS-in-JS themed library, but we haven't converted all components including the EuiHeader (you can track the meta ticket here: https://github.com/elastic/eui/issues/5685). If you follow the guidelines set here: https://elastic.github.io/eui/#/guidelines/getting-started#setting-up-your-application you should see an import statement to get the compiled .css file. If you're viewing the docs in dark mode, that import statement will show the dark mode import. If you want light mode only, you should import import '@elastic/eui/dist/eui_theme_light.css';

[blessedjasonmwanza]

@blessedjasonmwanza How are you importing the CSS styles? EUI is currently in the process of moving towards a complete CSS-in-JS themed library, but we haven't converted all components including the EuiHeader (you can track the meta ticket here: #5685). If you follow the guidelines set here: https://elastic.github.io/eui/#/guidelines/getting-started#setting-up-your-application you should see an import statement to get the compiled .css file. If you're viewing the docs in dark mode, that import statement will show the dark mode import. If you want light mode only, you should import import '@elastic/eui/dist/eui_theme_light.css';

Thanks a million, @cchaos . In react:

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

Imported in each component seems to resolve the issue. I appreciate your prompt assistance.

HappyCoding 👨🏽‍💻

[cchaos]

Imported in each component

I'd hope that isn't truly necessary. You should have something like app.tsx/js that is where all your views are rendered from. You should be able to import it there and only once, otherwise you risk importing it many times and it's a very large file.

[blessedjasonmwanza]

Imported in each component

I'd hope that isn't truly necessary. You should have something like app.tsx/js that is where all your views are rendered from. You should be able to import it there and only once, otherwise you risk importing it many times and it's a very large file.

Oh, yea 🥇 . You just saved my brain from creating chaos 🙈 . Thanks a lot, @cchaos />

[ebuildy]

I tried using lazy & suspense to switch dynamically between dark & light themes, but CSS is broken (some components stay in dark and vice-versa):

Here what I did, https://github.com/datatok/gui/pull/13

1. Embed 2 themes in a component

import React, { FC } from 'react'

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

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

export default Theme

2. Create lazy import

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

3. Switch

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

[elizabetdev]

I took a look at our docs because we've been improving them over time. And we still don't reference properly how to toggle between light and dark themes. We just say here that we should include the correspondent css file: https://eui.elastic.co/#/guidelines/getting-started#setting-up-your-application

Then in the provider or color mode section, we never reference that the css file is required when toggling between color modes: https://eui.elastic.co/#/theming/color-mode.

This issue will be resolved once we convert all components to emotion. No more css needs to be imported.

• So we should wait for all the emotion conversions to be done.
• We should also add one example to show how to toggle between color modes on https://eui.elastic.co/#/theming/color-mode.

[elizabetdev]

Actually, I'm closing this issue in favor of https://github.com/elastic/eui/issues/5072.