scss-theming-2-styling.scss

@import 'themes.scss';

.app-container {
  @include themify($themes) {
    color: themed('textColor');  
    background-color: themed('backgroundColor');  
  }

  .title {
    font-family: sans-serif;
    font-weight: lighter;
  }

  .button {
    cursor: pointer;
    border-radius: 5px;
    padding: 15px 32px;
    display: inline-block;
    transition: color 0.1s, border-color 0.1s, background-color 0.1s;

    @include themify($themes) {
      border: themed('buttonBorder');
      color: themed('buttonTextColor'); 
      border-color: themed('buttonTextColor');
      background-color: themed('buttonColor');
      text-transform: themed('buttonTextTransform');

      &:hover {
        color: themed('buttonTextHoverColor'); 
        border-color: themed('buttonTextHoverColor');
        background-color: themed('buttonHoverColor');
      }
    }

  } 
}