Dark and Bright UI Design

ILIAM

Hey

I was wondering whats the best idea to make a 2 mode ui? Bright / Dark?

d.healey

@ILIAM If you're using css you might just be able to swap out style sheets or component classes.

If you using component colours then you'd need to have a json object with all the colours for dark and light. Then when the user changes theme you loop through the object and apply the colours to the components.

Lindon

@ILIAM I basically do it by LAF-ing every component, and the LAF's all refer to a skin.json file, then all you need do is store a number of these "skins" and load as required...

ustk

@d-healey said in Dark and Bright UI Design:

If you're using css you might just be able to swap out style sheets or component classes.

or the colour variable maybe

Chazrox

@ILIAM Grab all the elements you want to change, put them in arrays and apply setAttribute(Colours, Opacity) to them by saving "themes" as value strings in a combobox list or something. I did this exactly in one of my plugins already. You can script, predetermined colour schemes and background images and have them set by buttons or combobox items list. You can divide up your arrays by component type so you can separate what you're changing ie, all background panels go dark, but text goes opposite an vice versa. Good luck! This is the fun part. haha.

ILIAM

Are we good like this?

Content.makeFrontInterface(300, 100);

const var Panels = [Content.getComponent("Panel1"),
                    Content.getComponent("Panel2")];


const var Labels = [Content.getComponent("Label1"),
                    Content.getComponent("Label2")];



const var ThemeSwitch = Content.getComponent("ThemeSwitch");

inline function onThemeSwitchControl(component, value)
{
	local col = value ? 0xFFFFFFFF : 0xFF000000;
	local Invcol = value ? 0xFF000000 : 0xFFFFFFFF;


    //Panels
	for (i = 0; i < Panels.length; i++) 
	{
		Panels[i].set("itemColour", col);
		Panels[i].set("itemColour2", col);
		Panels[i].repaint();
	}
	
	
	//Labels
	for (i = 0; i < Labels.length; i++) 
	{
		Labels[i].set("bgColour", Invcol);
		Labels[i].set("textColour", col);
	}
	
};

Content.getComponent("ThemeSwitch").setControlCallback(onThemeSwitchControl);

HiseSnippet 1121.3oc0W8+SiaCE2AHHZt0S6j1e.Q7Ss6PPZKb.ic55QA1p1AW0J6zlNc5jahaqEI1UIt.cm3+48e.6Y6jFWHTfJseXVBj76K9ym26Y+xqch49jjDdLxx47IiHHquyt6DlXXqgXJC09Hj0KsOEmHHwtZQGNYDNIgDfrrV9WjBrJsBRs9m2cHNDy7I4hPnOwo9jOPinhbocZ9azvvSvAjyoQFVucy19bVKdHeLvmks8Piv9WfGPNCKMaIazuhSFhr9Q6c812qAY+cBH3F60XmZd382s+1MB7B5g2MXu5d824M81kzGYs5wATAOtq.KHIHqUNjGLo6P9ULM.ehlP6ERjapg5BHqEeBOLPFhRonVCogAcxRTIH3T5jm1VVm19A6SoAzoxySeeuRgatGlIPqklkdKOC8p8Pzq.JYYPoUzT5U1c8ioiD4Zj74E1sYP0rOFpSlTQaKZokWwtEGrfI1LBeA4jXXyTOpzvyaC2ZddUOnrSYGnZkHbuDG61AyHgItu08yYNOfHZwiFwYvlJqqzWa8paT1wsf0bbp95U+hBLS39.t2bgSo+4BmxIC3LA77gjHR2qnB+g.pE6ugMqqyOTVHkQb6Ol4KnblKmYXi7Ph4gU7yNgM.jBGSpV14akcJEx8wgt97P.Okb2245c8IoK2eRswSsNXp4sYWdeOzFk5gdAd3nSMasktzAGQedraEJ3r2AtT2eNsltYHgMPLDD85WW0ELSRtRZcel9kMSHPnSEjH86102PxYY3OGipWrUwjQvqFQEk7af+bJA+aqszU6BXnVQwLTqaJ38FLke5jjF76Xkfbs3dwgjIkctQUQeBUd4IkVaagCC6AsvpTTgu5AF2KNiKHejUopy2fn9FG26ppe+B0kdTgj3BUKauFOOGqvFG0iDmcyKyPnExr8kV8o0WxWmcLLjyZynhONhjte9MVQooWY+rTFBlJTcydYZ2rCGKDbFhBGRYairJREBle5A8GsOBKvYGFbt.ViHwBpLjrNhbI7oIcqxR1GQRtPvGgrrmVWgv9IB804vRaNwjCWQCDvWrrsBfMCIzACEY6PF.8BMPky5XKeRnvYMacmSSHPnGGhL0sal+pCjtJH5VEMyeKZJN6URpL0J+Mgozd73.RbW5eOaJ+YDS0Mio+p4+Kho0lMlTcORiI8mbdv5T6lOvUg52gh2BqBo3s2kLkdDxnRvZ3dpDQBpQv7L308G+.F7gGLNDKlcZH4LioJfVQyLBhbLCVBULwblxmwHRdycDomJEekcG4i5h43REvQnAy+EbLcvxx1G2uOwWjSvUrO4OWzoHeD3+c9XAkM3TrHlJu7b13ntPk1m.nyjelVdQYI40P8dO4dYFnKgEn1HuljprlbuUpxZYJQQX+X9W80s2kittlRBvIlZL+Rvu2.16V69czifIo+pu+rG08br9h5XiE0wsWTG2YQc7MKpi6tnNt2i6n7G579wBdj9YCBcZmiUeA1x5XFFtAptsh9WfpOVWG

Dark and Bright UI Design

15

2.0k

12.8k

111.3k