Customizing theme - override eui default colors with brand colors

[bujowskis]

Hi,

I'm new in eui (and web dev in general) and trying to bring up a website using eui. I want to customize the theme by providing my own color values. I've fiddled with the sass approach, found one that slaps CSS on top of default eui, nothing seems to change it. I've searched for repos that have done that, but no juice.

Can someone please provide me with an exemplary project that successfully overrides the theme? Would be nice to add it to the docs as well, for beginner-friendliness.

PS. Should be a discussion, but I believe read-only users are not allowed to start discussions?

[elizabetdev]

Hi @bujowskis,

To create a custom theme, look at https://elastic.github.io/eui/#/guidelines/getting-started#styling-your-application, especially at the customizing the style tokens section.

Let me know if that was helpful.

[bujowskis]

Hi @miukimiu, thanks for your reply!

I've tried to follow the guidelines and docs, including the ones you linked. Precisely, I've overridden the styles using sass:

index.scss

// https://elastic.github.io/eui/#/guidelines/getting-started#styling-your-application

// BrandColors
$euiColorPrimary: #FF0000; // #5C24BC;
$euiColorAccent: #0000FF; // #84BC24;
$euiColorSuccess: #00ff00; // todo - success color
$euiColorWarning: #FFFF00; // todo - warning color
$euiColorDanger: #BC2438;

@import '~@elastic/eui/src/themes/amsterdam/theme_light';
// I don't have any additional styles, just want to alter eui theming

App.jsx

import React, { useState, createContext, useEffect } from 'react' // createContext for Language context
import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
// Handle theme
import {  EuiProvider } from '@elastic/eui'
import './index.scss'

//everything is contained in App
export default function App () {
  // (logic stuff...)

   return (
    <EuiProvider colorMode={localStorage.getItem('theme') === 'dark' ? 'dark' : 'light'}>
      <LanguageContext.Provider value={languageHandler}>
        <BrowserRouter>
          <Header activePage={activePage} setTheme={setTheme} />
          <Routes>
            <Route path={'/home'} element={<HomePage setActivePage={setActivePage} />}/>
            <Route path={'/contact'} element={<ContactPage setActivePage={setActivePage} />}/>
            <Route path={'*'} element={<Navigate to={'/home'} />}/>
          </Routes>
        </BrowserRouter>
      </LanguageContext.Provider>
    </EuiProvider>
  )
}

After which I either use the colors by eui components props color:

<EuiSplitPanel.Inner color={'primary'}>

or by consuming it with React hook:

<p style={{
  fontSize: 54,
  fontWeight: 'bolder',
  color: euiTheme.colors.primary,
  textShadow: '0 0 0.2em black'
}}
>Hero text</p>

Using this approach, some of the components have indeed changed to the new styling.

But some of them have not...

At first, I suspected maybe I'm making some mistake when consuming by react hook, but it's not only these components that behave this way. Eui components do as well.

Prime example of that are the combinations of components styled properly, and some of them styled using default eui theming:

NOTE - I've set very flashy colors for more visibility

Hero text consumes the color with the hook, the button has property fill and is colored properly (buttons seem to be properly colored throughout the whole website). The background color and text are default eui theme tho.

// Hero text style code
style={{
  fontSize: isSmall ? 54 : isBig ? 128 : 100,
  fontWeight: 'bolder',
  color: euiTheme.colors.primary,
  textShadow: '0 0 0.2em black',
  fontFamily: 'Montserrat'
}}

// Hero background linear gradient component
${transparentize(euiTheme.colors.primary, 0.5)}

In the below, both Stat and Card are placed in the homepage and consume color passed as string prop. Stat uses default eui, card the changed one.

Stat

<EuiStat title={title} description={description} titleColor={'success'} reverse textAlign={'left'} />

Card

<EuiCard
  icon={<EuiIcon type={iconType} size={'xxl'} />}
  title={title} description={description} textAlign={'left'}
  betaBadgeProps={{ label: 'Premium', color: 'accent', tooltipContent: 'This is premium content' }}

In the forms, the buttons are colored right and the indication of the form field the user currently is inside of works properly and colors flashy red, but the error label, helpText and icons are defaulting to eui theme:

Now that I'm reading the docs again, I've noticed:

This will require style, css, postcss, and sass loaders.

and

This will require style, css, postcss, and sass loaders and a full re-compile of all EUI component styles.

I'm quite sure about sass, because I had to download it for the whole thing to work the way it works now, but I'm not sure about the rest. Is it possible my problem may be because of those loaders missing? How can I make sure they're there?

Please let me know

[cee-chen]

@bujowskis Correct me if I'm wrong, but it looks like you're only overriding Sass color variables and not our CSS-in-JS theme/color variables as well (see https://elastic.github.io/eui/#/guidelines/getting-started#styling-your-application?themeLanguage=js for documentation).

Since we're in the middle of converting all our Sass to Emotion (#5685), you'll need to do both until we've fully removed Sass, in which case you'll only need to override colors in JS:

import { EuiProvider } from '@elastic/eui';
import './index.scss'

export default function App () {
   return (
    <EuiProvider
      colorMode={localStorage.getItem('theme') === 'dark' ? 'dark' : 'light'}
      modify={{
        colors: {
          LIGHT: {
            primary: '#FF0000', // #5C24BC;
            accent: '#0000FF', // #84BC24;
            success: '#00ff00', // todo - success color
            warning: '#FFFF00', // todo - warning color
            danger: '#BC2438',
          },
          DARK: {
            // dark mode color vars
            // NOTE: You also need to update primaryText, dangerText, etc.
            // see https://github.com/elastic/eui/blob/main/src/global_styling/variables/colors.ts for all variables
          },
        },
      }}
    >
      <App />
    </EuiProvider>
  )
}

[bujowskis]

@constancecchen Yes, that seems to have done the trick. I'm sorry, I've read about the need to override CSS-in-JS, but I didn't know that's the way to do that.

Is an example of doing override CSS-in-JS the same you did here with modify prop of EuiProvider anywhere in the documentation? If not, it'd be really nice to add it there.

Asking because as for Sass, the documentation features this snippet:

// index.scss
@import '@elastic/eui/src/themes/amsterdam/colors_dark';
@import '@elastic/eui/src/themes/amsterdam/globals';

@import 'your/custom/styles';

But CSS-in-JS only this:

import React from 'react';
import { EuiIcon, EuiCode, EuiText, useEuiTheme } from '@elastic/eui';
import { css } from '@emotion/react';

export default () => {
  const { euiTheme } = useEuiTheme();
  return (
    <EuiText>
      <p>
        <EuiIcon
          type="stopFilled"
          size="xxl"
          css={{ color: euiTheme.colors.primary }}
        />{' '}
        This primary color will adjust based on the light or dark theme value
      </p>

      <p
        css={css`
          background: ${euiTheme.colors.lightShade};
          padding: calc(${euiTheme.size.base} * 2);
        `}
      >
        The padding of this box is created using <EuiCode>calc()</EuiCode>{' '}
        because EUI&apos;s theme sizes are string pixel values that are
        calculated off the theme&apos;s <EuiCode>base</EuiCode>
      </p>
    </EuiText>
  );
};

which seems to only show the way to consume the theme, not override it CSS-in-JS style

[cee-chen]

The documentation is in this link (that enforces/toggles showing CSS-in-JS documentation): https://elastic.github.io/eui/#/guidelines/getting-started#styling-your-application?themeLanguage=js

Unfortunately you do need to click/toggle between the pink CSS-in-JS / Sass tab to see both code examples. This is a friction point that will go away once we're completely done with our Sass->Emotion conversion.

[bujowskis]

yeah, didn't notice the toggle switches between Sass and CSS-in-JS for all the snippets below

anyways, thanks for the help :)