Dark theme in-game

Help and Feedback Scripting Support
#1

Hey!
I’ve seen a lot of websites, games, and other types of applications with a dark theme feature on.
However, I don’t seem to understand what would be the easiest way to do so.
Normally, you would just change every GUI Instance’s colour or text colour to a black / grey.

But what to do, when there’s like 50 or more GUI instances? I assume that you wouldn’t just do:

ui1.BackgroundColor3 = Color3.fromRGB(15,15,15);
ui2.BackgroundColor3 = Color3.fromRGB(8,8,8);
ui3.BackgroundColor3 = Color3.fromRGB(0,0,0);
ui4.BackgroundColor3 = Color3.fromRGB(15,15,15);
...

Because you would have to edit the code everytime you create or delete an instance.
AND, if you would have any kind of images, you would have to create new ones specifically for dark theme (or just change the whole image).

I don’t understand how do web developers manage to do dark theme within just 3 hours!

So, is there any way of making dark theme for my game in a somewhat efficient way? Maybe you could just invert colours in all of the GUI elements…?

OK, but how about a themes with some additional background image?
You would still have to get the background elements, convert them into an imagelabel if it’s not frame, and then add an image to it and vice-versa…

Does Studio supports any kinds of “themes” in games, like it does with translations?

I have not found anything about it anywhere - on devforum, on devhub, etc…
I just found one video on Youtube, where someone codes a dark theme for a website using HTML, CSS and JS, and that’s literally all.

Maybe that’s a stupid question, and the answer is way more easier than I thought…

Thanks!

#2

Hello, you can put a letter at the start of the name of each instance like ‘DG’ for dark grey and ‘LG’ for light grey. Then you can make a loop which goes through each instance’s name and changes the color accordingly. Another way to do it based on the intensity of each color. For example; (255,255,255) would be (8,8,8), and (200,200,200) would be (15,15,15). This can be done with a loop as well but the color combo may not turn out perfect.

#3

You’d probably have to loop through all UI instances via GetDescendants, then change the BackgroundColor, TextColor, etc. to a certain theme by checking if a UI instance is a certain instance (e.g. TextBox, TextLabel, etc.) and changing the colors of the Instance.

-- pseudocode on how you could do this if it's via a click of a button
button.MouseButton1Click:Connect(function())
       for _, UIInstance in ipairs(StarterGui:GetDescendants()) do 
              if UIInstance:IsA("TextBox" then -- check if the UI Instance is a specific Instance
                     -- change the colors of the UI instance
              end
              -- continue this until you account for all UI instances parented to a ScreenGui
              if UIInstance:IsA("TextButton") then

              end
       end
end)