Forum Discussion
Theme Color on Tab Label Text
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.
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);
}Hi there, just to confirm, I won't see this change in my editing window, I would only see this after I have published and have my zip file, and then add this theme folder into it?
That's correct I have some videos showing my recommended process- you need to export your course, add the new folder in the same folder as index.html, then link to your new css file in the index.html file.
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!
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!
Please +1 feature update, the Tab names are completely inaccessible because of my theme colour sigh. I don't know much about .css but gonna see what I can follow above.
