Definice barvy
Aby přepínání mezi tématy mohlo proběhnout na jedno kliknutí, nese v každá proměnná barvy dvě složky – barvu pro světlé téma a barvu pro tmavé téma.
// Colors.less
@green-dark: hsl(150, 85%, 51%);
@green-light: hsl(145, 95%, 65%);
@green: @green-dark @green-light;
@white: #FFF;
@black: #000;
@wb: @white @black;
@grey-3-light: #EEEEEE;
@grey-3-dark: #424242;
@grey-3: @grey-3-light, @grey-3-dark;
// MyComponent.less
@my-first-component-bg: @green;
@my-second-component-bg: @wb;
@my-third-component-bg: @white @grey-3-dark;
Themify
Protože barva nese dvě složky, je pro přiřazení hodnoty k CSS property ovliněné tématy nutné využít připravený mixin.
.themify(@property, @color, @ancestor)
@property: Property ovlivněná tématy
@color: Barva (nebo jiná hodnota, např. URL obrázku)
@ancestor (nepovinné): Třída nebo ID předka
Princip
Mixin vygeneruje selektory kombinující třídy témat theme-light
a theme-dark
buďto na nejvyšším elementu s libovolnou třídou nad daným elementem nebo třídy tématu nad elementem samotným.
V MultiWebu je ke změně tématu celé aplikace využito elementu <html>
, který má právě pro lepší práci se selektory ve stylech přiřazenu třídu html
.
Barva písma Pokud vaše aplikace musí splňovat WCAG 2.0, MultiWeb automaticky vygeneruje kontrastní barvu.
<div class="foo"></div>
<div class="bar"></div>
<div class="qux"></div>
.foo {
.themify(background-color, @my-first-component-bg);
}
.bar {
.themify(background-color, @my-second-component-bg);
}
.qux {
.themify(background-color, @my-third-component-bg);
}
/*--- Output pro .foo ---*/
/* Výchozí, světlé */
.foo {
background-color: #18ec82;
}
/* Tmavé */
.theme-dark .foo {
background-color: #51fb98;
}
Předchůdce
K aplikování tématu na základě konkrétní třídy je možné využít parametru @ancestor
. Selektor uvoďte do zástupných znaků ~".ancestor"
.
<div class="container">
<div class="foo"></div>
</div>
.foo {
.themify(background-color, @green, ~".container");
}
/* Výchozí, světlé */
.container .foo {
background-color: #18ec82;
}
/* Tmavé */
.theme-dark.container .foo {
background-color: #51fb98;
}
Tip Pro selektory velikostí displeje použijte proměnné @phone
, @tablet
nebo @desktop
. Zápis mixinu potom vypadá následovně:
.foo {
.themify(background-color; @green; ~"@{phone}");
}
Obrázek
Property ovlivněná tématem nemusí být barva, ale také například obrázek ovlivňující design, zejména logo.
<div class="foo colored">
<div class="img"></div>
</div>
<div class="foo greyscale">
<div class="img"></div>
</div>
.foo {
&.colored {
.themify(background-color; @purple);
.img {
.themify(background-image, url("../img/mw-logo-white.svg") url("../img/mw-logo-black.svg"));
}
}
&.greyscale {
border: 1px solid;
.themify(border-color, @bw); // @bw: @black @white
.img {
.themify(background-image, url("../img/mw-logo-black.svg") url("../img/mw-logo-white.svg"));
}
}
.img {
width: var(--base-8);
height: var(--base-8);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
}
Stín
Pro aplikování tématu na property box-shadow využijte následující mixin. Box-shadow totiž není složen pouze z barvy, ale také z vlastností samotného stínu.
.themifyShadow(@settings, @color)
@settings: inset|initial|inherit | h-offset v-offset blur spread
@color: Barva
.foo {
.themifyShadow(inset 0 @stripe-width 0; @green);
}
Tip Proměnnou @stripe-width
použijte pro výšku nebo šířku barevného proužku.
/* Výchozí, světlé */
.foo {
box-shadow: inset 0 3px 0 #18ec82;
}
/* Tmavé */
.theme-dark .foo {
box-shadow: inset 0 3px 0 #51fb98;
}