Describe the bug

31 Components Call getTheme() But Don't Use It - ThemeProvider Not Working

Description

The ThemeProvider documentation states that components should support theme customization through Svelte's context system. However, 31 out of 141 components (22%) that call getTheme() never actually apply the retrieved theme, making ThemeProvider ineffective for these components.

Components Affected

The following components retrieve theme via getTheme() but don't use it in their clsx() calls:

Navigation & Layout

• TabItem
• Tabs
• SidebarDropdownWrapper
• Sidebar
• BottomNavItem
• NavUl
• NavLi
• Navbar
• PaginationNav
• Carousel
• Table

Form Components

• Timepicker
• Checkbox
• Tags
• FloatingLabelInput
• ButtonToggle
• Dropzone
• Input
• Select
• MultiSelect

Interactive Components

• Tooltip ⚠️ (Main issue - has type variants but ignores theme)
• Button
• DarkMode
• Datepicker
• Clipboard

Display Components

• Progressradial
• Progressbar
• Thumbnails
• TimelineItem
• StepIndicator

Example: Tooltip Component

Current Implementation (Broken)

// Tooltip.svelte (lines 10-12)
const theme = getTheme("tooltip");  // ✅ Theme retrieved

const base = $derived(tooltip({ color, type, class: clsx(className) }));
//                                                    ^^^^^^^^^^^^^^
//                                                    ❌ Theme NOT used!

Working Implementation (Avatar for comparison)

// Avatar.svelte (lines 11, 15-23)
const theme = getTheme("avatar");  // ✅ Theme retrieved

let avatarClass = $derived(
  avatar({
    cornerStyle,
    border,
    stacked,
    size,
    class: clsx(theme, className)  // ✅ Theme IS used!
  })
);

Impact

User Experience

1. Documentation Mismatch: ThemeProvider docs claim it works for all components, but 22% silently ignore it
2. Inconsistent API: Some components respect ThemeProvider, others don't - no way to know without checking source
3. Workarounds Required: Users must use component props (e.g., type="auto" for Tooltip) instead of centralized theming

For Tooltip Specifically

• Users expect global tooltip theme to control light/dark mode appearance
• Instead, must explicitly set type="auto" on every <Tooltip> component
• Default type="dark" makes tooltips always dark regardless of app theme

Steps to Reproduce

1. Create a ThemeProvider with tooltip customization:

<script>
  import { ThemeProvider, Tooltip } from "flowbite-svelte";
  
  const theme = {
    tooltip: {
      base: 'bg-blue-500 text-white'  // This will be ignored
    }
  };
</script>

<ThemeProvider {theme}>
  <Tooltip>Hover me</Tooltip>
</ThemeProvider>

2. Expected: Tooltip has blue background
3. Actual: Tooltip uses default dark gray (theme is ignored)

Root Cause

Components call getTheme() but the returned value is dead code - it's never passed to clsx(). This suggests either:

• Incomplete migration to ThemeProvider system
• Intentional design decision (but undocumented)
• Copy-paste error during component creation

Proposed Solution

Option 1: Fix All Components (Recommended)

Update all 31 components to use the theme in their clsx() calls:

// Before
const base = $derived(tooltip({ color, type, class: clsx(className) }));

// After
const base = $derived(tooltip({ color, type, class: clsx(theme, className) }));

For components with slots:

// Before
<div class={base({ class: clsx(className) })} />

// After  
<div class={base({ class: clsx(theme?.base, className) })} />

Option 2: Document Limitation

If this is intentional, update ThemeProvider docs to list which components DON'T support theming and why.

Option 3: Remove Dead Code

If theming isn't supported, remove the getTheme() calls entirely to avoid confusion.

Environment

• Package: flowbite-svelte@1.18.0
• Verification Method: Automated scan of all .svelte files checking if theme variable is used after getTheme() call

Related Issues

• Better Approach to Global Theming #1488 - Maintainer closed this pointing to ThemeProvider as solution, but many components don't support it

Additional Context

I discovered this when trying to make Tooltips respect light/dark mode. The global theme configuration was completely ignored, requiring the workaround of setting type="auto" on every tooltip instance - defeating the purpose of centralized theming.

The 110 components that DO use theme properly work great, making this inconsistency particularly confusing for developers.

Reproduction

<script>
  import { ThemeProvider, Tooltip } from "flowbite-svelte";
  
  const theme = {
    tooltip: {
      base: 'bg-blue-500 text-white'  // This will be ignored
    }
  };
</script>

<ThemeProvider {theme}>
  <Tooltip>Hover me</Tooltip>
</ThemeProvider>

Version and System Info

System:
    OS: macOS 26.0.1
    CPU: (8) arm64 Apple M1
    Memory: 62.77 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.21.0 - /opt/homebrew/opt/node@22/bin/node
    npm: 10.9.4 - /opt/homebrew/opt/node@22/bin/npm
    pnpm: 10.19.0 - /opt/homebrew/bin/pnpm
    bun: 1.3.1 - /opt/homebrew/bin/bun
    Deno: 2.5.4 - /opt/homebrew/bin/deno
  Browsers:
    Brave Browser: 141.1.83.118
    Firefox: 144.0
    Safari: 26.0.1
  npmPackages:
    @sveltejs/kit: ^2.47.2 => 2.47.2 
    flowbite-svelte: ^1.18.0 => 1.18.0 
    svelte: ^5.41.1 => 5.41.1 
    vite: ^7.1.11 => 7.1.11