How to Revert Property changes when Else-If Statement is TRUE?

My Goal

I’ve been working on a Dark-Mode system. Implemented that as a checkbox in my in-game settings screen.

test-Roblox-Studio-2022-04-05-21-25-41

The problem is that when the user clicks on the Dark-Mode Enabled Check-Box again (After they clicked on the check-box to enable it) It should revert all the code to their original settings.

local dark = game.Players.LocalPlayer.PlayerGui.ScreenGui["Setting Screen"]["Settings Option"]["Dark-Mode Label"]["Check-Box"]

dark.MouseButton1Click:Connect(function()
	clicksfx:Play()
	if dark.BackgroundColor3 == Color3.fromRGB(255, 255, 255) then
		dark.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
		--Home Screen
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Home Menu"]["Images Area"].BackgroundColor3 = Color3.fromRGB(39, 50, 59)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Home Menu"].Categories.BackgroundColor3 = Color3.fromRGB(27, 35, 42)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Home Menu"]["Images Area"].TextColor3 = Color3.fromRGB(255, 255, 255)
		--Completed Screen
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Completed Screen"].BackgroundColor3 = Color3.fromRGB(39, 50, 59)
		--Settings Screen
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Setting Screen"]["Settings Heading"].TextColor3 = Color3.fromRGB(255, 255, 255)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Setting Screen"].BackgroundColor3 = Color3.fromRGB(27, 42, 53)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Setting Screen"]["Settings Option"]["Dark-Mode Label"].TextColor3 = Color3.fromRGB(255, 255, 255)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Setting Screen"]["Settings Option"]["Music Label"].TextColor3 = Color3.fromRGB(255, 255, 255)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Setting Screen"]["Settings Option"]["SFX Label"].TextColor3 = Color3.fromRGB(255, 255, 255)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Setting Screen"].Input.BackgroundColor3 = Color3.fromRGB(57, 61, 83)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Setting Screen"].Input.PlaceholderColor3 = Color3.fromRGB(90, 96, 117)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Setting Screen"].Input.TextColor3 = Color3.fromRGB(168, 179, 195)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Setting Screen"]["Go Back"].TextColor3 = Color3.fromRGB(255, 255, 255)
		--Question 1
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Question 1"].BackgroundColor3 = Color3.fromRGB(39, 50, 59)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Question 1"].Input.BackgroundColor3 = Color3.fromRGB(57, 61, 83)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Question 1"].Input.PlaceholderColor3 = Color3.fromRGB(90, 96, 117)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Question 1"].Input.TextColor3 = Color3.fromRGB(168, 179, 195)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Question 1"].Question.TextColor3 = Color3.fromRGB(255, 255, 255)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Question 1"].Heading.TextColor3 = Color3.fromRGB(255, 255, 255)
		--Question 2
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Question 2"].BackgroundColor3 = Color3.fromRGB(39, 50, 59)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Question 2"].Heading.TextColor3 = Color3.fromRGB(255, 255, 255)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Question 2"].Question.TextColor3 = Color3.fromRGB(255, 255, 255)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Question 2"].Wrong.BackgroundColor3 = Color3.fromRGB(39, 50, 59)
		game.Players.LocalPlayer.PlayerGui.ScreenGui["Question 2"].Correct.BackgroundColor3 = Color3.fromRGB(39, 50, 59)
	else
		dark.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
		
	end
end)

*Here’s is all my code :point_up_2:

How do I revert all the properties to how they were originally were rather than writing another large piece of code to revert those changes? :thinking:

I mean, you could get the code to get all of the colour instantly when the player spawns, using a for loop to get all of the detail, store it in a table and then reversing it, everytime you click the button, it saves the previous configuration in a table.

Something like that anyway, I’m still half-asleep lol

You can create two Color3 attributes for your frames. One color for dark mode and one color for light mode.

You then loop through the entire design and set the colors to the corresponding value. You can differentiate background color with text color by naming conventions: BackgroundDark, BackgroundLight, TextDark, TextLight, etc.

Thanks for the Tip! It worked effortlessly! :grinning: