White text on light mode @Animations and transitions

[GiammaCarioca]

If you include the mixins heading-2 and heading-3 you get light text on a light background.

I've solved the issue like this:

template
<h2 :class="{ 'light-text': isDarkMode, 'dark-text': !isDarkMode }">Team</h2>

style

h2 {
  /* @include heading-2; */
  font-size: 60px;
  line-height: 86px;
  font-weight: bold;
} 

h3 {
  /* @include heading-3; */
  font-size: 30px;
  line-height: 43px;
  font-weight: bold;
  margin-bottom: 16px;
}

https://github.com/GiammaCarioca/vue-admin-dashboard/commit/5a8780c73f64869b8d7c9472a7a7337a3fe16d0d

Maybe there's a smarter way to go about it? I don't know SASS but maybe you could use a conditional within the mixin... I know you can do something like that on styled components.

[Deleted user]

Hey @GiammaCarioca! Yes styled components is a bit smarter - you can actually use styled-components for Vue. Decided not to go that route for this course since it's not as popular as it is in React, but if you like that way of writing CSS-in-JS I would totally go for it.

As for the way to solve the issue, you did it the right way. Another valid way to do it is like this.

// HTML
<h1 :class="{'dark' : !isDarkMode, 'light' : isDarkMode}">Team</h1>

// SCSS
h1.dark {
  @include heading-3($black);
}
h1.light {
  @include heading-3($white);
}

Using this method here.