Dark / Light Themes Code

Help and Feedback Code Review
,
1

Hi! I created a script that allows the ability to enable/disable themes. Is there any way of improving my mess? Are module scripts best for compacting it? Here’s my current script to show you:

The current code is for a game teleporting feature which I created and I keep updating it

local Front = script.Parent.Parent.Parent:WaitForChild("Front")
local Background = script.Parent.Parent.Parent.Parent:WaitForChild("Background")
local Bar = Background:WaitForChild("Bar")
local GameSelections = script.Parent.Parent:WaitForChild("GameSelections")
local FrontLayer = Front:WaitForChild("Front")
local Shadows = {}

local ShadowSettings = {ShadowsEnabled = false}


local function AddShadows()
    for _,shadow in ipairs(Front:GetChildren()) do
	    if shadow:IsA("Frame") and shadow.Name == "Shadow" then
		    table.insert(Shadows, shadow)
	    end
    end
end



	local theme = workspace.Theme.Value
	if theme == "DarkMode" then
		Bar.BackgroundColor3 = Color3.fromRGB(11,11,11)
		Background.BackgroundColor3 = Color3.fromRGB(31,31,31)
	Front.BackgroundColor3 = Color3.fromRGB(46,46,46)
	FrontLayer.BackgroundColor3 = Color3.fromRGB(46,46,46)
		if theme == "LightMode" then
				Front.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
			Bar.BackgroundColor3 = Color3.fromRGB(15, 139, 255)
			Background.BackgroundColor3 = Color3.fromRGB(226, 226, 226)
			FrontLayer.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
			end
		for _,text in ipairs(Front:GetChildren()) do
			if text:IsA("TextLabel") and text.Name ~= "Ratings" then
				text.TextColor3 = Color3.fromRGB(255,255,255)
				if theme == "LightMode" then
					text.TextColor3 = Color3.fromRGB(0,0,0)
					end
			end
			for _,button in ipairs(GameSelections:GetChildren()) do
				if button:IsA("TextButton") then
					button.BackgroundColor3 = Color3.fromRGB(46,46,46)
					button.TextColor3 = Color3.fromRGB(255,255,255)
					if theme == "LightMode" then
						button.BackgroundColor3 = Color3.fromRGB(255,255,255)
						button.TextColor3 = Color3.fromRGB(0,0,0)
						end
				end
				end
			end
		end


AddShadows()

for _,shadow in ipairs(Shadows) do
	if shadow:IsA("Frame") and shadow.Name == "Shadow" then
		shadow.Visible = ShadowSettings.ShadowsEnabled
	end
end

I don’t like how the current script is, because if I ever created a whole new UI page with features. Then it won’t match up with the rest of the UI without making more scripts.

UI Design

My current design for this, very much like the Roblox website but I’m keeping at it to keep things cool

Edit: I’m revamping the UI so it doesn’t copy the same UI as the website and makes it boring.

gyazo.com/5225f251b70b5baaf9e1a48a5e25828d

Light theme in action:

gyazo.com/0a8951066b4376ad78faa91667223ca6

1 Like
2

You may want to work on your tabs.

local theme = workspace.Theme.Value
	if theme == "DarkMode" then
		Bar.BackgroundColor3 = Color3.fromRGB(11,11,11)
		Background.BackgroundColor3 = Color3.fromRGB(31,31,31)
	Front.BackgroundColor3 = Color3.fromRGB(46,46,46)
	FrontLayer.BackgroundColor3 = Color3.fromRGB(46,46,46)
		if theme == "LightMode" then
				Front.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
			Bar.BackgroundColor3 = Color3.fromRGB(15, 139, 255)
			Background.BackgroundColor3 = Color3.fromRGB(226, 226, 226)
			FrontLayer.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
			end
		for _,text in ipairs(Front:GetChildren()) do
			if text:IsA("TextLabel") and text.Name ~= "Ratings" then
				text.TextColor3 = Color3.fromRGB(255,255,255)
				if theme == "LightMode" then
					text.TextColor3 = Color3.fromRGB(0,0,0)
					end
			end
			for _,button in ipairs(GameSelections:GetChildren()) do
				if button:IsA("TextButton") then
					button.BackgroundColor3 = Color3.fromRGB(46,46,46)
					button.TextColor3 = Color3.fromRGB(255,255,255)
					if theme == "LightMode" then
						button.BackgroundColor3 = Color3.fromRGB(255,255,255)
						button.TextColor3 = Color3.fromRGB(0,0,0)
						end
				end
				end
			end
		end

Move this whole section back and redo the tabs to keep it cleaner.

I don’t exactly know what you mean by this, but if you’re concerned about adaptability as in you would have to write more code as you make more UI, I have a suggestion. Instead of manually trying to recolor the UI’s, you can use a module script to set 2 colors for each UI element (elements as in buttons, text fields, etc.) 1 color being the dark theme color and 1 being the light theme color. Then just loop through your UI to find for example buttons and go to your module script to see the associated color that you need to use.

Another way is to include a string value or something inside each UI element with the light color and dark color and have the script look for then.

1 Like
3

Bro, that’s sick. Must have took you a while.

4

It only took 2 hours tbh lol. And it only took me inspirations.

I have only just got back to the project to invent more games with it to teleport to

5

Wow, cool. I wish I could do that, but I’m not really good with programming. xd

6

I’ve been only programming since May this year. I never knew about lua before and starting, i have more advanced scripts but this is just a basic one to me.

And UI was a trouble at first but I got into it and it all fits on screens(currently on Desktop and Tablet only, soon working on Phone compatibility)

7

Hm, I was trying to make an outscore command for my ro-clan. But I never figured out how. The commands was supposed to be, “:os [NUMBER]”, but the script kept breaking.

8

My current code in a module script, is this better?

local ColorModule = {}

local Themes = {DarkMode = true}
local TextColors = {DarkText = 255,255,255}


function ColorModule:SetParent_ChildColours(parent)
	for _,child in ipairs(parent:GetChildren()) do
		if child:IsA("TextLabel") and child.Name ~= "Ratings" then
			if Themes.DarkMode then
			child.TextColor3 = Color3.fromRGB(TextColors.DarkText)
			elseif not Themes.DarkMode then
				child.TextColor3 = Color3.fromRGB(0,0,0)
		end
			if child:IsA("Frame") then
				if Themes.DarkMode then
					child.BackgroundColor3 = Color3.fromRGB(46,46,46)
				elseif not Themes.DarkMode then
					child.BackgroundColor3 = Color3.fromRGB(255,255,255)
				end
				if child:IsA("TextButton") then
					if Themes.DarkMode then
						child.BackgroundColor3 = Color3.fromRGB(255,255,255)
						child.TextColor3 = Color3.fromRGB(TextColors.DarkText)
					end
				end
			end
		end
	end
end


return ColorModule
3 Likes