Dark and Bright UI Design

[ILIAM]

Hey

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

[David 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

[Chazrox]

@ILIAM without opening the snippet, looks good to me. Is it working? I myself use .sendRepaintMessage(); unless its real time. Also, I think 'for in' loops works too but its your preference.

[ILIAM]

@Chazrox Thanks man
Im working on a big project, and Lots of Painting.

var BgColour = [];

then inside an inline, Using
if value = BgColour= Colour.Black
else
BgColour= Colour.White

And Using BgColour on All Compnents and Sending Repaint message?

Is This safe?

[ILIAM]

@Chazrox and One thing
sendRepaintMessage() works on Laf and All components? Panels?

Example:
AllPanels[i].sendRepaintMessage();
AllKnons[i].sendRepaintMessage()

It works like this?

[David Healey]

@ILIAM said in Dark and Bright UI Design:

Sending Repaint message?

Probably don't need this for most components - test it though.

Use const instead of var

[Chazrox]

@ILIAM @d-healey I just double checked this just because.

and .sendRepaintMessage(); works for everything. Looks to be so in the api list.

.repaint(); // asynchronous
.repaintImmediately(); // synchronous / real time
.sendRepaintMessage(); // asynchronous

[ILIAM]

@d-healey @Chazrox Thank you Guys, Will try and report back

[David Healey]

@Chazrox said in Dark and Bright UI Design:

sendRepaintMessage(); works for everything

Sure, but it it needed