Persist low contrast setting across routes

QuiltMC / quiltmc.org

The source for quiltmc.org

https://quiltmc.org

Other

58 stars 46 forks source link

Persist low contrast setting across routes #171

Open ibbyu opened 10 months ago

ibbyu commented 10 months ago

Fixes #169

See preview on Cloudflare Pages: https://preview-171.quiltmc-org.pages.dev

Southpaw1496 commented 10 months ago

In the generated Cloudflare Pages preview, the issue remains the same as before.

ibbyu commented 10 months ago

In the generated Cloudflare Pages preview, the issue remains the same as before.

Which browser?

Working on Google Chrome & Microsoft Edge. Encountering a CORS error on Firefox causes the remaining script to stop executing.

Southpaw1496 commented 10 months ago

I first tried Safari. If it also doesn't work in Firefox as you say, then being nonfunctional in two of the three major browser engines isn't really acceptable for us, so that would need to be fixed.

I notice that in Chrome the script works but the animation plays when switching pages as well as when toggling low contrast. This isn't ideal: is there a way to change that?

Thanks so much for the contribution, by the way

ibbyu commented 10 months ago

I've fixed the issue on other browsers.

I looked around to see if I could fix the animation issue but couldn't find a solution

Southpaw1496 commented 10 months ago

How would it look if the animation were removed altogether?

I think having no animation at all would be better if it fixed the issue.

ibbyu commented 10 months ago

Toggling low-contrast is a css transition. It has been applied in style-dark.min.css adding a transition to all elements.

All the css for quilt is in the quilt-bulma npm package so no way of changing it here. Removing the transition for low-contrast toggle would also remove all other transitions.

You can see the effects if you:

Open dev tools
Use element selector to select <html> tag,
Scroll down in Styles and uncheck transition: filter 1s;