Forum Discussion

RachelMiller-20's avatar
RachelMiller-20
Community Member
6 months ago

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.

accessibility
Rise 360
  • TeresaVanderpos's avatar
    TeresaVanderpos
    Community Member
    8 days ago

    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.

     

  • RachelMiller-20's avatar
    RachelMiller-20
    Community Member
    6 months ago

    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!

  • PhilFoss's avatar
    PhilFoss
    Community Member
    6 months ago

    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);
    }

     

    • TeresaVanderpos's avatar
      TeresaVanderpos
      Community Member
      8 days ago

      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?

       

      • PhilFoss's avatar
        PhilFoss
        Community Member
        8 days ago

        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.

  • StevenBenassi's avatar
    StevenBenassi
    Staff
    6 months ago

    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!

Related Content