TVML text color styles won't apply, why?

Question

Created Feb ’21

Replies 1

Boosts 0

Participants 1

Code Block <document>
  <head>
    <style>
      .background {
        background-color: rgb(33, 33, 33);
      }
       
      .info-text {
        color: rgba(255, 255, 255, 1.0);
      }
    </style>
  </head>
  <stackTemplate class="background">
    <banner>
      <title class="info-text">Test</title>
    </banner>
  </stackTemplate>
</document>

The background color works just fine, but the .info-text class won't. I tried with inline-styles
<title style="color:rgb(255,255,255,1.0)"></title>

Tried with HEX colors, won't work.

Checked the documentation and <title> is an element that uses colors.

Also tried deleting the background color and just applying the text color to the title element. Does not work neither.

If I were to apply other kind of styles to the <title> element it would apply. Let's say text-align: left would work.

I don't know what am I missing here...

Answered by aeum3893 in 661325022

Code Block <stackTemplate theme="dark" class="background">

this would do it:

There's a theme property that a template element can take. This theme defaults to "light", and by change it's value to "dark" it would make the text color lighter.
Combining this with setting the background-color style property of the template element would do the trick. To get you a light text and a background color of your choice.

Boost

Answer 1

aeum3893 OP

Feb ’21

Accepted Answer

Code Block <stackTemplate theme="dark" class="background">

this would do it:

There's a theme property that a template element can take. This theme defaults to "light", and by change it's value to "dark" it would make the text color lighter.
Combining this with setting the background-color style property of the template element would do the trick. To get you a light text and a background color of your choice.

0