Témata

Celodenní práce u počítače přináší nemalou zátěž pro lidské oko. MultiWeb proto již v základu nabízí světlé a tmavé téma.

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.

// _ColorsPalette.less
// Odstíny každé barvy jsou jsou generovány 

// Green
@green--10  : tint(@fifty__green--base, @tint-10);
@green--20  : tint(@fifty__green--base, @tint-20);
@green--30  : tint(@fifty__green--base, @tint-30);
@green--40  : tint(@fifty__green--base, @tint-40);
@green--50  : tint(@fifty__green--base, 0%);
@green--60  : shade(@sixty__green--base, 0%);
@green--70  : shade(@sixty__green--base, @shade-70);
@green--80  : shade(@sixty__green--base, @shade-80);
@green--90  : shade(@sixty__green--base, @shade-90);
@green--100 : shade(@sixty__green--base, @shade-100);

@green: @green--60 @green--50;

...

// Black & White
@white : #FFFFFF;
@black : #000000;
@wb    : @white @black;
@bw    : @black @white;

Zpětná kompatibilita pro 21.00 a starší

Předchozí barevná paleta obsahovala pouze dva odstíny, ze kterých vychází odstíny nové.

@color-name-dark byla přejmenována na @color-name--60 a slouží jako základ k tmavším odstínům 70–100
@color-name-light byla přejmenována na @color-name--50 a slouží jako základ ke světlejším odstínům 10–40

Použití proměnných @color-name je platné i nyní. Například @green je definovaná jako dvojice @green--60 @green--50 a je možné ji nadále beze změny využívat v mixinu .themify(property, @green).

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)

@property : Property ovlivněná tématy
@color    : Barva (nebo jiná hodnota, např. URL obrázku)

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.

.foo {
   .themify(background-color, @pink)
}

.bar {
	.themify(background-color, @pink--30 @pink--70)
}

.qux {
	border: 4px solid;
	.themify(background-color, @pink--20 @pink--80);
	.themify(border-color, @pink--30 @pink--70);
}

/*---  Output pro .foo ---*/

.foo {
    background-color: #c7295d;
}

/* Tmavé */

.theme-dark .foo {
    background-color: #e35484;
}

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".

.themify(@property, @color, @ancestor)
@property : Property ovlivněná tématy
@color    : Barva (nebo jiná hodnota, např. URL obrázku)
@ancestor (nepovinné) : Specifický selektor předka (třída, ID, atribut)

<div class="container">
    <div class="foo"></div>
</div>

.foo {
   .themify(background-color, @green, ~".container");   
}

/*  Výchozí, světlé */

.container .foo {
    background-color: #34bc34;
}

/* Tmavé */

.theme-dark.container .foo {
    background-color: #5ecf5e;
}

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 var(--stripe-width) 0; @green);  
}

Tip

Proměnnou var(--stripe-width) použijte pro výšku nebo šířku barevného proužku.

/*  Výchozí, světlé */

.foo {
    box-shadow: inset 0 var(--stripe-width) 0 #18ec82;
}

/* Tmavé */

.theme-dark .foo {
    box-shadow: inset 0 var(--stripe-width) 0 #51fb98;
}

dev