Skip to main content

useTheme

A hook used internally by components for reading the selected Studio Theme and thereby visually theming components appropriately. It is exposed here so that custom components can use this API to achieve the same effect. Calling the hook returns a StudioTheme instance. For example: 

local function MyThemedComponent()
	local theme = useTheme()
	local color = theme:GetColor(
		Enum.StudioStyleGuideColor.ScriptBackground,
		Enum.StudioStyleGuideModifier.Default
	)
	return React.createElement("Frame", {
		BackgroundColor3 = color,
		...
	})
end
Show raw api
{
    "functions": [],
    "properties": [],
    "types": [],
    "name": "useTheme",
    "desc": "A hook used internally by components for reading the selected Studio Theme and thereby visually\ntheming components appropriately. It is exposed here so that custom components can use this\nAPI to achieve the same effect. Calling the hook returns a [StudioTheme] instance. For example:\n\n```lua\nlocal function MyThemedComponent()\n\tlocal theme = useTheme()\n\tlocal color = theme:GetColor(\n\t\tEnum.StudioStyleGuideColor.ScriptBackground,\n\t\tEnum.StudioStyleGuideModifier.Default\n\t)\n\treturn React.createElement(\"Frame\", {\n\t\tBackgroundColor3 = color,\n\t\t...\n\t})\nend\n```",
    "source": {
        "line": 22,
        "path": "src/Hooks/useTheme.luau"
    }
}