change itwin dark theme from grey to green

[Rahul-0108]

We want to change the dark theme from grey to green, how this can be achieved ??
our requirement is to use green theme for dark theme , because our other apps are in green theme, so we should have similar theme in all our apps
Any sample code or anything will be helpful

[Rahul-0108]

@mayank99 , any idea ??

[mayank99]

Do you have screenshots of what exact parts you would like to change? Also what version of iTwinUI are you using?

Once you determine those things, the best path forward will be to override our color CSS variables.

[Rahul-0108]

I saw in the node modules file

so overriding these variable in our app code will make it work right ??
We want to migrate all the components from grey to green in itwinui

our versions

[Rahul-0108]

[mayank99]

Those are Sass variables; updating them will have no effect because they are already consumed/compiled away.

What you want is to update these CSS variables: https://unpkg.com/browse/@itwin/[email protected]/css/global.css

if you only want to change dark theme, then you can do it like this:

html.iui-theme-dark {
  --iui-color-background-1: green;
  --iui-color-background-2: hotpink;
  // ...
}

---

side note: I really hope you have a good reason to make these updates, and you have consulted with the UX team. Making everything green is generally a bad idea.