SCSS— Implement styles for multiple themes with the @content directive

Modern websites usually have more than one theme, e.g. light and dark themes. They have different set of preset colors and they can be toggled between each other in runtime. The simplest way to implement this use case is to have different sets of theme colors predefined as SCSS variables and use wrapper classes to apply them.

$theme-light: (
  primary: #4287f5,
  secondary: #666666
);
$theme-dark: (
  primary: #f542b6,
  secondary: #c9c9c9
);