Theme Color on Tab Label Text
Mar 26, 2024
I am looking for a way to turn off the default choice of the theme color on tab labels. I chose a color for my course theme that has the proper 4:5:1 contrast for the buttons, etc. in the course, but the selected tabs on my course show the text in the theme color and it appears I am not able to select a different color for that text. It does not have the right level of contrast. Please help! I am not able to find a color with good contrast there, that will also work with things like the ordered lists.
3 Replies
Hi Rachel!
Happy to help with this!
Editing font color for label text isn't currently supported in Rise 360, but I can confirm that this is a feature request we are currently tracking. I've linked this discussion to the feature report and will provide updates if it makes it onto our Feature Roadmap.
Have a great rest of your week!
Rachel, I added a theme component to fix the issue, in this case I just made the tab titles inherit the color specified in your theme for headings- its a css variable. I zipped it up so you can see how the component is added in a new folder called theme.
.blocks-tabs__header .brand--linkColor {
color: var(--color-header-text);
}
Thank you! My coworker showed me another hack for getting that theme color turned off. If you add a picture behind that component (even a subtle one) and uncheck the box that says "Use white background on cards," it will switch the highlighted tab text to black instead of the theme color. However, I then noticed that on my quiz modules, the "start the quiz" button is also displayed in the theme color, and this one I cannot change in any way. I ended up switching my theme color to a brown tone that met accessibility standards and manually adding the former theme colors to different elements in the course. This fixed it, but was a lot of work just because of a few lines of text I couldn't modify, lol. I am happy to hear that this might be considered for future updates of Rise!