1. Docs
  2. API References


Published on Oct 10, 2023, updated 5 months ago

The useThemeSettings hook is an interface for accessing the global theme settings within a Weaverse Hydrogen theme, enabling components to adapt to merchant-configured preferences.


Import the hook from @weaverse/hydrogen package then call it within a React component to get an object containing the current global theme settings.

import { useThemeSettings } from '@weaverse/hydrogen'
export function GlobalStyle() {  let settings = useThemeSettings()  if (settings) {    let {      bodyBaseSize,      bodyBaseLineHeight,      headingBaseSize,      // more settings...    } = settings
    return (      <style        dangerouslySetInnerHTML={{          __html: `            :root {              --body-base-size: ${bodyBaseSize}px;              --body-base-line-height: ${bodyBaseLineHeight};              --heading-base-size: ${headingBaseSize}px;              --height-nav: ${settings.navHeightMobile}rem;            }          `,        }}      />    )  }  return null}

For a deeper understanding of how global theme settings are established and how they interact with the useThemeSettings hook, you can reference the Global Theme Settings article.

Was this article helpful?