Dark mode transition#288
Conversation
|
Looks awesome! Well done. |
| <label class="dark-mode-label cursor-pointer"> | ||
| <input | ||
| data-test="dark-mode-button-toggle-switch" | ||
| id="prova" |
| ></button> | ||
| </div> | ||
| <hr /> | ||
| <br /> |
There was a problem hiding this comment.
Was this removed for a reason?
There was a problem hiding this comment.
Yes, because the transition in that area ( above ''Cilesimet'' ) was taking a bit more time, all the time.
| @@ -1,3 +1,6 @@ | |||
| *{ | |||
There was a problem hiding this comment.
I see this is added in some files, what if a new component is added, then the dark mode switch for that will not have a transition? Can we add this to a global styles file? Does it make sense to have it there? What do you think?
There was a problem hiding this comment.
Great point.
Maybe if a component or several ones might not need it, we can change the property of transition to none using a class for example.
It makes sense to be on global styles file.
| const styleTag = document.createElement('style'); | ||
| styleTag.append(this.DARK_MODE) | ||
| document.body.append(styleTag); |
There was a problem hiding this comment.
What does this do?
| *{ | ||
| transition: background-color 0.5s ease; | ||
| } |
There was a problem hiding this comment.
Can you please check if there's a better way of doing the smooth dark mode transition? I'll also research this a bit.
2 participants
It is looking like this now.
Open to any suggestions!
Screencast from 30.9.23 10:34:53.MD CEST.webm