2 MIN READ
Blog Post
MollyFisher-dd0
Community Member
I really enjoyed the design of your project, in both the light and dark mode. I didn't realize that was an accessibility function. How did you increase and decrease the size of the text when clicking the buttons?
CarmenBernadou_
4 years agoCommunity Member
Thanks, Molly : )
This article reflects a little about the accessibility component of the different color modes: https://uxdesign.cc/accessibility-and-dark-ui-themes-f01001339b65
The 'change of size' function is not super elegant tbh, the text is just an object with 3 different states and I simply change the state when the user clicks the + or - buttons. This could be also achieved using numerical variables.
The hardest part was to also change the color at the same time, to avoid managing heaps of text elements simultaneously, I had to use a little JS. The file is available if you want to have a look.
This article reflects a little about the accessibility component of the different color modes: https://uxdesign.cc/accessibility-and-dark-ui-themes-f01001339b65
The 'change of size' function is not super elegant tbh, the text is just an object with 3 different states and I simply change the state when the user clicks the + or - buttons. This could be also achieved using numerical variables.
The hardest part was to also change the color at the same time, to avoid managing heaps of text elements simultaneously, I had to use a little JS. The file is available if you want to have a look.