<![CDATA[How do I highlight all text on the screen?]]>Certain modules have some brighter and dimmer text. How do I make all the text brighter within a given module?

The reason for this is that I’m running Back Ground Slide Show and certain module text get lost in brighter images.

]]>https://forum.magicmirror.builders/topic/15568/how-do-i-highlight-all-text-on-the-screenRSS for NodeTue, 08 Sep 2026 12:17:31 GMTTue, 21 Sep 2021 22:25:03 GMT60<![CDATA[Reply to How do I highlight all text on the screen? on Thu, 23 Sep 2021 09:15:36 GMT]]>I use the gradient function of MMM-BackgroundSlideshow and have made many adjustments in custom.css. First of all, I made the dimmed text colors a bit lighter:

:root {
  --color-text: #e6e6e6;
  --color-text-dimmed: #f5f5f5;
  --color-text-bright: #ffffff;

}

They can also all three be given the same bright color, e.g. #ffffff for white.

Then I checked each module to see if it used the default fonts, font-weight, and text colors. If not this was changed. For the default calendar, the times were a little darker than the event title. Here are my adjustments:

.calendar .time {
      color: var(--color-text-bright);
      font-weight: 400;
}
]]>https://forum.magicmirror.builders/post/94781https://forum.magicmirror.builders/post/94781Thu, 23 Sep 2021 09:15:36 GMT<![CDATA[Reply to How do I highlight all text on the screen? on Wed, 22 Sep 2021 12:11:23 GMT]]>I use this in my modules. I find it to be very helpful for me.

module.clock {
background-color:rgba(255,255,255,0.5);
border-radius: 8px;
padding: 8px;

The last number in the background color is the brightness for the color
I hope this helps

]]>https://forum.magicmirror.builders/post/94743https://forum.magicmirror.builders/post/94743Wed, 22 Sep 2021 12:11:23 GMT