UiColorChange Problem

Hello Developers,
Today I am having a problem with my ui’s. I’m trying to add a feature were you can change the ui mode from dark mode to light mode. I don’t know why its not working cause the output isn’t telling me anything nor showing any errors when in studio. Please help me.

The Code:

local B1 = script.Parent.Parent.GenderOptionUi:WaitForChild('B1')
local B1T = B1:WaitForChild('Text')
local B2 = script.Parent.Parent.GenderOptionUi:WaitForChild('B2')
local B2T = B1:WaitForChild('Text')
local TweenS = game:GetService('TweenService')

local Info = TweenInfo.new(.65, Enum.EasingStyle.Quint, Enum.EasingDirection.Out)
local String = game.Workspace.UiFolder:WaitForChild('ColorMode')

-- Light
local ColorTween1 = TweenS:Create(B1, Info, {ImageColor3 = Color3.fromRGB(236, 236, 236)})
local ColorTween2 = TweenS:Create(B1T, Info, {TextColor3 = Color3.fromRGB(20, 20, 20)})
local ColorTween3 = TweenS:Create(B2, Info, {ImageColor3 = Color3.fromRGB(236, 236, 236)})
local ColorTween4 = TweenS:Create(B2T, Info, {TextColor3 = Color3.fromRGB(20, 20, 20)})

-- Dark
local ColorTween5 = TweenS:Create(B1, Info, {ImageColor3 = Color3.fromRGB(20, 20, 20)})
local ColorTween6 = TweenS:Create(B1T, Info, {TextColor3 = Color3.fromRGB(255, 255, 255)})
local ColorTween7 = TweenS:Create(B2, Info, {ImageColor3 = Color3.fromRGB(20, 20, 20)})
local ColorTween8 = TweenS:Create(B2T, Info, {TextColor3 = Color3.fromRGB(255, 255, 255)})

script.Parent.MouseButton1Down:Connect(function()
	String.Value = 'LightMode'
end)

if script.Parent.MouseButton1Down and String.Value == 'LightMode' then
	String.Value = 'DarkMode'
end

if String.Value == 'LightMode' then
	ColorTween1:Play()
	ColorTween2:Play()
	ColorTween3:Play()
	ColorTween4:Play()
elseif String.Value == 'DarkMode' then
	ColorTween5:Play()
	ColorTween6:Play()
	ColorTween7:Play()
	ColorTween8:Play()
end

My guess is that this code:

if String.Value == 'LightMode' then
	ColorTween1:Play()
	ColorTween2:Play()
	ColorTween3:Play()
	ColorTween4:Play()
elseif String.Value == 'DarkMode' then
	ColorTween5:Play()
	ColorTween6:Play()
	ColorTween7:Play()
	ColorTween8:Play()
end

is only actually firing once when your script is first evaluated. In order to get your GUI to update every time String changes, you need to run your tweens every time the String.Value.Changed event fires. For example:

String.Value.Changed:Connect(function() 
    -- check if light or dark and then play your tweens
end)

Also, this code should be changed:

script.Parent.MouseButton1Down:Connect(function()
	String.Value = 'LightMode'
end)

if script.Parent.MouseButton1Down and String.Value == 'LightMode' then
	String.Value = 'DarkMode'
end

Within the MouseButton1Down event, you probably should toggle between LightMode and DarkMode. The 2nd if statement will only evaluate once.