Skip to content

Theme Configuration Guide

Jump to bottom
shabib-m edited this page Oct 26, 2026 · 1 revision

Theme Configuration Guide

After enabling the theme, you can fully customize its appearance and behavior. All settings are accessible via the Backdrop admin panel.

📍 Accessing the Settings

  1. Log in to your Backdrop site as an administrator.
  2. Navigate to Appearance > Settings > TailwindCSS (admin/appearance/settings/tailwindcss).
  3. You will find a tabbed interface with the following sections:

🎨 1. Background Settings

This tab allows you to change the background colors of different sections of your site. The theme uses Tailwind CSS utility classes.

  • Site Background (Body): Choose the main background color for your entire site.
  • Header Background: Set a specific background color for the header area.
  • Footer Background: Set a specific background color for the footer area.

Note: The available options include both Light and Dark mode classes (e.g., bg-white dark:bg-gray-900). This ensures that the background automatically adapts when the visitor toggles the Dark Mode.

🌙 2. Dark Mode Settings

The theme includes a fully functional Dark Mode feature.

  • Enable Dark Mode Toggle: Check this box to display a toggle button (Sun/Moon icon) on the front-end of your website.
  • How it works:
    • When enabled, visitors can click the button to switch between Light and Dark modes.
    • The theme uses localStorage to remember the visitor's preference. If they navigate to another page, their choice is saved.
    • If the visitor is browsing for the first time, the theme will automatically detect their Operating System's preference (Light or Dark) and apply it.

🧭 3. Breadcrumbs Settings

Control the navigation trail (Breadcrumbs) that appears on your pages.

  • Show Breadcrumbs: Uncheck this box to completely hide the breadcrumbs from all pages.
  • Hide "Home" Link: Check this box to remove the "Home" link from the beginning of the breadcrumb trail. This is useful if your site logo already links to the home page.

💾 Saving Changes

  • After adjusting the settings, click the Save theme settings button at the bottom of the page.
  • The theme will immediately apply your changes.

Developer Note: If you are developing or customizing this theme, any new Tailwind classes you add to these settings fields must be compiled into the final CSS file. Please refer to the Developer Guide for instructions on running npm run build.

Clone this wiki locally