> ## Documentation Index
> Fetch the complete documentation index at: https://docs.weaverse.io/llms.txt
> Use this file to discover all available pages before exploring further.

# useThemeSettings

> The useThemeSettings hook provides a simple way for Weaverse Hydrogen components to retrieve and utilize the global theme settings.

# useThemeSettings

The `useThemeSettings` hook provides access to the global theme settings within a Weaverse Hydrogen theme, enabling components to adapt to merchant-configured preferences set in Weaverse Studio.

## Import

```tsx theme={null}
import { useThemeSettings } from '@weaverse/hydrogen'
```

## Type

```typescript theme={null}
function useThemeSettings<T = HydrogenThemeSettings>(): T
```

Where `HydrogenThemeSettings` is a flexible object type that contains all your theme's global settings.

## Usage

Call the hook within a React component to get an object containing the current global theme settings:

### Basic example

```tsx theme={null}
import { useThemeSettings } from '@weaverse/hydrogen'

export function GlobalStyle() {
  const settings = useThemeSettings()
  
  if (settings) {
    const {
      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;
            }
          `,
        }}
      />
    )
  }
  return null
}
```

### With TypeScript for type safety

```tsx theme={null}
import { useThemeSettings } from '@weaverse/hydrogen'

type MyThemeSettings = {
  colorPrimary: string;
  colorSecondary: string;
  buttonBorderRadius: number;
  navHeightMobile: number;
  bodyBaseSize: number;
  bodyBaseLineHeight: number;
  // other theme settings
}

export function Header() {
  const settings = useThemeSettings<MyThemeSettings>() 
  
  return (
    <header style={{ 
      height: `${settings.navHeightMobile}rem`,
      backgroundColor: settings.colorPrimary 
    }}>
      {/* Header content */}
    </header>
  )
}
```

### Conditional rendering based on theme settings

```tsx theme={null}
import { useThemeSettings } from '@weaverse/hydrogen'

export function ProductCard() {
  const { showPrices, enableQuickView, productCardStyle } = useThemeSettings()
  
  return (
    <div className={`product-card ${productCardStyle}`}>
      {/* Product image */}
      
      {enableQuickView && (
        <button className="quick-view-button">Quick View</button>
      )}
      
      {showPrices && (
        <div className="price">$99.99</div>
      )}
    </div>
  )
}
```

## How It Works

The `useThemeSettings` hook:

1. Uses React's `useSyncExternalStore` to subscribe to theme setting changes
2. Retrieves settings from the global theme settings store
3. Returns a typed object with all the theme settings

Theme settings are initially loaded from your Weaverse project through the `WeaverseClient` on the server-side, and then synchronized with the client-side store for consistent access throughout your app.

## Related

* [withWeaverse](/api-reference/with-weaverse) - HOC that sets up the theme settings provider
* [Global Theme Settings](/guides/global-theme-settings) - Guide to configuring global theme settings
* [WeaverseHydrogenRoot](/api-reference/weaverse-hydrogen-root) - Main component that initializes Weaverse