VBR API Elements

Appearance

Theme (Téma) kezelés ​

Változók ​

Az egyes widget elemek kinézetét css változókon keresztül lehet állítani. A teljes listát itt találod.

Saját Téma beállítása ​

Ha szt szeretnéd, hogy a beállítások minden elemre érvényes legyen akkor azt így lehet beállítani:

css
* {
  --mvw-table-header-font-size: 11px;
}

Részletes leírást a Design System és a CSS Változók menüpontban találasz.

Ha nem minden elemre, hanem csak meghatározott elemekre szeretnél saját beállításokat, akkor elemek stílusát így lehet változtatni:

css
mjsz-vbr-standings,
mjsz-vbr-schedule {
  --mvw-table-header-font-size: 11px;
}

TIP

Az elérhető widgetek (pl.: mjsz-vbr-standings, mjsz-vbr-schedule ) itt találod.

Light/Dark téma kezelése ​

A MJSZ widgetek támogatják a light és dark témát. Alapértelmezés szerint a widget automatikusan igazodik a böngésző vagy operációs rendszer beállításaihoz. Manuálisan is beállíthatod a témát osztály hozzáadásával:

Ha például a html elemhez hozzáadod a dark osztályt, akkor a widgetek sötét témában jelennek meg:

html
<html class="dark">
  <body>
    <mjsz-vbr-standings />
  </body>
</html>

A light téma az alapértelmezett, azt külön nem szökséges beállítani. Ha sötét témát szeretnél használni, add hozzá a dark osztályt a html elemhez. Ha saját megoldásod például a body-hez adja hozzá a dark osztályt akkor is működni fog a váltás.

A saját témádban a light-dark() CSS function segítségével tudod egyszerűen kezelni a világos és sötét témához tartozó értékeket. Például:

css
* {
  --mvw-link-color: light-dark(var(--mvw-color-secondary-700), var(--mvw-color-secondary-400));
  --mvw-link-hover-color: light-dark(var(--mvw-color-secondary-900), var(--mvw-color-secondary-200));
}

Példa Theme ​

Az Erste Liga oldalon ezt a téma beállítást használjuk:

css
body.liga {
  * {
    --mvw-color-primary-50: #f9fafb;
    --mvw-color-primary-100: #f3f4f6;
    --mvw-color-primary-200: #e5e7eb;
    --mvw-color-primary-300: #d1d5db;
    --mvw-color-primary-400: #9ca3af;
    --mvw-color-primary-500: #6b7280;
    --mvw-color-primary-600: #4b5563;
    --mvw-color-primary-700: #374151;
    --mvw-color-primary-800: #1f2937;
    --mvw-color-primary-900: #111827;

    --mvw-color-secondary-50: #e3f2fd;
    --mvw-color-secondary-100: #bbdefb;
    --mvw-color-secondary-200: #90caf9;
    --mvw-color-secondary-300: #64b5f6;
    --mvw-color-secondary-400: #42a5f5;
    --mvw-color-secondary-500: #2196f3;
    --mvw-color-secondary-600: #1e88e5;
    --mvw-color-secondary-700: #1976d2;
    --mvw-color-secondary-800: #1565c0;
    --mvw-color-secondary-900: #0d47a1;
  }
}