Theme Selector UI

Help and Feedback Scripting Support
,
#1

I’m trying to make a theme selector GUI where you can select different predefined themes and it will update them on the GUI. Other than cloning the menu and just changing the color scheme, what’s a good way to do this through a script?

EDIT: There are two solutions in this post. The one @amalnk0007 posted works, but it’s less performant and less efficient if you’re gonna be changing the menu(s) you want to add themes to constantly. The one @3rdhoan123 works too with more efficiency. I’d suggest picking out which one you think is easier for you. Anyways, thanks for coming by to read my post. :smiley:

4 Likes
#2

Setup a table of the color schemes?

local ColorScheme1 = {
    ["BarColor"] = Something,
    ["ChatColor"] = Something2,
}

local ColorScheme2 = {
    ["BarColor"] = SomethingElse,
    ["ChatColor"] = SomethingElse2,
}
1 Like
#4

Wouldnt you have to define your color schemes that are created or are you talking about something else?

You can just have a function that puts the colors from the table into them automatically?

#5

Sorry my reply didn’t exactly make sense. I’m guessing by the creating tables you mean setting the name of the UI element for the value name and then the color for the value? Still that would be tiring if you had a lot of UI elements in your menu.

#6

Can’t really think of another really good way, unless you created a plugin of it and had it automatically paste it in as a table.

Basically:
Plugin copies color scheme from what you’ve done onto UI,
Plugin puts copy into table
You can use table to setup as scheme.

It probably might take a while to actually create the plugin but then you can probably create a load tons of color schemes fairly quickly with just simple clicks.

#7

I’ve never interfered with making plugins on ROBLOX and I don’t know how to make them. Thanks for the reply though.

#8

NOTE : This takes too much UI making efforts

Make two Frames inside the Starter Gui and name them dark theme and light theme.
Also make sure make the UI’s inside that dark themed and light themed.(This will help you not to change the colour of the frames from the script)
Also make a text button named DarkTextButton.

(Script inside the text button)

local DarkTextButton = script.Parent

local darkTheme = DarkTextButton.Parent.DarkTheme
local lightTheme = DarkTextButton.Parent.LightTheme

if script.Parent.Name == "DarkTextButton" then -- this will check which theme to switch
   DarkTextButton.MouseButton1Up:Connect(function() 
       darkTheme.Visible = false
       lightTheme.Visible = true
       DarkTextButton.Name = "LightTextButton"
   end) 

elseif script.Parent.Name == "LightTextButton" then
   script.Parent.MouseButton1Up:Connect(function()
       LightTheme.Visible = false
       DarkTheme.Visible = true
       script.Parent.Name == "DarkTextButton"
   end)
end

That’s it.
I hope this works and I haven’t made any errors. :hugs:

3 Likes
#9

Storing a load tons of color themes as screenguis seems a tad unneccessary especialy for increasing the scale of it?

Unless you plan to never change the color themes/add any more/not changing the UI at all.

Because if you did change the UI, you’d have to go to the other UI, change it, etc.

2 Likes
#10

As I said in the post, I want a different way that isn’t cloning the default menu and changing the colors. However if it’s a easy solution, I guess I can try it. Plus I’m only storing two themes which are the ones you said (light and dark) so it shouldn’t be a bad thing.

I will make the other theme until I finish the default one so I don’t have to constantly make changes.

1 Like
#11

I wouldn’t recommend it really myself however:

If you dont plan to change it at all, if you plan to leave your UI as is for a long time, not planning to add any large changes, etc.

Then it might be fine to do.

Other than that, adding any other themes, increasing scale, changing UI, its going to be a pain as it increases.

Dont know how performance will handle with two screenguis with one not being used though? Maybe it might be fine since one isnt visible but I dont really know much about it past that :man_shrugging:

#12

It’s gonna be two different frames, not different ScreenGUIs.

#13

Is it a complicated GUI with multiple buttons/frames or is just one frame?

If so, couldn’t you just keep the colors as a set inside the script itself? (if its just a frame)

Frame.BackgroundColor = Color3.fromRGB() – might’ve messed up but thats literally it

#14

It’s multiple buttons/frames. 30 charsssssssssssssss

#15

So you’re going to be storing two styles/themes into the same GUI?

#16

Yeah, I don’t think that’s efficient and performant, but it works. If you can tell me a better solution, I’ll be glad. :smiley:

#17

Module script pertaining the color theme.

Script auto applies colors.

Simple jist, thats the best way I could think of :man_shrugging:.
(Plus if you plan to change the colors, you can literally go to the table and change it and it’ll affect the GUI)

But if his method works, you can keep it :ok_hand:

#18

But what exactly would the table contain? If it contains the color scheme, how exactly would you apply those colors to all the UI elements.

#19

ModuleScript:

local WhiteTheme = {
    ["FrameColor"] = Color3.fromRGB(255, 255, 255) -- probably some better way but eh
}

LocalScript in GUI:

local ColorSchemes = require(RepStorage.ColorSchemeTable)

FrameColor.Color = ColorSchemes["WhiteTheme"]["FrameColor"]

Will probably look different but thats basically it,
Then you can do a simple MouseButton1Click on a single button to act as the color/theme switcher.

(it’ll defintley look different, just got lazy lol)

#20

Oh I see. Thanks! I’ll see how I can apply this easily, perhaps with for loops and if I can’t use for loops I’ll just do it manually. Thanks.

#21

It’ll work with for loops if you want to make everything have the same matching name to make your life easier :ok_hand: