# chrome (/themes/sdk/reference/chrome) ```ts import { … } from '@poltura/theme-sdk/chrome'; ``` ## [Hooks](/themes/sdk/reference/chrome/hooks) [#hooks] | Name | What it is | | --- | --- | | [`useHeader`](/themes/sdk/reference/chrome/hooks#useheader) | The data a header draws from: categories, languages, the signed-in shopper and how the header scrolls. | | [`useLocaleSwitcher`](/themes/sdk/reference/chrome/hooks#uselocaleswitcher) | The language choice. | | [`useCurrencySwitcher`](/themes/sdk/reference/chrome/hooks#usecurrencyswitcher) | The currency choice. | | [`useStorefrontSwitcher`](/themes/sdk/reference/chrome/hooks#usestorefrontswitcher) | The storefront choice. | | [`useMobileMenu`](/themes/sdk/reference/chrome/hooks#usemobilemenu) | The mobile menu's state, shared by every component on the page: the button that opens it and the drawer that shows it. | | [`useHeaderVisibility`](/themes/sdk/reference/chrome/hooks#useheadervisibility) | The header's scroll state. | | [`usePromoBar`](/themes/sdk/reference/chrome/hooks#usepromobar) | The announcement strip's text and link, live while the merchant edits it. | ## [Parts](/themes/sdk/reference/chrome/parts) [#parts] | Name | What it is | | --- | --- | | [`Brand`](/themes/sdk/reference/chrome/parts#brand) | The store's logo linking home, with the dark-scheme logo under a dark colour scheme, or its initial and name when it has none. | | [`Logo`](/themes/sdk/reference/chrome/parts#logo) | The store's logo at a set width, with its dark-scheme variant, falling back to the store's name. | | [`ColorModeToggle`](/themes/sdk/reference/chrome/parts#colormodetoggle) | Switches the storefront between light and dark, with the transition the theme sets. | ## [Defaults](/themes/sdk/reference/chrome/defaults-1) [#defaults] | Name | What it is | | --- | --- | | [`LocaleSwitcher`](/themes/sdk/reference/chrome/defaults-1#localeswitcher) | The complete language and currency switcher: each group shows only when it offers a choice, and with neither it draws nothing. | | [`CurrencySwitcher`](/themes/sdk/reference/chrome/defaults-2#currencyswitcher) | The currency switcher on its own, drawn only when the storefront offers more than one currency. | | [`MobileMenu`](/themes/sdk/reference/chrome/defaults-3#mobilemenu) | The mobile menu drawer: open while [`useMobileMenu`](/themes/sdk/reference/chrome/hooks#usemobilemenu) says so, closed when a link in it is followed or the page changes. | | [`PromoBar`](/themes/sdk/reference/chrome/defaults-3#promobar) | The announcement strip above the header, drawn only while it is on and has text. | | [`UserMenu`](/themes/sdk/reference/chrome/defaults-4#usermenu) | The account button and its menu: sign in and register for guests; the account, the orders and sign out once signed in. | | [`LocaleBanner`](/themes/sdk/reference/chrome/defaults-5#localebanner) | Suggests a storefront or a language. | | [`Header`](/themes/sdk/reference/chrome/defaults-5#header) | The store's header: the promo bar and the header section group in the pinned box the header's scroll settings drive. | | [`Footer`](/themes/sdk/reference/chrome/defaults-5#footer) | The store's footer: the footer section group as the merchant arranged it. | ## [Types](/themes/sdk/reference/chrome/types) [#types] | Name | What it is | | --- | --- | | [`HeaderSticky`](/themes/sdk/reference/chrome/types#headersticky) | How the header behaves as the page scrolls, as the merchant set it. | | [`HeaderData`](/themes/sdk/reference/chrome/types#headerdata) | What a header draws from, so a theme's header takes no props. | | [`LocaleSwitcherState`](/themes/sdk/reference/chrome/types#localeswitcherstate) | Language choice state. | | [`LocaleSwitcherProps`](/themes/sdk/reference/chrome/types#localeswitcherprops) | Props of [`LocaleSwitcher`](/themes/sdk/reference/chrome/defaults-1#localeswitcher). | | [`CurrencySwitcherState`](/themes/sdk/reference/chrome/types#currencyswitcherstate) | Currency choice state. | | [`CurrencySwitcherProps`](/themes/sdk/reference/chrome/types#currencyswitcherprops) | Props of [`CurrencySwitcher`](/themes/sdk/reference/chrome/defaults-2#currencyswitcher). | | [`StorefrontChoice`](/themes/sdk/reference/chrome/types#storefrontchoice) | A market. | | [`StorefrontSwitcherState`](/themes/sdk/reference/chrome/types#storefrontswitcherstate) | Storefront choice state. | | [`MobileMenuState`](/themes/sdk/reference/chrome/types#mobilemenustate) | The mobile menu's state, shared by the button that opens it and the drawer that shows it. | | [`MobileMenuProps`](/themes/sdk/reference/chrome/types#mobilemenuprops) | Props of [`MobileMenu`](/themes/sdk/reference/chrome/defaults-3#mobilemenu). | | [`HeaderVisibility`](/themes/sdk/reference/chrome/types#headervisibility) | Header scroll state. | | [`PromoBarState`](/themes/sdk/reference/chrome/types#promobarstate) | The announcement strip above the header, as the merchant wrote it. | | [`PromoBarProps`](/themes/sdk/reference/chrome/types#promobarprops) | Props of [`PromoBar`](/themes/sdk/reference/chrome/defaults-3#promobar). | | [`BrandClasses`](/themes/sdk/reference/chrome/types#brandclasses) | Class names for the pieces of [`Brand`](/themes/sdk/reference/chrome/parts#brand). | | [`BrandProps`](/themes/sdk/reference/chrome/types#brandprops) | Props of [`Brand`](/themes/sdk/reference/chrome/parts#brand). | | [`LogoProps`](/themes/sdk/reference/chrome/types#logoprops) | Props of [`Logo`](/themes/sdk/reference/chrome/parts#logo). | | [`UserMenuProps`](/themes/sdk/reference/chrome/types#usermenuprops) | Props of [`UserMenu`](/themes/sdk/reference/chrome/defaults-4#usermenu). | | [`LocaleBannerProps`](/themes/sdk/reference/chrome/types#localebannerprops) | Props of [`LocaleBanner`](/themes/sdk/reference/chrome/defaults-5#localebanner). | | [`ColorModeToggleProps`](/themes/sdk/reference/chrome/types#colormodetoggleprops) | Props of [`ColorModeToggle`](/themes/sdk/reference/chrome/parts#colormodetoggle). |