Skip to content

Scheme

Scheme is used to store colors and typography set of a theme scheme. Components use this module to define their appearance.

Lydie supports theming and theme-switching in real-time without having to reload. Developers can also fork Lydie and create/modify schemes to adapt to their game environment/theme.

Properties

Name Description Type
Schemes A list of schemes detected by Lydie EnumList
Current The name of the currently applied scheme string

Functions

Name Description
Switch: (enumTheme: string) -> () Switch to other schemes, they should be in the Scheme.Schemes list
SetAccent: (accent: Color3) -> () Set the accent theme to another color, default is pink
GetAnimated: (state: Fusion.Value<any>) -> (Fusion.Tween<Fusion.Value<any>>) Provide an animated version of the state so there will be a smooth transition between changes

Scheme template

Light.luau
-- 7kayoh
-- Light.lua
-- 03 February 2022
return {
    Elevation = {
        Color3.fromRGB(200, 200, 200),
        Color3.fromRGB(245, 245, 245),
        Color3.fromRGB(250, 250, 255),
        Color3.fromRGB(255, 255, 255),
    },
    Typography = {
        HeroLarge = { Font = Enum.Font.GothamBold, Size = 28 },
        Hero = { Font = Enum.Font.GothamMedium, Size = 25 },
        Header = { Font = Enum.Font.GothamBold, Size = 14 },
        Subheader = { Font = Enum.Font.Gotham, Size = 14 },
        Body = { Font = Enum.Font.Gotham, Size = 16 },
        Button = { Font = Enum.Font.GothamBold, Size = 16 },
        Secondary = { Font = Enum.Font.GothamMedium, Size = 14 },
        Caption = { Font = Enum.Font.GothamBold, Size = 14 },
    },
    Color = {
        Red = Color3.fromRGB(255, 47, 57),
        Green = Color3.fromRGB(19, 175, 53),
        Blue = Color3.fromRGB(20, 103, 199),
        Amber = Color3.fromRGB(177, 123, 7),
        Orange = Color3.fromRGB(255, 79, 10),
        Pink = Color3.fromRGB(255, 10, 145),
        Purple = Color3.fromRGB(125, 45, 255),
        Indigo = Color3.fromRGB(83, 45, 255),
        Teal = Color3.fromRGB(13, 107, 77),
        Mint = Color3.fromRGB(0, 138, 128),
        Mono = {
            Color3.fromRGB(0, 0, 0),
            Color3.fromRGB(25, 25, 25),
            Color3.fromRGB(50, 50, 50),
            Color3.fromRGB(75, 75, 75),
            Color3.fromRGB(150, 150, 150),
            Color3.fromRGB(200, 200, 200),
            Color3.fromRGB(225, 225, 225),
            Color3.fromRGB(240, 240, 240),
            Color3.fromRGB(255, 255, 255),
        },
        Text = {
            Primary = Color3.fromRGB(0, 0, 0),
            Secondary = Color3.fromRGB(100, 100, 100),
            Tertiary = Color3.fromRGB(150, 150, 150),
        },
        Divider = Color3.fromRGB(200, 200, 200),
    },
}