AI Hub - Dark Mode

You can adjust the colors for dark mode globally via site settings.

Additionally, each element has separate dark mode color options. Using this option, you can set dark colors for each element separately.

After adjusting the dark mode colors, you can add the Liquid Dark Mode Switch element anywhere on your site.

Note: Some of our demos have already been created to be used in dark mode, but if the dark mode colors are not set in the demo you imported, you need to set them manually.

Disabling Dark Mode & Changing Default Color Mode

You can set the default color mode from Site Settings > Global Colors > Initial page color scheme option.

None: Dark mode is disabled, your site will be displayed in light mode by default.

User system preference: The color scheme will be automatically adjusted according to the theme of each user's browser.

Light: Your site will load in light mode by default.

Dark: Your site will load in dark mode by default.

How to disable it?

Select the color scheme you want your site to be displayed in from the Initial page color scheme option and then remove the dark/light switch element from your header. This way your site will always be displayed in the color scheme you chose.