External CSS to Outsystems - Minimal Dark Mode Toggle Button
Application Type
Service Studio Version
11.54.25 (Build 62773)

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,



Yes, there are lots of differences in dark mode, and the OutSystems UI have taken a really huge revamp and most of the forge components you see in outsystems will need to take some fixes.

You will of course need to adapt the CSS and change for the most likely style to make it a dark theme.

Some forge components where you can take some ideas.

I started as a frontend developer, and I didn't need any design skills, and you need design skills, just if you wanna do your own projects where your work doesn't have a design or a design team.

But if you want to know more about design, you should learn first to design of course.

You just need CSS if you want to implement some complex design, and you just need to know more about design if you want to draw some complex applications...

PS: your link doesn't work. and switch is better :D

I will leave here some links for you to check







Kind Regards,


Thank you kindly Márcio!

Gonna take your suggestions in mind and see all the links ;)

(by the way, i already fixed the link) thanks for letting me know. 

best regards, 


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.