Greetings, in this tutorial we’re going to make the plugin icon change according to Studio theme. So let’s start!
For what purpose?
Simply, only If you opt for a single-color icon, such as black or white, it ensures compatibility across various themes. This consideration is especially important as not all users prefer the Light theme.
If we don’t create a dynamic icon, the result will look like this:
Before start 
You need at least two icons that contrast with light and dark themes. For example:
This is for Light theme
This is for Dark theme
Once it’s done, let’s continue!
Creating the button on Toolbar
So first, let’s create the plugin button. To do this, just create a new script (you can paste it anywhere). After that, you must type this:
local Toolbar = plugin:CreateToolbar("Plugin section name")
With this, we’ve created the plugin on the Toolbar. You can change ‘Plugin section name’ to whatever you want.
Okay, now let’s make the buttons.
local PluginButton = Toolbar:CreateButton(
"Click me!", -- Button name (this will appear below button)
"This is just a description ", -- Text that appears when you hover your mouse on button
"rbxassetid://15491708985") -- Button icon
Note: button image must be Image ID, not Decal ID
We’re done with the button! To verify if everything is correct, you must save your plugin.
(Image by @alexsany, found on How to create your own plugin)
2. Scripting the button
Now let’s script the functionallity of the button, since this tutorial is enfocated to do a dynamic icon, we’re going to script that.
To get Studio available themes, you need to type this:
-- Gets Studio themes
local studioThemes = settings().Studio:GetAvailableThemes()
Next, we create a function that updates the icon depending on Studio theme:
local function updateIcon()
if settings().Studio.Theme == studioThemes[1] then -- Light Theme
PluginButton.Icon = "rbxassetid://15491708985" -- Light Theme Icon
elseif settings().Studio.Theme == studioThemes[2] then -- Dark Theme
PluginButton.Icon = "rbxassetid://9087232887" -- Dark Theme Icon
end
end
Next, we script a function that detects theme changes:
-- Fires when studio theme is changed
settings().Studio.ThemeChanged:Connect(function()
updateIcon() -- calls function to update icon
end)
And finally, we call the function again to apply changes:
--
updateIcon() -- calls function to update icon
Once it’s done, you must save the plugin again to test it out, and then it should work like this:
3. The end
That’s it! you created your own dynamic icon!
That’s all for this tutorial, If you come across any mistakes or find something unclear, please don’t hesitate to ask!
Known issue: In play mode and after play mode, the icon gets replaced by text. I couldn’t find a way to fix that sorry
This doesn’t affect plugin functionality, as it’s merely an aesthetic issue, so don’t worry.
The easy solution for this is to simply save the plugin again (if you are creating your plugin) or disable and enable it (if you uploaded your plugin to the marketplace).