itlab-theme-system v4.0.3

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

Farben