Access App Scope can't set Variable in component

[kilaj1]

I'm creating a side bar navigation with a dark and light mode option.  This is the code in the "Formulas" 

varAppColorMode="";

PrimaryColor=If(varAppColorMode="Dark",RGBA(45,96,46,1),RGBA(255,255,255,1));
PrimaryColor_Text=If(varAppColorMode="Dark","RGBA(45,96,46,1)","RGBA(255,255,255,1)");
AccentColor=If(varAppColorMode="Dark",RGBA(253,185,39,1),RGBA(51,134,43,1));
// Adjusted accent color to complement primary
AccentColor_Text=If(varAppColorMode="Dark","RGBA(253,185,39,1)","RGBA(51,134,43,1)");
TertiaryColor=If(varAppColorMode="Dark",RGBA(34,73,35,1),RGBA(244,244,244,1));

// Darker shade of primary for dark mode
TertiaryColor_Text=If(varAppColorMode="Dark","RGBA(34,73,35,1)","RGBA(244,244,244,1)");
PrimaryTextColor=If(varAppColorMode="Dark",RGBA(247,247,247,1),RGBA(45,96,46,1));

// White for dark mode and primary color for light mode
PrimaryTextColor_Text=If(varAppColorMode="Dark","RGBA(247,247,247,1)","RGBA(45,96,46,1)");
SecondaryTextColor=If(varAppColorMode="Dark",RGBA(170,204,170,1),RGBA(170,204,170,1));

// Complementary lighter shade of primary color
SecondaryTextColor_Text=If(varAppColorMode="Dark","RGBA(170,204,170,1)","RGBA(170,204,170,1)");
AccentTextColor=If(varAppColorMode="Dark",RGBA(51,134,43,1),RGBA(22,25,39,1));

// Use primary color for dark mode accent text
AccentTextColor_Text=If(varAppColorMode="Dark","RGBA(51,134,43,1)","RGBA(22,25,39,1)");
HighlightColor=If(varAppColorMode="Dark",RGBA(45,96,46,1),RGBA(215,219,230,1));

// Use primary color for dark mode highlight
HighlightColor_Text=If(varAppColorMode="Dark","RGBA(45,96,46,1)","RGBA(215,219,230,1)");
varHoverFill=If(varAppColorMode="Dark",RGBA(255,255,255,0.1),RGBA(0,0,0,0.1));

// Remain unchanged for hover effect
varPressedFill=If(varAppColorMode="Dark",RGBA(255,255,255,0.2),RGBA(0,0,0,0.2));

 In my component I enable Access app Scope and use the following code on a button that will toggle light/dark mode

If(varAppColorMode = "Light",Set(varAppColorMode,"Dark"),Set(varAppColorMode,"Light"));

I get this error on the "varAppColorMode":

Unexpected characters. The formula contains 'PowerFxResolvedObject' where 'Ident' is expected.

This is from a tutorial I've been following from Tolu Victor.

Not sure how to troubleshoot this issue, even if I set the variable back on the screen to light it doesn't stop the error.

[FLMike]

Hi @kilaj1 

Sorry I am not following by you said you put this in the "Formulas".

Can you please share a picture of exactly where you put this? I understand what you are trying to do, I wouldn't do it that way, but right now i just want to help you fix what your issue is.

Thanks,
If I have helped you, I would really appreciate if you please Mark my answer as Resolved/Answered, and give it a thumbs up, so it can help others

Cheers

Thank You
Michael Gernaey MCT | MCSE | MCP | Self-Contractor| Ex-Microsoft
https://gernaeysoftware.com
LinkedIn: https://www.linkedin.com/in/michaelgernaey

[kilaj1]

oo sorry it the App property

[FLMike]

Hi @kilaj1 

Thanks, just wanted to be sure. Ok so I know what you are doing, I just wouldn't do it that way, its just me.

Since I have many themes I do this.

Set(appThemeMode, "Dark");

Collect(AppThemes, 
    {  
        ButtonColor: If(appThemeMode = "Dark", Color.Black, Color.White)
    }
);

Set(PrimaryTheme, First(AppThemes));

And now PrimaryTheme. gives you that themes colors.

You dont have to type First(Colletionname etc), but this way I can have many themes live at once. and I just give it a specific Variable to hold it.

Yours would be super easy to convert to that.

If I have helped you, I would really appreciate if you please Mark my answer as Resolved/Answered, and give it a thumbs up, so it can help others

Cheers

Thank You
Michael Gernaey MCT | MCSE | MCP | Self-Contractor| Ex-Microsoft
https://gernaeysoftware.com
LinkedIn: https://www.linkedin.com/in/michaelgernaey

[FLMike]

Set(varAppColorMode, "Dark");

Collect(AppThemes, 
    {  
        PrimaryColor: If(varAppColorMode="Dark",RGBA(45,96,46,1),RGBA(255,255,255,1)),
        PrimaryColor_Text :If(varAppColorMode="Dark","RGBA(45,96,46,1)","RGBA(255,255,255,1)"),
        AccentColor:If(varAppColorMode="Dark",RGBA(253,185,39,1),RGBA(51,134,43,1)),
        // Adjusted accent color to complement primary
        AccentColor_Text :If(varAppColorMode="Dark","RGBA(253,185,39,1)","RGBA(51,134,43,1)"),
        TertiaryColor:If(varAppColorMode="Dark",RGBA(34,73,35,1),RGBA(244,244,244,1)),

        // Darker shade of primary for dark mode
        TertiaryColor_Text:If(varAppColorMode="Dark","RGBA(34,73,35,1)","RGBA(244,244,244,1)"),
        PrimaryTextColor:If(varAppColorMode="Dark",RGBA(247,247,247,1),RGBA(45,96,46,1)),

        // White for dark mode and primary color for light mode
        PrimaryTextColor_Text:If(varAppColorMode="Dark","RGBA(247,247,247,1)","RGBA(45,96,46,1)"),
        SecondaryTextColor:If(varAppColorMode="Dark",RGBA(170,204,170,1),RGBA(170,204,170,1)),

        // Complementary lighter shade of primary color
        SecondaryTextColor_Text:If(varAppColorMode="Dark","RGBA(170,204,170,1)","RGBA(170,204,170,1)"),
        AccentTextColor:If(varAppColorMode="Dark",RGBA(51,134,43,1),RGBA(22,25,39,1)),

        // Use primary color for dark mode accent text
        AccentTextColor_Text:If(varAppColorMode="Dark","RGBA(51,134,43,1)","RGBA(22,25,39,1)"),
        HighlightColor:If(varAppColorMode="Dark",RGBA(45,96,46,1),RGBA(215,219,230,1)),

        // Use primary color for dark mode highlight
        HighlightColor_Text:If(varAppColorMode="Dark","RGBA(45,96,46,1)","RGBA(215,219,230,1)"),
        varHoverFill:If(varAppColorMode="Dark",RGBA(255,255,255,0.1),RGBA(0,0,0,0.1)),

        // Remain unchanged for hover effect
    varPressedFill:If(varAppColorMode="Dark",RGBA(255,255,255,0.2),RGBA(0,0,0,0.2))
    }
);

Set(PrimaryTheme, First(AppThemes));

And Converted

[kilaj1]

Thanks for the reply, i think i see what you're doing there, but the problem is still there when i try to add a button to the component to toggle that variable. the theme colors i have are also tied to the component

[kilaj1 · Accepted solution]

I figured it out, it was an issue with App.Formula where I had 

varAppColorMode="";

Adding this here apparently doesn't set it globally so I added 

Set(varAppColorMode,"Light");

to the App.Onstart (I did try adding it to App.Formulas, didn't work). 

Hopefully no one asks me to make it remember the settings on launch 🙄