How to change my plugin color depending on Studio Theme setting?

Help and Feedback Scripting Support
#1

I am updating my plugin and it’s currently only dark themed. I would like to have it change automatically to Light or Dark theme depending on your settings.

I thought I saw an API about dark theme and how to do this but I can’t find it.

If you know how to change a Plugin depending on the Theme, that’d be much appreciated.
Also, would it be better to just have two Plugin UIs, one Light Themed and one Dark Themed or have one UI and change all the element’s color in the code?

Thanks!

3 Likes
How to get studio theme color?
An alternative, cheap Datastore Editor plugin! [thousands of installs & available on Github!]
#2

This?

2 Likes
#3

You can check the theme with this statement, then the script decide to use the light or dark theme UI you created.

local color = settings().Studio.Theme

You may also find this useful.

settings().Studio.ThemeChanged:Connect(Function) --When the theme is changed.
2 Likes
#4

The changed function is working…But for some reason this: if settings().Studio.Theme == "Light" then
isn’t how you check the theme?

#5

they are
Enum.UITheme.Light
or
Enum.UITheme.Dark

In your case, it should be

if settings().Studio.Theme == Enum.UITheme.Light then
1 Like
#6 
settings().Studio.ThemeChanged:Connect(function()
	print(StudioTheme) -- It prints here
    if settings().Studio.Theme == Enum.UITheme.Light then
		print("It's Light") --But not here
	    RoundifyButton.BackgroundColor3 = Color3.new(255,255,255) --Doesn't do this either
    elseif settings().Studio.Theme == Enum.UITheme.Dark then
		print("It's Dark") -- Or here
	    RoundifyButton.BackgroundColor3 = Color3.new(46,46,46) -- Or this
	end		
end)

For whatever reason, my If Statement doesn’t work.

Any thoughts?

#7 
> print(typeof(settings().Studio.Theme))
Instance
> print(settings().Studio.Theme.ClassName)
StudioTheme
> print(settings().Studio.Theme == Enum.UITheme.Dark)
false
> print(settings().Studio.Theme.Name)
Dark
> print(settings().Studio.Theme.Name == "Dark")
true

You want to compare the Studio | Documentation - Roblox Creator Hub

> print(settings().Studio["UI Theme"] == Enum.UITheme.Dark)
true
#8 
settings().Studio.ThemeChanged:Connect(function()
	wait(3)
    if settings().Studio["UI Theme"] == Enum.UITheme.Light then
		print(settings().Studio.Theme.Name)
	    RoundifyButton.BackgroundColor3 = Color3.new(255,255,255)
    elseif settings().Studio["UI Theme"] == Enum.UITheme.Dark then
		print(settings().Studio.Theme.Name)
	    RoundifyButton.BackgroundColor3 = Color3.new(46,46,46)
    end	
    print("bye")	
end)

No matter what I do, it will not change it back to 46,46,46.

It will change it to 255,255,255 when you switch to light. Or if I start out as light and switch to dark, it still keeps it at 255,255,255. All of the prints are reading what you’d expect, so I have no idea what’s up.

#9

Of course it will become 255,255,255, because it is Color3.New . Instead, you should use Color3.FromRGB(46, 46, 46)

2 Likes
#10

I didn’t even know that existed! (You can tell I don’t change the color of UIs via script very often)

Thanks!

#11

Please put a solution mark if it is solved.

1 Like
#12

What one do I mark as a solution. I got 2 things solved in this thread.

1 Like
#13

Whichever one was most useful and helped out your concerns the most should be the one that is marked solved.

1 Like
#14

While the answers above do work, it is NOT the recommended way of handling Studio themes!
The UITheme enum is deprecated now, and it has been phased out in favor of the newer StudioTheme API.

The StudioTheme object’s has a function called GetColor, which lets you grab the pre-defined set of color themes for the selected theme. settings().Studio.Theme.Name is also the preferred technique for checking the name of the theme that is being used.

See these pages for more information:

(cc: @kingdom5 @Stelrex @addisonshiu)

27 Likes
#15

Thanks, I’ll definitely change it to the up to date way. :slight_smile:

Just to see if I understand 100%, I can use the StyleGuideColor to change my UI element colors so they perfectly match the studio theme colors?

#16

Yup, you should sync with it initially and listen to ThemeChanged to know when to update it.

2 Likes
#17

Thanks, that is very helpful!

#18

:thinking: Its not tagged as deprecated in any of the api pages I looked at.

But I see it is in your change log Release Notes for 365.

1 Like
#19

The DevHub isn’t correctly reflecting that information .__.

4 Likes