Subscribd components are built on four CSS custom properties. Every color, border radius, and font reference in the component markup reads from these variables, so you can restyle the entire UI by adding a single :root block to your global stylesheet. You do not need to publish any views to apply a custom theme.
The four custom properties
| Variable | What it controls | Default |
|---|
--subscribd-primary | Primary buttons, active state indicators, focus rings | Package default |
--subscribd-accent | Hover states, secondary highlights, badges | Package default |
--subscribd-radius | Border radius applied to cards, buttons, and inputs | Package default |
--subscribd-font | Font family used across all component text | Package default |
Applying overrides
Add the :root block to your app’s global stylesheet — typically resources/css/app.css. The overrides take effect immediately for all Subscribd components without a cache clear or view publish.
:root {
--subscribd-primary: #6d28d9;
--subscribd-accent: #7c3aed;
--subscribd-radius: 0.75rem;
--subscribd-font: 'Inter', sans-serif;
}
Place the :root block anywhere in your stylesheet. Because these are CSS custom properties, any value you set here cascades automatically to all Subscribd components in the page.
Common customizations
Match Tailwind theme
Sharp / no-radius UI
Dark palette
If your app uses Tailwind CSS, map the variables to the same color values from your Tailwind config::root {
--subscribd-primary: #0ea5e9; /* sky-500 */
--subscribd-accent: #0284c7; /* sky-600 */
--subscribd-radius: 0.5rem; /* rounded-lg */
--subscribd-font: ui-sans-serif, system-ui, sans-serif;
}
For a flat, sharp-cornered design::root {
--subscribd-primary: #111827;
--subscribd-accent: #374151;
--subscribd-radius: 0rem;
--subscribd-font: 'DM Sans', sans-serif;
}
Dark backgrounds pair well with a lighter primary::root {
--subscribd-primary: #a78bfa;
--subscribd-accent: #c4b5fd;
--subscribd-radius: 0.75rem;
--subscribd-font: 'Inter', sans-serif;
}
Tips
Use the same values as your design system’s primary brand color for --subscribd-primary. Subscribd’s buttons and interactive states will then match the rest of your app without any additional CSS.
--subscribd-accent is typically a slightly darker or lighter shade of your primary color. A 100–200 lightness step in HSL produces good contrast on hover states.
To scope overrides to a single page or layout, apply the custom properties to a container element instead of :root:.billing-section {
--subscribd-primary: #059669;
--subscribd-accent: #047857;
}
If you publish Livewire or Blade views and hard-code color values in the templates, those values will override the custom properties for the affected elements. Keep markup using the variable references to preserve theme control.
