I have created a simple plugin to allow you to preview and output the theme colors in studio. The DevHub lacks much documentation for this stuff, and finding out how to get the colors in general was difficult. I aim to make that easier with this plugin.
All it does is open a window within which all of the theme colors are shown as TextButtons. The background of the button is the actual color (the text is the inverse for readability). If you left-click the button, the RGB value of the color is printed to the output. If you wish to get the Color3 value, right-click on the button.
The colors update depending on your studio color scheme/chosen theme. As such, it works with both light and dark mode studio, as well as custom color schemes in the script editor. As a result, the more important part of the plugin is the names of the TextButtons. They correspond to the Enum of that color.
To access the color value you would do this:
settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.[the name of the color as shown in the plugin])
If you have any questions, feel free to ask them below or in DM’s. The same can be done for suggestions, I will happily update this plugin.
This is meant to fill a documentation gap (which can be used for other development use cases), not customize Studio’s appearance. No offense, but this is a completely tangential recommendation that has nothing to do with the actual use cases of this plugin.
Roblox has a perfectly fine way of editing the UI theme colors in the Studio Settings menu. This is just to more easily view the colors and to understand what each Enum stands for.
This is the current documentation: https://developer.roblox.com/en-us/api-reference/enum/StudioStyleGuideColor
I personally prefer a more visual and simple representation:
As well, the current documentation does not give specific color values, which this plugin does:
This plugin isn’t really meant to be groundbreaking. I put it together in about an hour and seeing as it’s been helpful to me in the creation of other plugins, I wanted to share it.
On top of the left-click to see RGB values, you can now right-click to see the Color3 values. Keep in mind, they are long floating-point numbers, since the colors actually seen in studio are RGB values (as set in Studio Settings).
