Dark and light mode transitions on certain elements look strange #491
Unanswered
FireIsGood
asked this question in
Help
Replies: 1 comment
-
|
Adding a transition to the I think it looked weird because the |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
When transitioning between light and dark mode, elements such as
inputandahave a transition set to the global--pico-transitionvariable. These end up having a really distracting look when swapping between color schemes.Additionally, the home page example doesn't have this issue as it is overwritten by a
transition: border-radius var(--pico-transition)which feels strange since it should act how a default setup for Pico would work.I think that the transition for background color should be left off inputs since it doesn't match how the rest of the page shifts in color. If the maintainers agree on these points, I can find the instances of this in the codebase and make a pull request later.
Current
The input elements (and also
aelements) have a transition on the background color except on the home page.On the home page:
Peek.2024-03-12.15-04.mp4
On any other website:
Peek.2024-03-12.15-12.mp4
Proposed
The input elements (and also
aelements) would have no transition on the background colorPeek.2024-03-12.15-09.mp4
Additional Notes
There is also a FOUC when a color mode different to the user's
prefers-color-schemeis selected where the screen flashes the wrong color scheme. This appears on the home page, docs, and all the examples which makes the slow background transition for inputs a lot more visible. This seems to be an issue, but I would have to ask here in a different post to confirm so I could try and fix it later.The example site I have with a quick CSS patch of the issue is a GitHub pages site if you want to look at the proposed transition more.
Since I was simply linking from a CDN, The patch is putting
unseton those specific elements:Beta Was this translation helpful? Give feedback.
All reactions