Szöveg

A widgetek használják a CSS változokat, sok esetben a CSS utility class segítségével:

Szöveg

Text Pale

Text Faded

Text Dimmed

Text Muted

Text Toned

Text Default

Text Highlighted

Text inverted

Minden utility class és komponens CSS változót használ a világos és sötét módok színének beállításához:

:host {
  --mvw-text-pale: light-dark(var(--mvw-color-primary-100), var(--mvw-color-primary-700));
  --mvw-text-faded: light-dark(var(--mvw-color-primary-200), var(--mvw-color-primary-600));
  --mvw-text-dimmed: light-dark(var(--mvw-color-primary-400), var(--mvw-color-primary-500));
  --mvw-text-muted: light-dark(var(--mvw-color-primary-500), var(--mvw-color-primary-400));
  --mvw-text-toned: light-dark(var(--mvw-color-primary-600), var(--mvw-color-primary-300));
  --mvw-text-default: light-dark(var(--mvw-color-primary-700), var(--mvw-color-primary-200));
  --mvw-text-highlighted: light-dark(var(--mvw-color-primary-900), var(--mvw-color-primary-50));
  --mvw-text-inverted: light-dark(var(--mvw-color-white), var(--mvw-color-primary-950));
}

A fájlodban ezeket a CSS változókat testreszabhatod

* {
  --mvw-text-highlighted: light-dark(var(--mvw-color-black), var(--mvw-color-white));
}

Háttér

Hátter

Default

Muted

Elevated

Accented

Highlighted

Inverted

A háttérszínek esetén is használhatod a világos és sötét módok színének beállításához:

:host {
  --mvw-bg-default: light-dark(var(--mvw-color-white), var(--mvw-color-primary-950));
  --mvw-bg-muted: light-dark(var(--mvw-color-primary-50), var(--mvw-color-primary-900));
  --mvw-bg-elevated: light-dark(var(--mvw-color-primary-100), var(--mvw-color-primary-800));
  --mvw-bg-accented: light-dark(var(--mvw-color-primary-200), var(--mvw-color-primary-700));
  --mvw-bg-highlighted: var(--mvw-color-secondary-500);
  --mvw-bg-inverted: light-dark(var(--mvw-color-primary-900), var(--mvw-color-primary-50));
}

A fájlodban ezeket a CSS változókat testreszabhatod

* {
  --mvw-bg-highlighted: light-dark(var(--mvw-color-black), var(--mvw-color-white));
}

Keret

A keret színek esetén is használhatod a világos és sötét módok beállításához:

:host {
  --mvw-border-faded: light-dark(var(--mvw-color-primary-100), var(--mvw-color-primary-800));
  --mvw-border-muted: light-dark(var(--mvw-color-primary-200), var(--mvw-color-primary-700));
  --mvw-border-highlighted: var(--mvw-color-secondary-500);
}

A fájlodban ezeket a CSS változókat testreszabhatod

* {
  --mvw-border-highlighted: light-dark(var(--mvw-color-black), var(--mvw-color-white));
}

Link

A link színt is testreszabhatod:

:host {
  --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));
}

A fájlodban ezeket a CSS változókat testreszabhatod

* {
  --mvw-link-color: light-dark(var(--mvw-color-white), var(--mvw-color-black));
  --mvw-link-hover-color: light-dark(var(--mvw-color-primary-100), var(--mvw-color-primary-800));
}