ThemeService - Automatically update plugin UI colors [MODULE]

Resources Community Resources
, ,
#1

ThemeService

Looking for a way to get the module?
Take the module from here

What is ThemeService?

  • ThemeService allows plugin developers to apply themes to any GUI element. When a user changes the theme, the GUI will automatically be recolored to match the selected theme.

What is the purpose?

  • Currently, plugin developers have to manually update their UI to be compatable with themes, however this is a lengthy proccess, especially for those new to plugin-making. ThemeService aims to remove the hurdle and allow more developers to introduce themes to their plugins.

How to use it?

--Adds an item to the registry
ThemeService:AddItem(GUI, property, guideEnum, modifierEnum)

-- Variables:
--   GUI - Object that you want automatically updated
--   Property - The property of the object you want automatically updated
--   GuideEnum - guide color reference (e.g. Enum.StudioStyleGuideColor.MainBackground)
--   ModifierEnum - Contextual reference (e.g. Enum.StudioStyleGuideModifier.Default)

--Adds multiple items to the registry
ThemeService:BulkAdd(Array, property, guideEnum, modifierEnum)

-- Variables:
--   Array - The objects that you want automatically updated
--   Property - The property of the object you want automatically updated
--   GuideEnum - guide color reference (e.g. Enum.StudioStyleGuideColor.MainBackground)
--   ModifierEnum - Contextual reference (e.g. Enum.StudioStyleGuideModifier.Default)

‎
‎
You shouldn’t use the :UpdateItem() function unless you are debugging:

--Forcefully updates a GUI to match the theme
--Only works on GUI inserted into the :AddItem() method
--(Only use this method if you are updating the color of a UI manually)
ThemeService:UpdateItem(GUI, property)

-- Variables:
--   GUI - Object that you want to update
--   Property - property of the object you want to update

Here is an example of ThemeService in action, courtesy of @MrSprinkleToes

Further information:

  • Require the module using local ThemeService = require(PutModulePathHere.ThemeService)
  • ThemeService:AddItem() can be called infinite times on the same object
  • ThemeService:AddItem() can be called infinite times on the same property
  • There are no memory leaks that I am aware of
  • If an object is parented to nil, the UI will still update
  • If an object is deleted, the UI reference will be removed and stop updating
  • You no longer need to manually listen to the settings().Studio.ThemeChanged event

I originally created the plugin to help myself create plugins, but after seeing many plugin-makers struggle, I thought that it was important to share the module with others so that more high quality, theme compatible plugins can be created.

If you have any questions, feel free to ask, I’m open to suggestions if you have any.

16 Likes
#2

Can you show example’s? video or screenshot?

1 Like
#3

Is there any specific part that you want to see an example of? I’ve added a video showing the functionality of the module within the plugin environment if that helps at all.

#4

Interesting. Ill consider using it.

1 Like
#5

I can vouch for this, it makes setting UI colors automatically much easier. I definitely recommend this for all plugin creators!

2 Likes
#6

Using this resource/code as it is very beneficial for plugin creators who want to create UI Colors automatically from this for their plugins, totally useful for anyone out there who is in the middle of making a plugin like me.

Would recommend this for any plugin creator or anyone who wants to create a plugin out there!

1 Like
#7

UPDATE:

- Added BulkAdd method
  use ThemeService:BulkAdd(array, property, guideEnum, ModifierEnum) to add more than one UI 
  element at once
- Changed all methods to use self to improve efficiency
- Added type checking
1 Like
#8

This looks really cool!
But this doesn’t have much potential, because I still have to manually set the colors when I call :AddItem. I really like the idea of a theme changer module.

#9

You only have to call :AddItem once per UI object, the colours are then determined automatically after each time the player updates their theme. Even if you are creating UI during runtime, you would need to set the color anyway. Because of this, there aren’t any drawbacks unless you are using :Clone() to create your UIs.

1 Like