How to add a dark mode toggle?

[tonyjmartinez]

I haven't been able to find an example in the documentation for how to add a dark mode toggle. It seems like I need to either import light_theme.scss or dark_theme.scss, but conditionally importing stylesheets doesn't seem very straightforward.

[snide]

Hi @tonyjmartinez. This question is sort of out of scope for the library itself and is more a general React question so I'm closing this. EUI outputs compiled CSS files for light and dark as part of the dist, so there's no need to touch the Sass if you don't need. There's a couple different ways you could handle toggling that on and off with React.

The EUI docs itself have an example using a reducer https://github.com/elastic/eui/blob/master/src-docs/src/store/reducers/theme_reducer.js . Search eui for the theme*.js files and you'll see generally how it works

The EUi gatsby starter has a simpler example using context https://github.com/elastic/gatsby-eui-starter/blob/master/src/components/chrome/chrome.tsx

Alternatively you could use a dynamic import of the css in a default html file.

In short, the way you decide to load your CSS is tightly coupled to your app's build system, but you'll want to set up some way to manage what theme the user is on, and then load the appropriate css file in your page. If you're using custom sass on top of EUI, you'd want to build your own css files (likely through some webpack process in your app) and import EUI from there. Some of that can be described here. https://github.com/elastic/eui/blob/master/wiki/consuming.md#importing-css-or-scss

[acidjunk]

@snide : Thanks for the explanation: I'm trying the context example now from EUI docs. Might be good to add more examples for this kind of stuff to the docs.

Update: the docs use a npm module: css-loader that adds some extra webpack config. Doesn't seem easy for a default CRA created react app.

[snide]

@acidjunk The gatsby-eui-starter has a working context driven example with useEffect on toggle. https://github.com/elastic/gatsby-eui-starter

[acidjunk]

@snide: yes I know: but it relies on custom webpack config.
So it works perfectly fine in dev mode: but not on production.

I'm crafting a POC based on: https://stackoverflow.com/questions/46835825/conditional-css-in-create-react-app

[acidjunk]

For me it works.

I created a folder themes/ with these 2 files:

ThemeDark.tsx

import React from 'react';

// 👇 Only important line - as this component should be lazy-loaded,
//    to enable code - splitting for this CSS.
import '@elastic/eui/src/theme_dark.scss';

const ThemeDark: React.FC = () => null;

export default ThemeDark;

ThemeLight.tsx

import React from 'react';

// 👇 Only important line - as this component should be lazy-loaded,
//    to enable code - splitting for this CSS.
import '@elastic/eui/src/theme_light.scss';

const ThemeLight: React.FC = () => null;

export default ThemeLight;

in components: ThemeSelector.tsx

import React from 'react';

/**
 * The theme components only imports it's theme CSS-file. These components are lazy
 * loaded, to enable "code splitting" (in order to avoid the themes being bundled together)
 */
const ThemeDark = React.lazy(() => import('../themes/ThemeDark'));
const ThemeLight = React.lazy(() => import('../themes/ThemeLight'));

const ThemeSelector: React.FC = ({ children }) => {
    const currentTheme = localStorage.getItem("theme") === "dark" ? "dark" : "light";
    return (
    <>
        {/* Conditionally render theme, based on the current client context */}
        <React.Suspense fallback={() => null}>
            {currentTheme === "dark" && <ThemeDark />}
            {currentTheme === "light" && <ThemeLight />}
        </React.Suspense>
        {/* Render children immediately! */}
        {children}
    </>
)};

export default ThemeSelector;

Then I wrapped the ThemeSelector component around <App />

To switch the themes I used a function that looks like this:

export function setTheme(theme) {
    localStorage.setItem("theme", theme);
    window.location.reload();
}

Which can be called without any context/state.

[AlessandroStaffolani]

For me it works.

I created a folder themes/ with these 2 files:

ThemeDark.tsx

import React from 'react';

// 👇 Only important line - as this component should be lazy-loaded,
//    to enable code - splitting for this CSS.
import '@elastic/eui/src/theme_dark.scss';

const ThemeDark: React.FC = () => null;

export default ThemeDark;

ThemeLight.tsx

import React from 'react';

// 👇 Only important line - as this component should be lazy-loaded,
//    to enable code - splitting for this CSS.
import '@elastic/eui/src/theme_light.scss';

const ThemeLight: React.FC = () => null;

export default ThemeLight;

in components: ThemeSelector.tsx

import React from 'react';

/**
 * The theme components only imports it's theme CSS-file. These components are lazy
 * loaded, to enable "code splitting" (in order to avoid the themes being bundled together)
 */
const ThemeDark = React.lazy(() => import('../themes/ThemeDark'));
const ThemeLight = React.lazy(() => import('../themes/ThemeLight'));

const ThemeSelector: React.FC = ({ children }) => {
    const currentTheme = localStorage.getItem("theme") === "dark" ? "dark" : "light";
    return (
    <>
        {/* Conditionally render theme, based on the current client context */}
        <React.Suspense fallback={() => null}>
            {currentTheme === "dark" && <ThemeDark />}
            {currentTheme === "light" && <ThemeLight />}
        </React.Suspense>
        {/* Render children immediately! */}
        {children}
    </>
)};

export default ThemeSelector;

Then I wrapped the ThemeSelector component around <App />

To switch the themes I used a function that looks like this:

export function setTheme(theme) {
    localStorage.setItem("theme", theme);
    window.location.reload();
}

Which can be called without any context/state.

Is there a way for doing this without having to reload the page?

[acidjunk]

I also have a way that works. But it's kinda ugly -> I rely on loading the minified CSS from the package dist:
https://github.com/workfloworchestrator/orchestrator-core-gui/blob/06f1fd718999fe2a5041fdde807e6cf983e3ae30/src/index.tsx#L131

With other ways I would have a brief flash without CSS.

[tkajtoch]

The modern and officially supported solution is to update the colorMode prop of <EuiProvider>. You can toggle it between light and dark with a simple useState.

A clean way to solve this would be to create an app or theme provider and include the logic there, like this:

import { createContext, useState, type PropsWithChildren } from 'react';
import { type EuiThemeColorMode } from '@elastic/eui';

type MyAppContextType = {
  setColorMode(colorMode: EuiThemeColorMode): void;
};

// Use this context to control the active color mode from within your application
export const MyAppContext = createContext<MyAppContextType>(null);

export const MyAppProvider = ({ children }: PropsWithChildren) => {
  const [colorMode, _setColorMode] = useState<EuiThemeColorMode>('light');

  const setColorMode = useCallback<MyAppContextType['setColorMode']>((colorMode) => _setColorMode(colorMode), []);

  return (
    <MyAppContext.Provider value={{ setColorMode }}>
      <EuiProvider colorMode={colorMode}>
        {children}
      </EuiProvider>
    </MyAppContext.Provider>
  );
}

If you depend on CSS styling, you may also need to load them based on the color mode set. We recommend writing your styles using Emotion, this way you keep them fully compatible with EUI and can use the extra styling utilities we export.

[tkajtoch]

I'm closing this dicussion for now. Feel free to open a new issue or discussion if you have any further questions!