html - How to add theme color to the main container itself in SASS?

Question

I'm following this article Theming Web Apps with SASS to theme components based on dark/light theme. Here's the codepan demo and below is the same code copied:

HTML:

<main id="app-root">

  <div class="theme-light box">
    <div class="app-container">
      <h1 class="title">Light theme</h1>
      <button class="button">A button</button>
    </div>
  </div>

  <div class="theme-dark box">
    <div class="app-container">
      <h1 class="title">Dark theme</h1>
      <button class="button">A button</button>
    </div>
  </div>

</main>

SCSS:

/*
 * Theme definitions
 */

$themes: (
  light: (
    backgroundColor: white,
    textColor: #408bbd,
    buttonTextColor: #408bbd,
    buttonTextTransform: none,
    buttonTextHoverColor: #61b0e7,
    buttonColor: #fff,
    buttonBorder: 2px solid #408bbd,
  ),
  dark: (
    backgroundColor: #222,
    textColor: #ddd,
    buttonTextColor: #aaa,
    buttonTextTransform: uppercase,
    buttonTextHoverColor: #ddd,
    buttonColor: #333,
    buttonBorder: 1px solid #333,
  ),
);

/*
 * Implementation of themes
 */
@mixin themify($themes) {
  @each $theme, $map in $themes {
    .theme-#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}

/*
 * Actual styles for the app
 */



.box{
  width:200px;
  padding: 10px;
  @include themify($themes) {
    border: themed('buttonBorder');
  }
}


#app-root {

  height: 100%;
  display: flex;
  flex-direction: column;
  
  > div {
    display: flex;
    flex: 1;
  }
}

.app-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;

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

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

  .button {
    max-width: 20em;
    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');
      }
    }
  } 
}

I am able to set theme of child components like title, button etc but not able to set theme for box which is at the same level css as theme-light and theme-dark. How can I theme box?

question from:https://stackoverflow.com/questions/65889097/how-to-add-theme-color-to-the-main-container-itself-in-sass

Answer 1

Waitting for answers