> ## Documentation Index
> Fetch the complete documentation index at: https://docs.subscribd.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

> Customise component appearance with CSS variables and published stylesheets

# 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

```bash theme={null}
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:

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

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

```html theme={null}
<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`:

```css theme={null}
/* 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:

```css theme={null}
: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`:

```css theme={null}
: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:

```css theme={null}
/* 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](/components/livewire)** — Component reference
* **[Localization](/components/localization)** — Translate component strings