Introduction

This LWC uses a set of custom CSS variables and Styling Hooks used to customize the appearance, providing a way to centralize and manage styles in the component.

This enables creating consistent and reusable styles throughout the application and easily change the look and feel of components by adjusting the values of these custom CSS variables and hooks.

Additionally, The .toggle-red selector demonstrates how specific styles can be modified or extended based on different requirements or themes.

There are 2 main techniques used in the LWC:

1. Styling Hooks:

   • Styling hooks are CSS properties that are associated with custom CSS variables. These hooks are used to apply styles to specific elements within the component.
     • For example, --sds-c-card-color-background, --sds-c-card-text-color, --sds-c-button-text-color, etc., are styling hooks in this code.
   • Each styling hook is defined with a specific value, which can be a custom CSS variable or a direct CSS value.

     • For example:

       --sds-c-card-text-color: var(--primary-color);
       --sds-c-card-radius-border: 1.5rem 0;
       

2. Toggle Red Style:

   • The .toggle-red selector is a specific style for a toggle base component. It overrides some of the previously defined styling hooks to customize the appearance of the toggle component with a red color scheme.
   • For instance, -sds-c-checkbox-toggle-color-border-checked, -sds-c-checkbox-toggle-color-background-checked, and -sds-c-checkbox-toggle-color-background-checked-focus are updated with different hexadecimal color values to create a red-themed toggle.

<aside> 📂 You can find the LWC in this folder: force-app\\main\\default\\lwc\\stylingHooks in the Styling tab.

</aside>

<aside> 💡 If you are not familiar with the LWC Styling, review this section Styling LWC.

</aside>

CSS file

The :host selector is used to target the host element of a component, and it is the outermost element in the component's HTML template, representing the component itself.

--primary-color: #e3df00;
--primary-color-alt-shade: #a7a400;
--secondary-color: #020024;
--secondary-color-alt-shade: #343304;

The var function in CSS is used to define a custom variable, that can be used to store values and reused throughout the CSS. The var function takes two arguments: the name of the variable and the value of the variable.

The custom variables used in this component, so for example, the primary-color is defined in the Lightning Design System (LDS).

Let’s examine a usage of these variables:

--sds-c-card-text-color: var(--primary-color);

The code -sds-c-card-text-color: var(--primary-color) uses the var function to set the text color of a card to the value of the primary-color variable defined just above.

This makes it easy to change the color of the card by simply changing the value of the primary-color variable.

Next recipe

LWC GraphqlContacts