Skip to main content

​
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