EUI custom theme

[matiasmoreno876]

Hey guys, how are you? I hope that very good!

I am currently trying to put together a POC, the idea is to be able to create a new theme in elastic eui and implement it in a project, the question is how can I compile and use the project with my changes? I was looking for guides to do it and I can't find anything, currently I was able to implement a new theme but I can't use my changes in the project.

Will anyone have a solution available?

Thank you

[chandlerprall]

Right now, the only way to create a custom theme is to redefine our SCSS variables & build a new css file. See https://elastic.github.io/eui/#/guidelines/getting-started#styling-your-application for a quick example of what that token re-definition would look like.

[matiasmoreno876]

Hi @chandlerprall , there I think I could use the theme by building it with the script build and importing the compiled into the desired project.

The next question is, is it possible to build new components from the fork (or modify the behavior of an existing one) and see those changes reflected in my project?

From what I was analyzing when I ran the npm run build script, it only builds the custom themes.

[chandlerprall]

npm run build in a checkout of eui will build everything, for us that means the lib and es directories. However, these changes would need to be added/injected somehow into your project.

[elizabetdev]

@acidjunk in #4081 (comment) said he was going to document in a blog post the process of building a custom theme with EUI. Not sure he documented. But it would be really helpful if he could share. 🙂

[acidjunk]

We are building a somewhat customized theme. But a lot has changed in EUI, with the switch to emotion.
No blog post yet: but our project is under GPL:
https://github.com/workfloworchestrator/orchestrator-ui

Hope it helps