Témata

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.

// 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;
}