Theming

Seven themes — or write your own.

Themes are just CSS custom properties applied to the host element — switching one is instant and never re-renders. Preview every built-in theme below, compare two side-by-side, or open the studio to tweak any token and copy the result straight into your app.

Gallery Live preview Compare Customize Use it Authoring Reference
Jump to section

Theme picker & live preview

Pick a theme — the preview below updates instantly. Want to test your own program? Expand the editor and paste it in.

Theme
Edit preview program

Compare two themes

Pick any two themes and see the same content rendered side-by-side. The panes scroll in sync so it's easy to spot differences in spacing, radii, and surface contrast.

light
dark

Customization studio

Tweak any token and watch the live preview update in real time. The studio remembers your edits in localStorage, so you can come back later and keep iterating. Copy the result as a setTheme() call, as raw CSS variables, or download the full JSON.

Copy output


                

              

            

          


          
          

            
 Use it from your app

            

              Every option below hits the same code path — pick the one that
              fits your stack. Built-in names additionally set
              data-rui-theme on the host so the bundled stylesheet can
              layer on theme-specific tweaks (fonts, gradients, animations).
            


            
1. Built-in name (attribute)


<streaming-ui-script theme="neon"></streaming-ui-script>


            
2. JSON token map (attribute)


<streaming-ui-script
  theme='{"colorPrimary":"#16a34a","radiusMd":"14px"}'>
</streaming-ui-script>


            
3. Programmatic setTheme()


const el = document.querySelector("streaming-ui-script");

el.setTheme("dark");

el.setTheme({
  colorPrimary: "#16a34a",
  colorPrimaryHover: "#15803d",
  colorBg: "#f0fdf4",
  radiusMd: "14px",
});


            
4. Host-page CSS variable override


streaming-ui-script {
  --rui-color-primary: #16a34a;
  --rui-radius-md: 14px;
}


            

              
Partial maps are merged on top of light

              

                Only override what you need — everything else falls back to the
                default light theme tokens.
              

            

          


          
          

            
 Author a brand theme

            

              Most brands need to override 4–6 tokens to feel native. Here's a
              minimal recipe; the studio above generates the same shape of object.
            


            

              

                
1
Pick a base

                
Start from light, dark, or skyline depending on whether you need a light or dark surface.

              

              

                
2
Override 4–6 tokens

                
Typically colorPrimary, colorPrimaryHover, radiusMd, and 1–2 chart colors.

              

              

                
3
Name it

                
Save it as a constant in your app so it's importable from anywhere — e.g. brandTheme.

              

              

                
4
Apply & ship

                
Pass it as the theme attribute, or call el.setTheme(brandTheme) after mount.

              

            



// brand-theme.js
export const brandTheme = {
  colorPrimary:      "#16a34a",
  colorPrimaryHover: "#15803d",
  colorBg:           "#f0fdf4",
  radiusMd:          "14px",
  chart1:            "#16a34a",
  chart2:            "#0ea5e9",
};

// app.js
import { brandTheme } from "./brand-theme.js";
const el = document.querySelector("streaming-ui-script");
el.setTheme(brandTheme);


            

              Use the Download JSON button in the studio above to
              export the tokens you just tweaked — the file drops straight
              into a JavaScript module like the one above.
            

          


          
          

            
 Token reference

            

              Every theme token, its corresponding CSS custom property, and what it
              affects. Use the search box to filter by name or description.
            


            

              
              
              
            


            

              

                
                  

                    Token
                    CSS variable
                    Current value
                    Description