So I’m making a UI for my friends game and he wanted to implement something like a UI that supports the options of Light Mode and Dark Mode. We don’t know how to make it tween while changing the color
Please help.
2 Likes
Im not exactly sure what you are wanting. Like are you trying to make it all tween to from light to dark mode?
1 Like
What im trying to say is. When the color mode is changing from light to dark it would tween from white to black. So basicly its changing the color by tweening the color from white to black
Heres a simple example from devForum I just changed it to use color3. That will simply change the frame from white to black.
local TweenService = game:GetService("TweenService")
local goal = {}
goal.BackgroundColor3 = Color3.new(0,0,0)
local tweenInfo = TweenInfo.new(10, Enum.EasingStyle.Linear)
local frame = script.Parent["Frame Name Here"]
local tween = TweenService:Create(frame, tweenInfo, goal)
tween:Play()
1 Like
In this case im changing the color of multiple frames/buttons can I just turn it into a table?
To be totally honest with you I’ve never tried.
^ Sadly this is not possible, And you’d have to get each one at a time then turn them all that color but you can do multiable without having to wait for the first to be done.
I can just put a script into all of them
What you can do is this if you are just looking to see all the backgrounds change to dark mode.
local GUI = script.Parent -- Add where ever ScreenGui is
for i,v in pairs(GUI:GetChildren()) do
if not v:IsA("Script") and not v:IsA("LocalScript") and not v:IsA("Folder") then
local TweenService = game:GetService("TweenService")
local goal = {}
goal.BackgroundColor3 = Color3.new(0, 0, 0)
local tweenInfo = TweenInfo.new(2)
local tween = TweenService:Create(v, tweenInfo, goal)
tween:Play()
end
end
1 Like
If you want to change the entire UI, you should run the following
local ScreenGui = script.Parent -- put in the location of your screen gui
local Button = ScreenGui.ChangeColors -- put in the button that changes your colors
local TS = game:GetService("TweenService")
local ClassesCanChange = {
"TextLabel";
"TextButton";
"Frame";
"ImageLabel";
"ImageButton";
-- You can add more classes that you can tween.
}
local Colors1 = { -- Dark mode colors (change them to your liking)
["TextLabel"] = Color3.fromRGB(20, 20, 20);
["TextButton"] = Color3.fromRGB(20, 20, 20);
["ImageLabel"] = Color3.fromRGB(20, 20, 20);
["ImageButton"] = Color3.fromRGB(20, 20, 20);
["Frame"] = Color3.fromRGB(40, 40, 40);
}
local Colors2 = { -- Light mode colors (change them, I didn't)
["TextLabel"] = Color3.fromRGB(20, 20, 20);
["TextButton"] = Color3.fromRGB(20, 20, 20);
["ImageLabel"] = Color3.fromRGB(20, 20, 20);
["ImageButton"] = Color3.fromRGB(20, 20, 20);
["Frame"] = Color3.fromRGB(40, 40, 40);
}
local function ChangeColors(Frame)
if table.find(ClassesCanChange, Frame.ClassName) then
if Button.Text == "Dark mode" then
local NewColor = Colors1[Frame.ClassName]
else
local NewColor = Colors2[Frame.ClassName]
end
TS:Create(Frame, TweenInfo.new(1), {BackgroundColor3 = NewColor}:Play()
end
end
Button.Activated:Connect(function()
for i, v in pairs(ScreenGui:GetDescendants()) do
ChangeColors(v)
end
if Button.Text == "Dark mode" then
Button.Text = "Light mode"
else
Button.Text = "Dark mode"
end
end
Set the button’s text to “Dark mode” or “Light mode”.
Change ScreenGui, Button, Colors1 and Colors2, and you’re most likely good to go unless I messed something up.
2 Likes
I made something exactly like this.
Basically, each object has a different attribute:
UIDark
UILight
ContrastImage
ContrastText
UIDark is the darker portion of the UI (like on the bottom, there is a “canvas” portion for text to go.
UILight is, well, the light portion of the UI
ContrastImage is ImageLabels or ImageButtons whose images should be the opposite of the background (if light mode then the images are black, if dark mode then the images are white)
ContrastText is the same but for text containers.
Basically, I have a listener to wait for the DisplayMode value to change, on change, it tweens to the respective colour depending on whether the DisplayMode value is dark or light.
I have a module that controls every single UI object and creates listeners:
local module = {
['CreateUI'] = function(self, object)
local functions = object:FindFirstChild('Functions')
local moveFunction, releaseFunction, initFunction, status
if functions then
functions = require(functions)
moveFunction = functions.MoveFunction
releaseFunction = functions.ReleaseFunction
initFunction = functions.InitFunction
status = functions.Status
end
self[object:GetAttribute('UIObjectType')](self, object, initFunction, moveFunction, releaseFunction, status)
end;
Then, create the listener, I have multiple functions that control multiple object types:
['ContrastText'] = function(self, object)
if displayMode.Value == 'Dark' then -- initialize when the data first loads from datastore (just to save settings)
object.TextColor3 = Color3.new(1,1,1)
elseif displayMode.Value == 'Light' then
object.TextColor3 = Color3.new(0,0,0)
end
displayMode.Changed:Connect(function() -- waits for the value to change
if displayMode.Value == 'Dark' then
tweenService:Create(object, TweenInfo.new(0.25), {TextColor3 = Color3.new(1,1,1)}):Play() -- tween the object to the respective colour
elseif displayMode.Value == 'Light' then
tweenService:Create(object, TweenInfo.new(0.25), {TextColor3 = Color3.new(0,0,0)}):Play()
end
end)
end;
3 Likes