Friday, January 26, 2024

Setting a custom theme

 Set(var_nightTheme, true);

Set(
    _appOverLay,
    RGBA(50, 42, 38, 0.7)
);
Set(
    _appOverLayLighter,
    RGBA(
        48,
        47,
        77,
        0.5
    )
);
Set(
    defaultsLight,
    {
        primaryColor: ColorValue("#F7F7FF"),
        secondaryColor: ColorValue("#fd5f06"),
        disabledColor: Color.Gray,
        topMenuColor: ColorValue("#23B5D3"),
        backgroundColor: ColorValue("#FCFCFC"),
        selectedColor : ColorFade(ColorValue("#23B5D3"), 20%),
        elementBackgroundColor: RGBA(
            0,
            39,
            43,
            1
        ),
        textColor: RGBA(
            52,
            51,
            48,
            1
        ),
        errorColor: ColorValue("#B00020"),
        font: "Segoe UI",
        fontSize: 13,
        borderRadius: 5,
        //borderColor: Color.Transparent,
        borderColor: RGBA(
            71,
            68,
            72,
            1
        ),
        //inputFill: RGBA(240, 240, 240, 1),
        inputFill: RGBA(
            241,
            240,
            234,
            1
        ),
        inputBorderThickness: 0.5
    }
);
Set(
    defaultsDark,
    {
        //primaryColor: ColorValue("#070600"),
        primaryColor: ColorValue("#322A26"),
        secondaryColor: ColorValue("#fd5f06"),
        disabledColor: Color.Gray,
        topMenuColor: ColorValue("#474448"),
        selectedColor : ColorFade(ColorValue("#474448"), 20%),
        //backgroundColor: ColorValue("#212D40"),
        backgroundColor: ColorValue("#383B53"),
        elementBackgroundColor: RGBA(
            240,
            240,
            240,
            1
        ),
        textColor: RGBA(
            255,
            255,
            255,
            1
        ),
        errorColor: ColorValue("#B00020"),
        font: "Segoe UI",
        fontSize: 13,
        borderRadius: 5,
        //borderColor: Color.Transparent,
        borderColor: RGBA(
            240,
            240,
            240,
            1
        ),
        //inputFill: RGBA(240, 240, 240, 1),
        inputFill: RGBA(
            33,
            45,
            64,
            1
        ),
        inputBorderThickness: 0.5
    }
);
Set(
    defaultsLight,
    Patch(
        defaultsLight,
        {
            primaryColorHex: Match(
                JSON(
                    defaultsLight.primaryColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch,
            primaryColorTransparentHex: Match(
                JSON(
                    defaultsLight.primaryColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch & "4d",
            topMenuColorHex: Match(
                JSON(
                    defaultsLight.topMenuColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch,
            secondaryColorHex: Match(
                JSON(
                    defaultsLight.secondaryColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch,
            disabledColorHex: Match(
                JSON(
                    defaultsLight.disabledColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch,
            backgroundColorHex: Match(
                JSON(
                    defaultsLight.backgroundColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch,
            errorColorHex: Match(
                JSON(
                    defaultsLight.errorColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch,
            elementBackgroundColorHex: Match(
                JSON(
                    defaultsLight.elementBackgroundColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch,
            textColorHex: Match(
                JSON(
                    defaultsLight.textColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch
        }
    )
);
Set(
    defaultsDark,
    Patch(
        defaultsDark,
        {
            primaryColorHex: Match(
                JSON(
                    defaultsDark.primaryColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch,
            primaryColorTransparentHex: Match(
                JSON(
                    defaultsDark.primaryColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch & "4d",
            topMenuColorHex: Match(
                JSON(
                    defaultsDark.topMenuColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch,
            secondaryColorHex: Match(
                JSON(
                    defaultsDark.secondaryColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch,
            disabledColorHex: Match(
                JSON(
                    defaultsDark.disabledColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch,
            backgroundColorHex: Match(
                JSON(
                    defaultsDark.backgroundColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch,
            errorColorHex: Match(
                JSON(
                    defaultsDark.errorColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch,
            elementBackgroundColorHex: Match(
                JSON(
                    defaultsDark.elementBackgroundColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch,
            textColorHex: Match(
                JSON(
                    defaultsDark.textColor,
                    JSONFormat.IgnoreUnsupportedTypes
                ),
                "#[a-fA-F0-9]{6}"
            ).FullMatch
        }
    )
);
Set(
    defaults,
    defaultsDark
);

and where ever you want to change the theme
Set(var_nightTheme,!var_nightTheme);
If(var_nightTheme, Set(defaults,defaultsDark), Set(defaults,defaultsLight));

No comments:

Post a Comment

Add Service Principle support in Custom Connector

  then search for "Streamlining Integration: Using Service Principal authentication on Custom connectors with Microsoft Graph Applicati...