elastic / elastic/eui

[Epic] Benchmark performance gains of CSS variables for theming/color mode

Open
#8,902 9 comments 1 reaction 1 assignee Claimed by @acstll View on GitHub
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 15h
Merged PRs (30d)
69

Description

## ✨ Summary

Assess whether leveraging CSS variables for theming could represent significant performance gains, namely in Kibana.

## ❗ Problem or Opportunity

Handling of theming, color mode, etc in EUI is handled with JavaScript logic. A change means computing a new theme and updating the styles of each and every component on the page. We can let the browser do this, and remove a decent amount of code/logic.

## 🎯 Value

Performance and DX (less code).

## 🎯 Urgency

This is in line with the current efforts to improve perceived performance related to how we write and use Emotion. ~~It'll be enabling the actual implementation if there are actual performance gains.~~ We want to time-box this initial benchmarking effort (e.g. 1-2 weeks), and if successful, plan and scope the actual implementation of using CSS variables for theming.

## 🧠 Feasibility & Direction

We want to:
- make a PoC that handles theming with CSS variables
- benchmark performance in Kibana

## ❓ Open Questions to answer

~

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.