Set Icon on Menubar Item dynamically

[najaarv]

I have contributed a separate menu for Themes by registering in the MenuModelRegistry. It looks like this:

Now, the currently selected theme is 'Dark' as seen in the above image, but it is not highlighted. How can I highlight the currently active selection, or add something like a tick icon before the text that changes based on the current theme selected?

[akosyakov]

I imagine that it can be done by updating MenuAction.icon or Command.iconClass of registered action or command. Or by dynamically updating css rules of document for the same icon class.

[najaarv]

@akosyakov I'm unable to implement this. How do you suggest updating an icon registered initially as part of the MenuAction dynamically? I'm guessing I can do it in the execute method of the CommandRegistry.registerCommand If not, where else can I update the icon class dynamically? Can you share a code snippet? It'd be very helpful. Thanks.

[akosyakov]

Yes, i thought you can capture action in the local variable and update its property?

Alternatively you can inject and remove css styles dynamically using DOM api, so the same class will be used for MenuAction.icon, but stylesheet will be updated.

[najaarv]

Is this what you suggest?

export class ThemeContribution implements MenuContribution, CommandContribution {
    dimmedMonokaiThemeAction: MenuAction = {
        commandId: "omega.theme.dimmed-monokai",
        label: "Dimmed Monokai"
    };
    public registerCommands(registry: CommandRegistry) {
        registry.registerCommand(
            { id: this.dimmedMonokaiThemeAction.commandId, label: "Theme: Dimmed Monokai" },
            { 
                execute: () => {
                    this.dimmedMonokaiThemeAction.icon = 'fa fa-check';
                    ThemeService.get().setCurrentTheme(dimmedMonokaiThemeId);
                }
            }
        );
    }
    public registerMenus(menus: MenuModelRegistry): void {
        menus.registerMenuAction(THEMES_PATH, this.dimmedMonokaiThemeAction);
    }
}

This doesn't seem to assign an icon dynamically on selecting the theme. Can you tell me what you thought would work?

[akosyakov]

yes something like that, i will listen to change on the current thee and then go through actions and update icon or update the DOM stylesheet

Sorry I don't have time to provide an example. You can reach out for the professional support here: https://www.typefox.io/theia/ If you need more detailed guidance.