if not, figure the html path to get there and use that

either in custom.css

each entry for magicmirror
starts with the module name as a class

.modulename xxxx {
   styles
}

xxx is a selector clause (selects the elements the enclosed styles will apply to
they can be quite explicit…
here is one from my MMM-Config module, to hide a generated element I don’t want to show

.possibly-hidden-tab div:nth-child(2)  > div > div >div >ul >li:only-child >a[rel*="Item 1"] {
  display: none;
}

I use this to remind me of the css selector clause elements
https://www.w3schools.com/cssref/css_selectors.php

there is currently no selector clause attribute that can examine the text content of an element… there is a spec proposal to extend .has() to allow text elements…

Any idea how I can change the text color of one specific word in this module?

I want “peak” to be red, “shoulder” yellow, and “off-peak” green.

I messed around with the custom.css file, but it doesnt look like it accepts conditional formatting.

.MMM-homeassistant-sensors .dimmed {
  color: #FFFFFF;
}

.module.MMM-homeassistant-sensors .dimmed {
color: #FFFFFF;
}
that one is wrong for sure

wrapper.className = 'dimmed small';

.module.MMM-homeassistant-sensors .dimmed {
  color: #FFFFFF;
}

and

wrapper.className = 'dimmed small';

.MMM-homeassistant-sensors .dimmed {
  color: #FFFFFF;
}

try a space between the module name and the .dimmed

I tried what you suggested and it didn’t seem to have an effect. Is there something that i need to do in the /css/main.css to make the /css/custom.css load?

.MMM-homeassistant-sensors {

u need the class name of the text… u are going to override the class values…

wrapper.className = ‘dimmed small’;

.MMM-homeassistant-sensors.dimmed {
color: #FFFFFF;
}