• Docs
  • Pro
  • Pricing
  • Templates
  • Releases
IntroductionInstallationThemingStructureContent
AsideAsideLinksAuthFormBlogListBlogPostColorModeAvatarColorModeButtonColorModeImageColorModeSelectColorModeToggleContentSearchContentSearchButtonContentSurroundContentTocDashboardCardDashboardLayoutDashboardModalDashboardNavbarDashboardNavbarToggleDashboardPageDashboardPanelDashboardPanelContentDashboardPanelHandleDashboardSearchDashboardSearchButtonDashboardSectionDashboardSidebarDashboardSidebarLinksDashboardSlideoverDashboardToolbarFooterFooterColumnsFooterLinksHeaderHeaderLinksHeaderPopoverLinksLandingCardLandingCTALandingFAQLandingGridLandingHeroLandingLogosLandingSectionLandingTestimonialMainNavigationAccordionNavigationLinksNavigationTreePagePageBodyPageCardPageColumnsPageErrorPageGridPageHeaderPageHeroPageLinksPricingCardPricingGridPricingToggle
CalloutCardCardGroupCodeBlockCodeGroupCollapsibleFieldFieldGroupShortcutTabs
  1. Pro
  2. Components

ColorModeImage

An <img> with a different src for light and dark mode.

Usage

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Props

darkrequired
string
lightrequired
string
as
string | Record<string, any>
"img"

ColorModeButton

A Button to switch between color mode.

ColorModeSelect

A Select to switch between color mode.

  • Usage
  • Props

Resources

Figma Kit Pro Purchase a license Become an affiliate
  • Figma Kit
  • Playground
  • Roadmap
  • Releases
  • Terms
Purchase Nuxt UI Pro