Skip to content
Twilight React Playground
ثيم رائدaren

useTheme

hookBeginnerserverbrowserlive demo

Reads the merchant's theme colors, font, theme settings and whether the page reads right-to-left.

import { useTheme, UseThemeResult } from '@salla.sa/twilight-theme-engine/hooks/useTheme';

In plain words

Merchants customise their theme in the Salla dashboard: a primary color, a font, and the settings your theme declares in twilight.json. useTheme() gives a component those choices, so you can style with them instead of hard-coding values.

isRTL tells you whether the page reads right-to-left, which is the case for Arabic.

Signature

function useTheme(): UseThemeResult

interface UseThemeResult {
  color: ThemeColor;          // primary, text, reverse_primary, reverse_text, is_dark
  font: ThemeFont | undefined;
  settings: ThemeSettings;    // the values of your twilight.json settings
  isRTL: boolean;
}

Try it live

The merchant's theme colors, font and settings, as the store answers with them.Try this: switch the language pill (top bar, or the ☰ menu on a phone) to en and watch isRTL change.
Storefront canvas · en · LTR
color.primary #ed1c24
color.text #000000
color.reverse_primary #6e0000

font: Dubai · isRTL: false

settings: {…} 26 keys
font: {…} 5 keys
imageZoom: false
show_tags: true
store_color: "#ed1c24"
homepage_type: "custom"
is_custom_css: true
theme_version: "1.188.0"
footer_is_dark: false
topnav_is_dark: false
important_links: true
store_font_type: "default"
enable_more_menu: true
footer_menu_type: "default"
header_is_sticky: true
header_menu_type: "default"
default_font_name: "خط سلة الافتراضي (جديد)"
translations_hash: "1789908891"
sticky_add_to_cart: true
customization_css_ver: 1778680971
is_more_button_enabled: true
slider_background_size: "cover"
vertical_fixed_products: false
enable_add_product_toast: true
squar_photo_bg_image_size: "cover"
is_show_more_detail_enabled: true
is_breadcrumbs_enabled: true
What a theme writes
import { useTheme } from '@salla.sa/twilight-theme-engine/hooks/useTheme';

export function PrimaryButton({ children }: { children: React.ReactNode }) {
  const { color } = useTheme();
  return (
    <button style={{ background: color.primary, color: color.reverse_primary }}>
      {children}
    </button>
  );
}

Example

app/components/PromoBanner.tsx
import { useTheme } from '@salla.sa/twilight-theme-engine/hooks/useTheme';

export function PromoBanner() {
  const { color, settings } = useTheme();
  // Settings come from twilight.json; always read them with a default.
  const show = (settings as Record<string, unknown>).show_promo_banner ?? true;
  if (!show) return null;
  return <div style={{ background: color.primary, color: color.reverse_primary }}>Free delivery</div>;
}

How it behaves

  • Values come from the store settings the page was rendered with. In development, the dev settings widget can override settings live (see the tooling group).

  • Read custom settings with optional chaining and your own default: a merchant who never opened the settings screen has no value saved.

Related

useStore

Reads the current store (name, logo, settings, contacts…) and can refresh it from the Salla SDK.

Source and docs