Hello. I am i_Rook, a UI designer, and an aspiring creator. Welcome to the first UI tutorial! This tutorial will be covering the use of dark theming (dark mode) in UIs.
Dark mode can really be useful nowadays. Dark theming can be great to give your players some more options to make the game experience a lot better. A lot of people nowadays (including me) like choosing dark theming because it can look better to the eye and it’s less bright. You may even be looking at this post using dark mode!
Here are some tips when starting to make a optional dark theme.
1.) Make sure that the GUIs color is NOT completely black. The color black is over saturated, and can look pretty bad in most cases.
2.) Don’t use bright colors with dark uis. Bright colors like yellow and pink could look too bright when used wrong. Stick with cooler colors, like blue, purple, and green, when using color with dark theming.
3.) Use white for text. Other colors can be an eye sore. Using white can contrast with the dark colors to look perfect.
To make your life 100x easier. I made a color palette that you can use any time you want. I also added RGB codes so you can quickly add it to Roblox Studio.
Thank you for reading my first tutorial (and post) on DevForum. I will be posting more about my journey and some tutorials on GUIs in the future. Reply with feedback so I can give you better information!
instead of using different colors for ui that is higher up/raised use another frame on top and have it completely white and just change the transparency to get a grey color
It’s a nice tutorial; however, this point here isn’t really a strong point. You can use brighter colors similar to yellow and pink in dark or material interface design while still maintaining good UX. There are many examples of using brighter colors to match with darker colors; also dark mode doesn’t always mean grey, there are other forms of dark mode. Just because a color is bright, doesn’t mean it’s neon.
It’s not really about how bright the colors are, its more about how the design looks and how the colors are used and the hues are utlized. Obviously neon doesn’t always work on every interface; however, you shouldn’t be afraid to use bright colors when designing interfaces, even dark ones.
Thanks for the feedback and for those awesome pictures! When I was writing that point, I was thinking of over saturated “neon” colors. Of course if you use it in the right way (like in the pictures you sent me) it could look amazing.
