afv-library/skills/applying-slds/guidance/utilities/themes.md

id	title	description	summary	artifact_type	domain	topic	content_format	complexity	audience	tasks	refs	tags	keywords
slds.guidance.utilities.themes	Themes Utilities	SLDS theme utility classes for background and text colors	Utilities for applying color themes including default, shade, inverse, and semantic states (success, info, warning, error, offline).	reference	utilities	themes	structured	intermediate	implementer	implement	slds.guidance.utilities slds.guidance.overview.utilities slds.guidance.hooks.color	utilities themes colors backgrounds	slds-theme background colors semantic colors inverse themes

Themes - Color & Background

Applying consistent color themes to containers and components.

Core Classes

Class	Purpose
slds-theme_default	White background with default text color
slds-theme_shade	Gray background (#F3F3F3) for subtle contrast
slds-theme_inverse	Dark blue background with white text
slds-theme_alt-inverse	Darker blue background variant

Semantic State Themes

Class	Background Color	Text Color
slds-theme_success	Green (#4BCA81)	White
slds-theme_info	Gray-blue (#706E6B)	White
slds-theme_warning	Yellow (#FFB75D)	Black
slds-theme_error	Red (#EA001E)	White
slds-theme_offline	Black (#444)	White

Texture Modifier

Class	Purpose
slds-theme_alert-texture	Adds diagonal striped pattern overlay

Common Patterns

<!-- Card with default theme -->
<div class="slds-card slds-theme_default">
  <div class="slds-card__header">Default themed card</div>
  <div class="slds-card__body">Card content with white background</div>
</div>

<!-- Section with shade background -->
<section class="slds-theme_shade slds-p-around_medium">
  <!-- Gray background for visual separation -->
  <h2>Section Title</h2>
  <p>Content on subtle gray background</p>
</section>

<!-- Success notification banner -->
<div class="slds-theme_success slds-p-around_small">
  <!-- Green background with white text -->
  <span class="slds-icon_container">
    <svg class="slds-icon slds-icon_small">...</svg>
  </span>
  <span>Operation completed successfully</span>
</div>

<!-- Warning alert with texture -->
<div class="slds-theme_warning slds-theme_alert-texture slds-p-around_medium">
  <!-- Yellow background with striped texture -->
  <strong>Warning:</strong> This action cannot be undone
</div>

<!-- Inverse header section -->
<header class="slds-theme_inverse slds-p-around_large">
  <!-- Dark blue background with white text -->
  <h1>Dashboard</h1>
  <p>All text and links are automatically styled for dark backgrounds</p>
</header>

Best Practices

✅ Use slds-theme_default for standard white backgrounds ✅ Apply slds-theme_shade to visually separate sections ✅ Use semantic themes (success, error, warning) for status messages ✅ Combine slds-theme_alert-texture with semantic themes for critical alerts ✅ Apply themes to container elements, not individual text elements ✅ Use slds-theme_inverse for headers and navigation areas

❌ Nest multiple theme classes on the same element ❌ Override theme colors with inline styles ❌ Use semantic themes for decorative purposes ❌ Apply themes to elements smaller than 44×44px touch targets

Deprecation Notes

The following double-dash variants are deprecated but still supported:

• slds-theme--default → Use slds-theme_default
• slds-theme--shade → Use slds-theme_shade
• slds-theme--inverse → Use slds-theme_inverse
• slds-theme--alt-inverse → Use slds-theme_alt-inverse
• slds-theme--success → Use slds-theme_success
• slds-theme--info → Use slds-theme_info
• slds-theme--warning → Use slds-theme_warning
• slds-theme--error → Use slds-theme_error
• slds-theme--offline → Use slds-theme_offline
• slds-theme--alert-texture → Use slds-theme_alert-texture
• slds-theme--inverse-text → Use slds-theme_inverse-text