fix: solve $enable-hosts adds dark styles when dark mode is removed

[whiplashwebb]

I needed to switch to the bulma version without dark mode using the separate method of theme config. I was able to use that style of config without issue and most of Bulma's dark mode disappeared, but some remained. It turned out that utils/_root.scss calls bulma/sass to support $enable-host, which is harmless when you use the combined method because you've already pulled in that code. However, when used in a separated build that file hasn't been pulled in as you're always doing something custom with Bulma (like removing dark mode), so the @use has the effect of pulling in Bulma code so :root can be extended. This brings in the version from bulma/sass which includes dark mode css variables.

To solve the problem I removed the @use, making the relationship implicit. Sass will still extend :root, but it will extend whatever :root has already been imported, either bulma/sass for the combined build or from a custom bulma build in the separated method. If you don't include bulma for some weird reason it will fail gracefully and extend nothing.

I also changed the separated example to make this easier to reproduce locally.

[mlmoravek]

@whiplashwebb By removing the @use "bulma/sass"; from the root many variables seem missing now (see the docs now).

Now:

Before:

Any idea how we can fix this?

I think by the following code because of @use only whats in :root inside this file will be included in :host . That was the reason for @use "bulma/sass";.

  :host {
        @extend :root;
    }