IT Lab Theme System

Diese Library funktioniert nur mit Vue v3

Theme System für das IT Lab. Festlegung von Farben für den Light und Darkmode, automatisches Festlegen des Farbschemas für alle zukünftigen Seiten des IT Labs. Zusätzliches Setzen von Standardwerten für html und body, sowie das Importieren einer gemeinsamen Font.

Installation

yarn add itlab-theme-system

Importieren des Plugins in der main-Datei

// main.ts
import { createApp } from 'vue';
import App from './App.vue'

import { ITLabThemeSystem } from 'itlab-theme-system';

const app = createApp(App);

app.use(ITLabThemeSystem);

// die primäre Farbe kann direkt im Setup gesetzt werden.
app.use(ITLabThemeSystem, 'red');

// sollte diese im Darkmode nicht so gut zu lesen sein, kann für den Darkmode eine eigene primäre Farbe durch einen extra Parameter mitgegeben werden.
app.use(ITLabThemeSystem, 'red', 'orange');

Um das Farbschema innerhalb einer Komponente zu ändern wird eine globale Funktion bereitgestellt.

<button @click="$setTheme('...')">Theme</button>

Verfügbare Farbschemen

|Name|Beschreibung| |:-|:-| |light (default)|Ein helles Theme mit weißem Hintergrund und schwarzem Text| |dark|Ein dunkles Theme mit schwarzem Hintergrund und weißem Text| |auto|Das Auto Theme, verwendet die präferierte Farbgebung des Endgeräts des Benutzers und wechselt dadurch automatisch mit den Systemeinstellungen des Anwenders.|

Farben

|Name|Hex (Light / Dark)|Beschreibung| |:-|:-|:-| |primary|#DC2626|Primär Farbe (bspw. Links| |itlab|#DC2626|Farbe des IT Lab Logos| |red|#ff3b30 / #ff453a|Rot| |orange|#ff9500 / #ff9f0a|Orange| |yellow|#ffcc00 / #ffd60a|Gelb| |green|#34c759 / #30d158|Grün| |mint|#00c7be / #63e6e2|Minze| |teal|#30b0c7 / #40c8e0|Türkus| |cyan|#32ade6 / #64d2ff|Cyan| |blue|#007aff / #0a84ff|Blau| |indigo|#5856d6 / #5e5ce6|Indigo| |purple|#af52de / #bf5af2|Lila| |pink|#ff2d55 / #ff375f|Pink| |color|#000000 / #FFFFFF|Text Farbe| |color-secondary|#3C3C4399 / #EBEBF599|Text Farbe| |color-tertiary|#3C3C434D / #EBEBF54D|Text Farbe| |color-quaternary|#3C3C432E / #EBEBF52E|Text Farbe| |background|#FFFFFF / #000000|Hintergrund Farbe| |background-secondary|#F2F2F7 / #1C1C1E|Hintergrund Farbe| |background-tertiary|#FFFFFF / #2C2C2E|Hintergrund Farbe| |background-blur|#FFFFFFB8 / #1D1D1FB8|Hintergrund für überdeckende Elemente mit Blur| |background-opaque|#FFFFFFE6 / #1D1D1FE6|Hintergrund für überdeckende Elemente ohne Blur| |border|#C6C6C8 / #38383A|Farbe für Ränder| |border-opaque|#3C3C435C / #545458A5|Farbe für Ränder, die andere Elemente überlappen| |overlay-blur|#FDFDFDCC / #00000099|Hintergrund für Popups mit Blur| |overlay-opaque|#F2F2F2CC / #1E1E1EBF|Hintergrund für Popups ohne Blur| |overlay-background|#00000080 / #00000099|Hintergrundfarbe hinter Popups| |input-field|#7676801F / #7676803D|Farbe für Input-Felder| |input-placeholder|#3C3C4399 / #EBEBF599|Farbe für Platzhalter der Input-Felder|