Theming

Subscribd’s components are styled with CSS custom properties. Publish the stylesheets and override the variables to match your application’s design system — no view publishing required.

Publishing the stylesheets

php artisan vendor:publish --tag=subscribd-views

This publishes two CSS files to your public/vendor/subscribd/ directory:

subscribd.css — Light mode styles and all variable definitions
subscribd-dark.css — Dark mode overrides

Include them in your layout before your own CSS:

<link rel="stylesheet" href="{{ asset('vendor/subscribd/subscribd.css') }}">

For dark mode support using the prefers-color-scheme media query:

<link rel="stylesheet" href="{{ asset('vendor/subscribd/subscribd.css') }}">
<link rel="stylesheet" href="{{ asset('vendor/subscribd/subscribd-dark.css') }}"
      media="(prefers-color-scheme: dark)">

If your app uses a class-based dark mode toggle (e.g., Tailwind’s darkMode: 'class'), scope the dark file to .dark:

/* In your own stylesheet */
.dark {
    /* Override subscribd vars here, or @import the dark file under .dark */
    --subscribd-color-bg:        #111827;
    --subscribd-color-bg-subtle: #1F2937;
    --subscribd-color-border:    #374151;
}

CSS variables

All component colours, spacing, and typography pull from CSS custom properties on :root. Override them in your own stylesheet:

:root {
    /* Brand colours */
    --subscribd-color-primary:   #4F46E5;
    --subscribd-color-success:   #16A34A;
    --subscribd-color-danger:    #DC2626;
    --subscribd-color-warning:   #D97706;
    --subscribd-color-muted:     #6B7280;

    /* Surfaces */
    --subscribd-color-bg:        #FFFFFF;
    --subscribd-color-bg-subtle: #F9FAFB;
    --subscribd-color-border:    #E5E7EB;

    /* Typography */
    --subscribd-font-sans:       inherit;
    --subscribd-font-mono:       ui-monospace, monospace;

    /* Numeric displays (prices, counters) always use mono */
    --subscribd-font-price:      var(--subscribd-font-mono);

    /* Shape */
    --subscribd-radius:          0.5rem;
    --subscribd-radius-sm:       0.25rem;
}

Only override the variables you want to change. Unset variables fall back to the package defaults.

Dark mode variables

Dark mode variables use the same property names, redefined in subscribd-dark.css:

:root {
    --subscribd-color-bg:        #111827;
    --subscribd-color-bg-subtle: #1F2937;
    --subscribd-color-border:    #374151;
    --subscribd-color-muted:     #9CA3AF;
}

Gradient usage

The brand gradient (--subscribd-gradient-brand) is reserved for accent punctuation — price callouts, plan badges, and CTA highlights. Avoid using it as a background for large areas or body text.

Tailwind integration

If your project uses Tailwind CSS v4, extend your theme with Subscribd’s CSS variables:

/* In your CSS file */
@theme {
    --color-subscribd-primary: var(--subscribd-color-primary);
}

This makes text-subscribd-primary, bg-subscribd-primary, and similar utilities available throughout your app.

Next steps

Livewire Components — Component reference
Localization — Translate component strings

Getting Started

Billing Scenarios

Subscriptions

Gateways

Entitlements

Invoices & Charges

Coupons

Components

Advanced

Theming

Theming

Publishing the stylesheets

CSS variables

Dark mode variables

Gradient usage

Tailwind integration

Next steps

​Theming

​Publishing the stylesheets

​CSS variables

​Dark mode variables

​Gradient usage

​Tailwind integration

​Next steps

Theming

Publishing the stylesheets

CSS variables

Dark mode variables

Gradient usage

Tailwind integration

Next steps