Hello dear community,

I was wondering if this post should be a "Discussion" rather than a "Question", but bare with me for a bit.

I've tried to create a dark mode toggle button in Service Studio, but first i've followed an specific tutorial that i've found in Red Stapler, using Visual Studio Code.

From the tutorial, they used a "Checkbox input" and then convert it to the "switch" style. 

I've tried to use the same logic, but it seems to be failing at some point. Also, in my point of view, seems logical to start with a "switch" button instead of the checkbox from the tutorial.

This is my result from doing the tutorial in VSC.

 I've attached to this post a zip file containing the files that i've use, the html, the css and the corresponding svg files for the sun and moon.

I believe that i need to adapt the css classes from the tutorial to the css in Outsystems; i've tried to use the code of the css file, as it is into the Style Sheet Editor but doesn't seem to be that simple. 

What would be the best method?

Also, after attending the One Conference in Lisbon, saw a talk regarding the outsystems plugin to Figma, and that made me wonder if it would be wiser to learn more about Figma and that specific plugin of Outsystems than following html and css tutorial, as a way to enhace a bit more the visual aspect of our applications.

For the record, i'm new to Outsystems, so i'm still doing my first steps into this vast universe! 

Thanks in advance,

Leandro