Remove background: var(--tui-base-01); from body?

[sommmen]

Hiya,

I'm using a single component from the taiga-ui.
The taiga root component seems to set background: var(--tui-base-01); on my body.
I want it to not do that; it now overwrites other settings (and breaks my dark mode).

Is there a way to turn this off?
I'm not the best with css so it could be something basic.

[sommmen]

It seems this fixes it:

/* Remove taig-ui properties */
body[data-tui-theme] {
  font: unset !important;
  color: unset !important;
  background: unset !important;
  margin: unset !important
}

[waterplea]

You can remove the data-tui-theme attribute from body (in 4.0 it will be on html instead) — all those global effects target this attribute specifically so it can be turned off. You can do it in ngOnInit of your main component, for example.

[sommmen]

Cool that did not seem to break my component as well. thanks!

app.component.ts

constructor(@Inject(DOCUMENT) private document: Document) { }
ngOnInit() {
    // Remove global tagia-ui styling
    this.document.body.removeAttribute(
        'data-tui-theme',
    );
}

I tried to use .defaultView?.document.documentElement like the lib seems to do but that did not work.

[waterplea]

I tried to use .defaultView?.document.documentElement like the lib seems to do but that did not work.

That would work once 4.0 is out. In 3.0 that attribute is on body, not in documentElement.