---
title: Styling HomeRunner widgets to match your brand
description: There is a dedicated styling reference for each product, listing every class name and theming variable with a plain description of what it styles. Each…
url: "https://homerunner.io/docs/how-do-i-customize-the-styling-of-homerunner-widgets-to-match-my-brand/"
updated: "2026-10-27"
category: Theme and design
---

# Styling HomeRunner widgets to match your brand

There is a dedicated styling reference for each product, listing every class name and theming variable with a plain description of what it styles. Each page is also written so it can be pasted into an AI assistant (Claude, ChatGPT) together with a description of the desired look, and the assistant will write the CSS: HomeRunner plugin (explorer, booking widget, checkout, calendars): [https://homerunner.io/docs/css-class-reference/](https://homerunner.io/docs/css-class-reference/), Conversion Kit: [https://homerunner.io/docs/conversion-kit-styling-reference/](https://homerunner.io/docs/conversion-kit-styling-reference/), Toolkit: [https://homerunner.io/docs/toolkit-styling-reference/](https://homerunner.io/docs/toolkit-styling-reference/), AI Concierge: [https://homerunner.io/docs/ai-concierge-appearance/](https://homerunner.io/docs/ai-concierge-appearance/). Custom rules go in Appearance > Customize > Additional CSS or a snippets plugin such as WPCode, so they survive plugin updates. Note that some Conversion Kit and Toolkit modules ship with protected styling so themes cannot accidentally break them; for those, the guides list the supported path (module settings, CSS variables, or adding !important to a rule). The AI Concierge is themed from its settings screen, with one supported CSS variable for the accent color.