Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Styling issues on page load (light / dark mode) #3880

Open
Ijee opened this issue Aug 13, 2024 · 0 comments
Open

Styling issues on page load (light / dark mode) #3880

Ijee opened this issue Aug 13, 2024 · 0 comments

Comments

@Ijee
Copy link

Ijee commented Aug 13, 2024 •
edited
Loading

This is about Bulma.

Overview of the problem

I'm using Bulma version 1.0.2
My browser is: Chrome / Firefox

Description

When I load my website I get some initial stylings I can not get rid of.

chrome_Amazeing_-_Google_Chrome_2024-08-13-08_12.35.mp4

While I respect the initial user dark mode preferences I set the theme with js on the body like this when the user set it to something else in a previous session.

<body class="theme-dark"> 
...

The live version of it can be found here: https://develop--amazething.netlify.app/

Maybe I misunderstood how to overwrite the css variables because it sometimes did not change it how I expected it to be so quite a few css rules of mine look like this instead:

body.theme-light {
    background-size: cover;
    background-image: linear-gradient(to top, #95918b 0%, #304352 100%);
}

body.theme-dark {
    background-size: cover;
    background-image: linear-gradient(to top, #1f2229 0%, #304352 100%);
    color: var(--white-dark-87);
}

Steps to Reproduce

I noticed that it also happens on the official bulma.io website on Chrome and Firefox. This happens when the user's chosen theme doesn't match their system settings (e.g., the user sets light mode but has dark mode enabled in the OS) and also if your custom style differs from the standard values for that specific theme.

chrome_Bulma_Free._open_source._and_modern_CSS_framework__2024-08-13-08_13.31.mp4

Expected behavior

The website should not flash from one theme to the other when the user setting does not match the system settings.

I am not sure if this is a bulma specific problem but at least it also happens on the official website and maybe someone else here knows how to deal with it.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Ijee