Disable automatic dark mode theming

Ijee commented 6 months ago

This is about Bulma.

Overview of the problem

I'm using Bulma version [^1.0.0] My browser is: Chrome 122.0.6261.129 / Win11

Description

As bulma had not been updated in a while before the v1 release I created my own dark mode with a class on the body and different styles depending on it. As I upgraded from 0.9.4 -> 1.0.0 I could not find a way to opt-out of the automatically applied dark-mode theming and thus breaks my own styling for the dark mode. I also use an angular service to determine whether to apply the dark mode based on the users settings from the localstorage or if that hasn't been set it uses the clients OS settings.

This is how I used to check for my own applied dark mode now with updated css variables in Angular.

body.dark :host .node {
    background-color: hsla(
        (var(--bulma-white-h)),
        (var(--bulma-white-s)),
            (var(--bulma-white-l)),
        0.3);
}

Basically: can anyone tell me how to disable this feature until I find time to change my approach in the future?

Expected behavior

Do not apply the dark mode unless I explicitly set class="theme-dark" or data-theme="dark" on the body of my project.

Actual behavior

It automatically uses the media query --prefers-color-scheme and changes the styling.

This is my own dark-mode which is not perfect but is alright for the time being:

This is my dark-theme applied on top of the bulma --prefers-color-scheme styles

This is what it currently looks like without my own dark-mode. I haven't come around to changing everything to the new css variables (previously sass variables) yet which is why some text is black on black background. Not sure why it compiled in the first place but sometimes angular doesn't pick up on things like this.

I am sorry if I missed something obvious that could solve my problem.

iBotPeaches commented 6 months ago

They have alternative themes - https://bulma.io/documentation/start/alternative-versions/ (one being no dark mode). If you bring it in via sass directly you can use the no-dark-mode import - https://github.com/jgthms/bulma/blob/main/versions/bulma-no-dark-mode.scss

Ijee commented 6 months ago

They have alternative themes - https://bulma.io/documentation/start/alternative-versions/ (one being no dark mode). If you bring it in via sass directly you can use the no-dark-mode import - https://github.com/jgthms/bulma/blob/main/versions/bulma-no-dark-mode.scss

I actually missed that entirely. Thank you!

The problem I now face though is that when I put @use 'bulma/versions/bulma-no-dark-mode'; (or @import) it breaks my css entirely like this

Before I had @import 'bulma/bulma'; in my main styles.scss file. This has probably more to do with sass than bulma but I am not sure what the problem is because I am not that familiar with sass in the first place with stuff like this.

Either way I think the theme should still only apply when the class/data-theme is set.

iBotPeaches commented 6 months ago

Before I had @import 'bulma/bulma'; in my main styles.scss file. This has probably more to do with sass than bulma but I am not sure what the problem is because I am not that familiar with sass in the first place with stuff like this.

With the movement to Dart Sass (because LibSass/RubySass are deprecated) you can't really use @import anymore with Bulma. It leverages features that really need @use/@forward available in Dart Sass. As to the reason its not working when you use @use - I'm not positive.

Either way I think the theme should still only apply when the class/data-theme is set.

With the movement to prefers-color-scheme and browser dictating the color theme - I don't agree there.

jgthms commented 6 months ago

@Ijee Can you share your .scss file?

@iBotPeaches is right: you're supposed to import with @use, not @import. See https://bulma.io/documentation/customize/with-sass/

Ijee commented 6 months ago

@Ijee Can you share your .scss file?

@iBotPeaches is right: you're supposed to import with @use, not @import. See https://bulma.io/documentation/customize/with-sass/

Sorry, I didn't check back here until now. I just read up on it and got most of the things sorted out. All that is left are just some problems related to specificity.

Thanks again for the inital help and also @jgthms for the 1.0.0 release which at this point is really nice.

I will close this issue now because I don't think there is anything wrong with how it works now.

jgthms / bulma