Sidebar is transparent on mobile devices

[regg00]

Describe the bug

When opening the sidebar on a mobile device, the background is completely transparent.

The actual sidebar should look more like this:

Reproduction

Install a sidebar from the blocks section like so pnpm dlx shadcn-svelte@next add sidebar-07 Load the page and open the sidebar on a mobile device or with the Chrome DevTools.

Logs

No response

System Info

System:
    OS: macOS 15.1
    CPU: (8) arm64 Apple M3
    Memory: 110.11 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.5.1 - /opt/homebrew/bin/node
    npm: 10.8.2 - /opt/homebrew/bin/npm
    pnpm: 9.0.5 - /opt/homebrew/bin/pnpm
  Browsers:
    Safari: 18.1
  npmPackages:
    @sveltejs/kit: ^2.8.1 => 2.8.1 
    bits-ui: 1.0.0-next.63 => 1.0.0-next.63 
    formsnap: 2.0.0-next.1 => 2.0.0-next.1 
    lucide-svelte: ^0.454.0 => 0.454.0 
    mode-watcher: ^0.4.1 => 0.4.1 
    svelte: ^5.2.2 => 5.2.2 
    sveltekit-superforms: ^2.20.1 => 2.20.1

Severity

annoyance

[ieedan]

Have you added your sidebar css variables to your app.css and tailwind config?

[regg00]

Well, you are awesome @ieedan.

I did added the CSS variables when I first installed the sidebar component, but it was overwritten when I created a new theme using this page https://next.shadcn-svelte.com/themes

I just copied over the app.css vars from the doc and it fixed the issue.

I'll open a feature request to add the sidebar vars into the theme generator.