@mixin themed($property, $light-value, $dark-value) {

[data-theme="light"] & {
  #{$property}: $light-value;
}
[data-theme="dark"] & {
  #{$property}: $dark-value;
}

}

theme-toggler:before {

@include themed(content, "🌙", "🌞");

}

.navbar-themed {

.navbar-brand,
.navbar-nav .nav-link.active {
  @include themed(color, $text-black, $text-white);
}
.navbar-nav .nav-link {
  @include themed(color, rgba($text-black, 0.5), rgba($text-white, 0.5));
}

}

.text-themed {

@include themed(color, $text-black, $text-white);

}

.bg-themed {

@include themed(background-color, $light, $dark);

}