Docs

Guides and reference for MyOshi Theme Lab.

• Theme Lab How the lab works, previews, snapshots, exporting, and recommended patterns.
• Getting Started What this project is, where to click, and the fastest way to start styling.
• How To - Get Preview HTML How to get the rendered HTML from your MyOshi preview.
• How To - Audit Your Custom Theme How to use the auditing tools to audit your custom theme.
• Tool - Accessibility Audit Audit your theme for common accessibility issues (alt text, accessible names, contrast).
• Tool - Color Converter Convert colors to HEX/RGBA and insert variable snippets into Custom CSS.
• Tool - CSS Blocks Insert pre-made CSS chunks into Custom CSS.
• Tool - Component Styler Generate scoped CSS for common components (cards, navbar, tabs, links).
• Tool - CSS Scope Fixer Rewrite pasted CSS so it works with MyOshi’s automatic selector scoping.
• Tools What the Tools modal is, where to find it, and what each tool does.
• Tool - Quick Theme Builder Guided starter theme generator (palette, spacing, card style, typography, avatar).
• Tool - Schedule Builder Generate a responsive streaming schedule block (HTML + CSS).
• Tool - Theme Variables Generate scoped --vs-* overrides for the base template’s design system.
• Tool - Widget Inserter Insert pre-made widgets (HTML + CSS) into your theme with customizable fields.
• Widgets Pre-made HTML + CSS blocks you can insert into your theme.
• Widget - Info Card Simple heading & content card. Great for “About”, “Rules”, “Credits”, etc.
• Widget - Callout Box A title + body callout with an optional link. Fully scoped to .labw-callout.
• Widget - MyOshi Card (native-looking) A native-looking card that reuses MyOshi’s built-in .card / .card-header / .card-body styles.
• Widget - Notice Glow (native) A native-looking “notice” strip that reuses the base template’s .notice-glow style.
• Widget - Sparkle Divider (native) A themed horizontal divider that matches the base template’s “sparkle” styling.
• Widget - Streaming Schedule (Grid) Responsive 7-day schedule grid. Fill each day with slots using the provided markup.
• Widget - Twitch Buttons Three CTA buttons for Twitch. Delete any you don’t want.
• Templates How demo templates are stored, edited, and added without touching application code.
• Extending Tools & Widgets Developer reference for adding new tool, widget, or CSS block definitions.