Skip to content

ThemeFramework

The framework that sets up the theming engine for all components.

Usage

theme-framework doesn't have it's own documentation and for that reason, most relevant functions and types are documented here as they are widely used throughout the components.

The theming engine allows a color, transparency and shadow to be defined. Each base component will pick up on these. Important to note is that all values are transformed into reactive Fusion values when loaded into the theming engine. This means that an update will refresh all components and as such, should be used sparingly.

A guide on how to set it up can be found here.

Functions

new

luau

Code block has not loaded. An error may have occurred.

This function is used to create a new theme. Given a component location that fits the format, it will create a new theme and return it. This does not load any data yet; you should call theme:load after creating the theme.

get

luau

Code block has not loaded. An error may have occurred.

This function is the function you'll be interacting with the most. It returns a function that given a field, returns the color data for that field.

addLocation

luau

Code block has not loaded. An error may have occurred.

This function is used to add a new theme location to the theme engine. This is useful in scenarios where you want to completely overhaul certain components, in all cases. The new component location will be used as an alternative location. During theme:get(), ThemeFramework will check if the component exists in the new location, and if it does, it will use that instead. Otherwise, it will use the default location.

build

luau

Code block has not loaded. An error may have occurred.

This function is used to build the theme data for a specific theme. It iterates through all known colors and variants and calls the functions for each of them.

Something to note is that this does not load the theme data yet. It just prepares it, and loading has to be done through theme:load.

load

luau

Code block has not loaded. An error may have occurred.

This function is used to load the theme data into the theme engine. It takes the theme data from theme:build and updates all current colors.

setFallback

luau

Code block has not loaded. An error may have occurred.

When a color is not found, we still need a color to return to prevent errors. When defining themes, it's generally smart to just call this function with a color that fits the theme somewhat.

Types

Certain types are reused across different components. To make these types easily accessible, they are available below:

color

luau

Code block has not loaded. An error may have occurred.

colorOptional

luau

Code block has not loaded. An error may have occurred.

colorTable

luau

Code block has not loaded. An error may have occurred.

optionalColorTable

luau

Code block has not loaded. An error may have occurred.

useColorFunction

This function is returned by theme:get and is used to get the color data for a specific field.

If a color is not found, it will return a table with the fallback color set, and transparency set to 1.

Type

luau

Code block has not loaded. An error may have occurred.

componentColorList

luau

Code block has not loaded. An error may have occurred.