Variables

Summary

CSS custom properties (`--main-color: #7E39FE;`) let you define reusable values and update them dynamically, including via JavaScript or media queries. In modern JavaScript, `const` and `let` are usually preferred because block scoping makes variable lifetime easier to reason about and reduces accidental reassignment.

• 1Refactor a stylesheet's hardcoded colors into `:root` custom properties. Validate your understanding by applying it in a small practical example.
• 2Use variables to build a simple light/dark theme toggle. Verify the behavior with realistic data and handle the failure or empty state as well.
• 3Learn variable scoping — they cascade and can be overridden per component.