Skip to content
starlight-llm-actions

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

Section titled “Trigger button”
VariableDefaultControls
--llm-trigger-bgtransparentTrigger button background
--llm-trigger-border1px solid var(--sl-color-hairline)Trigger button border
Section titled “Dropdown panel”
VariableDefaultControls
--llm-bgvar(--sl-color-bg-nav)Dropdown background
--llm-bordervar(--sl-color-hairline)Borders and dividers
--llm-shadowvar(--sl-shadow-lg)Dropdown box-shadow
--llm-radius0.375remBorder radius
Section titled “Menu items”
VariableDefaultControls
--llm-item-hover-bgvar(--llm-border)Item background on hover
--llm-textvar(--sl-color-text)Primary text color
--llm-text-mutedvar(--sl-color-gray-3)Secondary/description text
--llm-accentvar(--sl-color-accent)Focus ring color

Typography

Section titled “Typography”
VariableDefaultControls
--llm-fontvar(--sl-font-system)Font family
--llm-text-smvar(--sl-text-sm)Item label font size
--llm-text-xsvar(--sl-text-xs)Description/section label font size