CSS customization

The plugin scopes all its styles to a set of --llm-* custom properties declared on the .sl-llm-actions root element. Every property defaults to the equivalent Starlight design token, so the plugin looks native on any theme without extra configuration.

Override any of them in your site’s custom CSS to retheme the plugin without touching internal selectors:

.sl-llm-actions {
  --llm-bg:     var(--my-surface-card);
  --llm-border: var(--my-border-default);
  --llm-shadow: var(--my-shadow-dropdown);
}

Trigger button

Variable	Default	Controls
--llm-trigger-bg	transparent	Trigger button background
--llm-trigger-border	1px solid var(--sl-color-hairline)	Trigger button border

Dropdown panel

Variable	Default	Controls
--llm-bg	var(--sl-color-bg-nav)	Dropdown background
--llm-border	var(--sl-color-hairline)	Borders and dividers
--llm-shadow	var(--sl-shadow-lg)	Dropdown box-shadow
--llm-radius	0.375rem	Border radius

Menu items

Variable	Default	Controls
--llm-item-hover-bg	var(--llm-border)	Item background on hover
--llm-text	var(--sl-color-text)	Primary text color
--llm-text-muted	var(--sl-color-gray-3)	Secondary/description text
--llm-accent	var(--sl-color-accent)	Focus ring color

Typography

Variable	Default	Controls
--llm-font	var(--sl-font-system)	Font family
--llm-text-sm	var(--sl-text-sm)	Item label font size
--llm-text-xs	var(--sl-text-xs)	Description/section label font size