Angel supports a light and a dark appearance, and one setting decides which your visitors see. The full details are in Dark mode and the color system.

Step 1: Open the color system

  • Select (المتجر وقنوات البيع) [Store & Channels], then (تصميم المتجر) [Store Design], then (تخصيص) [Customize] on Angel's card.
  • Scroll down the settings to the «نظام الألوان» (color system) group.

Step 2: Choose the theme appearance

In «مظهر الثيم» (theme appearance):

  • «فاتح فقط» (light only), the default: the store is always light.
  • «داكن فقط» (dark only): the store is always dark.
  • «تلقائي» (automatic): a toggle appears in the header. The store opens in the appearance the visitor last chose on their device, or, if they have not chosen yet, in their device's appearance.

If your logo is dark and disappears on a dark background, upload a light version of it in «شعار المتجر في المظهر الداكن» (dark-mode logo).

Step 4: Set the dark-mode colors

  • «لون الخلفية الأساسي» (main background): the background of the store, header and footer in dark mode.
  • «لون الخلفية الرمادي» (gray background): the background of some elements and the dividers.
  • «لون النص الأساسي» and «لون النص الفرعي» (main and secondary text): the text colors.

Keep specific parts dark

For a light store with dark parts, turn on any of «شريط علوي داكن» (dark header), «قائمة جوال داكنة» (dark side menu) or «أسفل الصفحة داكن» (dark footer). Some home-page elements also have a «تثبيت المظهر الداكن» (keep dark) option for that element alone.

If the toggle does not show

The toggle only shows with «تلقائي» (automatic), and it is not loaded on landing pages.