How to get studio-themed plugin UI elements?

I’ve been making a timer plugin for the last few months and I want it to look natural in studio. I’ve seen plugins like Codify that have studio themed buttons. Is there any way I can get buttons like these?

1 Like

There’s a module called StudioComponents that contains Roact components that are identical to those of Roblox Studio’s user interface. I believe it has also been ported to Fusion as well.

1 Like

Codify gets its theme colours from the StudioTheme object, which you can learn more about on devhub: Studio.Theme.

local Studio = settings():GetService("Studio")

local currentTheme = Studio.Theme

local mainBackground = currentTheme:GetColor(Enum.StudioStyleGuideColor.MainBackground)

StudioTheme provides access to the current theme colours. Using the Studio API, its possible to respond when the user changes their system/studio theme settings.

Studio.ThemeChanged:Connect(function()
  currentTheme = Studio.Theme

  local mainBackground = currentTheme:GetColor(Enum.StudioStyleGuideColor.MainBackground)

  -- update components
end)

Codify is specifically using Roact, so reacting to theme changes is easy! I use a personal library simply called “studio-theme” *it’s not documented, which allows me to bind Roact components to the active theme and respond to changes.


The styled components themselves within Codify (and my other plugins) are just that—Standard Roblox GUI objects stylised to look like native Studio UI. There’s nothing special about them. In fact, Codify is open source (despite its paid options), so you’re more than welcome to dive into its source code and see how each component is put together!

Here’s the button component, for example:

And if it helps, some of the core components of Codify were generated using Codify :wink:

2 Likes

You can achieve your desired result by using Studio Widgets

Studio Widgets are plugins with the UI of Roblox Studio.

1 Like

He’s not talking about that, he’s talking about UI elements.

1 Like

There’s a folder containing most if not all the icons used in the default studio plugins and in-game core gui.

According to this article on content data types, these icons can be found under these file paths.

image

Be sure to replace <version> with the current version of Roblox studio. After getting to the content folder, find the textures folder.