CSS Media query pro tmavé nebo světlé uživatelské rozhraní

Tmavý režim se v poslední době hodně prosazuje. Proto jsme do verze 4D v19 přidali jeho podporu a v souvisejícím oznámení jsme zmínili několik způsobů, jak jej můžete přizpůsobit svým potřebám.

V tomto příspěvku na blogu se zaměříme na CSS a podrobně vysvětlíme, jak nastavit styly CSS pro světlý a tmavý režim pomocí dotazů CSS media queries.

Co je mediální dotaz?

V jazyce CSS jsou mediální dotazy užitečné, když chcete upravit vzhled aplikace v závislosti na konkrétních vlastnostech. 4D podporuje funkci prefers-color-scheme media, takže můžete definovat chování dialogového okna ve světlém a tmavém režimu.

DEMO ČAS

Uveďme si příklad. V aplikaci Kontakty takto vypadá vzhled světla v systému MacOS:

Krok 1

Pro změnu vzhledu této aplikace jsme zvolili:

• čtyři barvy pro text a čáry
• tři barvy pro pozadí

Tyto barvy jsme definovali v souboru CSS s názvem „styleSheets.css“. Zde je jeho obsah:

	.accentColor1 {
		stroke: #8594B2;
	}

	.accentColor2 {
		stroke: #DDDDDD;
	}

	.accentColor3 {
		stroke: #EEEEEE;
	}

	.accentColor4 {
		stroke: #C0C0C0;
	}

	.accentBackColor1 {
		fill: #AAAAAA;
	}

	.accentBackColor2 {
		fill: #EEEEEE;
	}

	.accentBackColor3 {
		fill: #444444;
	}

Každá barva má odpovídající třídu s názvem „accentColorX“ nebo „accentBackColorX“.

Poté jsme uvnitř seznamu vlastností přiřadili třídu CSS každému objektu formuláře:

Krok 2

V systému MacOS jsme zapnuli tmavý režim. Zde je výsledek:

Objekty formuláře se automaticky přepnuly do tmavého režimu. Barva popisku Název se však k tmavému pozadí nehodí a světle šedý rámeček se k němu také příliš nehodí.

Musíme změnit nastavenou barvu. Po několika testech máme konečně naše čtyři barvy textu a tři barvy pozadí.

Krok 3

Je čas definovat tyto barvy tak, aby:

• pokud je rozhraní v režimu světla, použije 4D určitou sadu barev
• pokud je rozhraní v tmavém režimu, použije 4D jinou sadu barev

Dotazy na média jsou užitečné, když potřebujete podmíněně použít styly na formuláře. Třídy CSS světlého motivu můžete zabalit do mediálního dotazu s hodnotou nastavenou na světlý a třídy CSS tmavého motivu do mediálního dotazu s hodnotou nastavenou na tmavý:

@media (prefers-color-scheme: light){
	.accentColor1 {
		stroke: #8594B2;
	}

	.accentColor2 {
		stroke: #DDDDDD;
	}

	.accentColor3 {
		stroke: #EEEEEE;
	}

	.accentColor4 {
		stroke: #C0C0C0;
	}

	.accentBackColor1 {
		fill: #AAAAAA;
	}

	.accentBackColor2 {
		fill: #EEEEEE;
	}

	.accentBackColor3 {
		fill: #444444;
	}
}

@media (prefers-color-scheme: dark){
	.accentColor1 {
		stroke: #A1BFFC;
	}

	.accentColor2 {
		stroke: #4C4C4D;
	}

	.accentColor3 {
		stroke: #4D4D4D;
	}

	.accentColor4 {
		stroke: #46484A
	}

	.accentBackColor1 {
		fill: #7F7E7F;
	}

	.accentBackColor2 {
		fill: #444444;
	}

	.accentBackColor3 {
		fill: #CBCACB;
	}
}

A to je to, co dostaneme:

Co dál?

Pokud potřebujete pomoci s CSS v 4D, doporučujeme vám přečíst si tento příspěvek na blogu nebo se podívat na toto 30minutové video ze summitu 4D.

A jako vždy se můžete zapojit do diskuse nafóru 4D .