How to do a bright text shadow when text color is dark and other way?

Question

I have a text with automatic colors from an API, and I want to set a text-shadow of the "opposite" color, for example if the text is white, the text-shadow should be darker (black or dark grey). In css if possible.

<div class="box_content">
    <a href="#">
        <p class="chara_name">Apple</p>
    </a>
</div>

.chara_name {
    color: #fffce9;
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
    /* here i want my text-shadow color to be darker if color is light and the other way around */
}

Answer 1

If you can get the text into an attribute as well you could use a pseudo-element, invert the color and put it behind.

.chara_name {
  color: #fffce9;
}

.chara_name:before {
  content: attr(content-data);
  position: absolute;
  filter: invert(1);
  text-shadow: 2px 0 0 currentColor, -2px 0 0 currentColor, 0 2px 0 currentColor, 0 -2px 0 currentColor, 1px 1px currentColor, -1px -1px 0 currentColor, 1px -1px 0 currentColor, -1px 1px 0 currentColor;
  z-index: -1;
}

<div class="box_content">
  <a href="#">
    <p class="chara_name" content-data="Apple">Apple</p>
  </a>
</div>

But you would still have a problem with the color gray, because gray inverted is still gray.