{
  "name": "ThemeToggle",
  "category": "Utility",
  "subcategory": null,
  "description": "Dark/light mode toggle button.",
  "thumbnail": "/preview-cards/theme-toggle.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/ThemeToggle/ThemeToggle.razor"
  ],
  "dependencies": [],
  "packageDependencies": [
    "Blazicons.Lucide"
  ],
  "cssVars": [
    "--color-accent",
    "--color-accent-foreground",
    "--color-background",
    "--color-input",
    "--color-ring",
    "--radius"
  ],
  "api": {
    "name": "ThemeToggle",
    "category": "Utility",
    "subcategory": null,
    "description": "Dark/light mode toggle button.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/ThemeToggle/ThemeToggle.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [
      "IDisposable"
    ],
    "parameters": [
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [],
    "records": [],
    "cssVars": [
      "--color-accent",
      "--color-accent-foreground",
      "--color-background",
      "--color-input",
      "--color-ring",
      "--radius"
    ],
    "examples": [
      {
        "title": "Default",
        "code": "<ThemeToggle />"
      },
      {
        "title": "In a Navbar",
        "code": "<Flex Align=\"center\" Justify=\"between\" Class=\"rounded-lg border bg-card px-4 py-2\">\n    <Lumeo.Text As=\"span\" Weight=\"semibold\">My App</Lumeo.Text>\n    <Flex Align=\"center\" Gap=\"2\">\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">About</Button>\n        <ThemeToggle />\n    </Flex>\n</Flex>"
      },
      {
        "title": "With Label",
        "code": "<Flex Align=\"center\" Gap=\"3\" Class=\"rounded-lg border bg-card px-4 py-3\">\n    <ThemeToggle />\n    <Stack Gap=\"0\">\n        <Lumeo.Text Size=\"sm\" Weight=\"medium\">Dark Mode</Lumeo.Text>\n        <Lumeo.Text Size=\"xs\" Color=\"muted\">Toggle light and dark theme</Lumeo.Text>\n    </Stack>\n</Flex>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "theme-toggle",
  "docsUrl": "https://lumeo.nativ.sh/components/theme-toggle",
  "sourceUrl": [
    {
      "file": "UI/ThemeToggle/ThemeToggle.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/ThemeToggle/ThemeToggle.razor"
    }
  ],
  "source": [
    {
      "path": "UI/ThemeToggle/ThemeToggle.razor",
      "content": "@namespace Lumeo\n@using Lumeo.Services\n@using Blazicons\n@implements IDisposable\n@inject ThemeService Theme\n\n<button class=\"inline-flex items-center justify-center h-9 w-9 cursor-pointer rounded-md border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        @onclick=\"ToggleTheme\"\n        title=\"Toggle theme\"\n        @attributes=\"AdditionalAttributes\">\n    @if (_isDark)\n    {\n        <Blazicon Svg=\"Lucide.Sun\" class=\"h-4 w-4\" />\n    }\n    else\n    {\n        <Blazicon Svg=\"Lucide.Moon\" class=\"h-4 w-4\" />\n    }\n</button>\n\n@code {\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private bool _isDark;\n\n    protected override async Task OnAfterRenderAsync(bool firstRender)\n    {\n        if (firstRender)\n        {\n            await Theme.InitializeAsync();\n            _isDark = Theme.IsDark;\n            Theme.OnThemeChanged += OnThemeChanged;\n            StateHasChanged();\n        }\n    }\n\n    private async Task ToggleTheme()\n    {\n        _isDark = !_isDark;\n        await Theme.ToggleModeAsync();\n    }\n\n    private void OnThemeChanged()\n    {\n        _isDark = Theme.IsDark;\n        InvokeAsync(StateHasChanged);\n    }\n\n    public void Dispose()\n    {\n        Theme.OnThemeChanged -= OnThemeChanged;\n    }\n}\n"
    }
  ],
  "slots": [],
  "serviceDependencies": [
    {
      "service": "ThemeService",
      "namespace": ""
    }
  ],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/ThemeToggle/ThemeToggleTests.cs"
  ],
  "mdSummary": "# ThemeToggle\n\nDark/light mode toggle button.\n\n**Package:** `Lumeo` · **Category:** Utility\n**Docs:** https://lumeo.nativ.sh/components/theme-toggle\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| ThemeToggle | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- (none)\n\n## Events\n- (none)\n\n## Sub-components\n- (none)\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- `ThemeService` ()\n\n## Keyboard\n—\n\n## Example\n```razor\n<ThemeToggle />\n```\n\n## CSS variables\n`--color-accent`, `--color-accent-foreground`, `--color-background`, `--color-input`, `--color-ring`, `--radius`\n\n## Files\n- `UI/ThemeToggle/ThemeToggle.razor`\n"
}