Theming

Custom Widgets laufen in einem eigenen isolierten iframe. Dein CSS gilt nur innerhalb deines Widgets und nichts von außen funkt dir rein, du startest also auf einer leeren Seite mit transparentem Hintergrund.

Transparenz

Der Widget-Hintergrund ist transparent, damit in OBS nur deine Inhalte sichtbar sind. Setze background nur auf Elemente, die wirklich eine Fläche zeigen sollen.

Anpassbarkeit über Settings

Kombiniere CSS-Variablen mit Settings, damit Streamer Farben und Größen im Dashboard anpassen können, ohne Code zu ändern:

:root {
  --accent: #7c6dfa;
  --size: 24px;
}

.counter {
  color: var(--accent);
  font-size: var(--size);
}

overlay.onSettingChange('accentColor', (value) => {
  document.documentElement.style.setProperty('--accent', value);
});

overlay.onSettingChange('fontSize', (value) => {
  document.documentElement.style.setProperty('--size', `${value}px`);
});

Schriften

Eigene Fonts lädst du wie gewohnt per @font-face oder über einen Font-CDN im HTML-Tab.