EidosUI

componentsheadersnavigationtabletabsthemepluginsmarkdownstylestagsutils

eidos.components.theme

Theme switching component for EidosUI

ThemeSwitch(light_icon: str = '☀️', dark_icon: str = '🌙', class_: str = '', variant: Literal['icon', 'text'] = 'icon', **props)

GitHub

Theme switcher button that toggles between light and dark themes.

Works automatically when EidosHeaders(include<em>theme</em>switcher=True) is used.

Features: - Respects system color scheme preference as default - Persists user's choice in localStorage - Updates the data-theme attribute on document root - Changes button icon/text based on current theme

Args:

  • light_icon: Icon/text shown in light mode (default: ☀️)
  • dark_icon: Icon/text shown in dark mode (default: 🌙)
  • class_: Additional CSS classes
  • variant: Display variant - "icon" for just icons, "text" for labels
  • **props: Additional button props

Example:

```python from eidos import EidosHeaders, ThemeSwitch

Head(*EidosHeaders()) # Includes theme switcher by default Body( NavBar(ThemeSwitch()) # Simple icon toggle )

# With custom styling ThemeSwitch(class_="p-3 rounded-lg")

# Text variant ThemeSwitch(variant="text") <code style="background:var(--color-surface);padding:2px 4px;border-radius:4px;"></code>`

Parameters:

  • light_icon: <class 'str'> = ☀️
  • dark_icon: <class 'str'> = 🌙
  • class_: <class 'str'>
  • variant: typing.Literal['icon', 'text'] = icon