How to change accent color?

Questions
1

I like default dark theme, but I’d like to change blue accent color, is there an easy way to do it for all widgets? It seems docs page on theaming doesn’t exist yet, and I can’t figure it out from code by myself.

2

Hi,

So you can use a module.xml and “theme vars”… the dark version of them default theme is literally just a different set of theme vars, heres and example in the builder: https://haxeui.org/builder/?5a9d3e60

image
image1919×812 37.1 KB

<module>
    ...
    <themes>
        <default>
            <var name="accent-color" value="red" />
            <var name="selection-background-color" value="red" />
        </default>
    </themes>
    ...
</module>

and here is the full set of theme vars that the default theme uses: https://github.com/haxeui/haxeui-core/blob/master/haxe/ui/module.xml#L86-L184

Hope that helps!

Cheers,
Ian

3

I just hue-shifted all blue colors towards purple and it kinda looks fine. One thing that doesn’t look nice if blue icons, I tried tinting them with filters. For close-button it looked fine, but I don’t think that this is the best solution. Also I’ve found out that I can’t just do ThemeManager.addStyleString for adding tint, because addStyleString internaly adds style to the default theme (and I’m using dark theme) and for some reason it doesn’t get inherited. Don’t know if it should be considered a bug or not. Anyway could you please look at my code and tell me if there is a better way to do it:

private static function createApp(): HaxeUIApp {
    LocaleManager.instance.language = "ru";
    Toolkit.theme = Theme.DARK;        
    
    var app = new HaxeUIApp();        
    var man = ThemeManager.instance;
    man.setThemeVar("dark", "accent-color", "#5A3C78");
    man.setThemeVar("dark", "accent-color-darker", "#8041BF");
    man.setThemeVar("dark", "accent-color-lighter", "#423252");
    man.setThemeVar("dark", "accent-gradient-start", "#4D3366");
    man.setThemeVar("dark", "accent-gradient-end", "#392E45");
    man.setThemeVar("dark", "selection-background-color", "#624182");
    man.setThemeVar("dark", "selection-background-color-hover", "#423252");
    
    //man.addStyleString("#dialog-close-button { filter: tint(#8041BF, 100) }");
    Toolkit.styleSheet.parse("#dialog-close-button { filter: tint(#8041BF, 100) }", "dark");

    trace(man.getTheme("dark"));

    return app;
}