EuiThemeProvider Usage

[thomaswall]

Is EuiThemeProvider supported yet? Or will this be released with the full transition to Emotion? I've attempted to recreate the example from the documentation, but overrides won't take effect.

import { EuiThemeProvider } from "@elastic/eui"
    
const overrides = {
    colors: {
      LIGHT: { lightShade: '#d3e6df' },
      DARK: { lightShade: '#394c4b' },
    },
 }

    
function Test() {
  return (
    <EuiThemeProvider modify={overrides}>
        <EuiButton>Test</EuiButton>
    </EuiThemeProvider>
  )
}

I've also tried removing this import entirely:

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

But this just entirely removes styling altogether.

[cchaos]

Hey @thomaswall, None of the EUI components have been converted yet to the theme context (Emotion styling). We have simply setup the provider as a means to consume the global variables. See the note on the Global Variables page.

It will most likely take a better part of a year to get the whole of EUI converted to this new styling method. You can track the project progress in our meta ticket: #3912

It should also be noted that none of the examples on the theme provider page currently showcase using it to alter EUI components, but purely as a way to create custom styles with EUI styling tokens.