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.

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

Persist low contrast setting across routes #171

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

ibbyu
Copy link

@ibbyu ibbyu commented Oct 16, 2023

Fixes #169


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

@Southpaw1496
Copy link
Contributor

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

@ibbyu
Copy link
Author

ibbyu commented Oct 16, 2023

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
Copy link
Contributor

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

@ix0rai ix0rai added the enhancement New feature or request label Oct 17, 2023
@ibbyu
Copy link
Author

ibbyu commented Oct 18, 2023

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
Copy link
Contributor

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
Copy link
Author

ibbyu commented Oct 18, 2023

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:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Persist low constrast setting across routes
3 participants