How to get studio-themed plugin UI elements?

COOLDEV16T · April 30, 2022, 6:57pm

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?

OptimisticSide · April 30, 2022, 7:03pm

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.

cxmeels · April 30, 2022, 7:04pm

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:

github.com

csqrl/codify-plugin/blob/main/src/Components/Button.lua

local Packages = script.Parent.Parent.Packages

local Roact = require(Packages.Roact)
local Hooks = require(Packages.Hooks)
local StudioTheme = require(Packages.StudioTheme)

local Layout = require(script.Parent.Layout)
local Text = require(script.Parent.Text)
local Icon = require(script.Parent.Icon)

local e = Roact.createElement

export type ButtonProps = {
	autoSize: Enum.AutomaticSize?,
	primary: boolean?,
	disabled: boolean?,
	label: string?,
	hint: string?,
	icon: string?,
	iconPosition: string?,

This file has been truncated. show original

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

abcanish123 · May 4, 2022, 3:27am

You can achieve your desired result by using Studio Widgets

Studio Widgets are plugins with the UI of Roblox Studio.

jufdnhf · May 4, 2022, 3:52am

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

deafaultyboii1324 · May 9, 2022, 5:17pm

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.

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