Theme Editor (Admin) - Adjust Color for Icons Under RCE

[RachelSalmon]

Hello,

We are editing our Theme in Canvas and noticed an issue with our color scheme and the features that are tied together in the theme editor. Our university's color scheme includes blue and yellow. We set our primary button color to be our specific shade of yellow with blue text on it. However, we found that the color of the icons under the RCE (keyboard shortcut, accessibility checker, word count, etc.) are tied to that primary button color. In our situation, this makes them yellow which is very inaccessible on a white background. Is there a way to make those icons a different color from the primary button color using custom coding or is that something that can be dissociated from each other?  

[Chris_Hofer]

@RachelSalmon ...

That seems pretty strange.  In our "Theme" page, our primary button color is a really dark gray (almost black), and the icons you are referring to on the bottom right corner of the RCE are still white.  They don't change color based on the primary button color.  Also, I have access to a separate Canvas environment where the primary button color is blue...yet there is no blue color on those icons under the RCE.

What happens if you try and change the yellow color for the primary button to a different hex code color.  Do those icons change color under the RCE?

You may need to reach out to Canvas tech support for this one...because that doesn't seem like normal Canvas behavior.

Please keep us posted...thanks!

[RachelSalmon]

I did try testing it out in the theme editor and when I change the primary button color, those RCE icons change. I'll reach out to Canvas Support and see if there's anything on their end they can adjust. Thanks for letting me know that it can and likely is usually, different. I'll update!

[RachelSalmon]

Hi Chris,

I wanted to come back to this and see if in your instance if there is any custom CSS that might be used to have your RCE icons be a different color from your button. I reached out to Canvas support and they suggested seeing if it can be customized on the back end but our CSM said to try CSS. I figured since yours is definitely behaving differently I would ask. Thanks!

[Chris_Hofer]

Hi @RachelSalmon ...

For our College's custom CSS file (via the "Themes" page in Canvas), we do have some custom CSS, but I don't believe any of it would be related to the icons.  We have Cidi Labs' DesignPLUS integrated with Canvas, and one or two other things (if memory serves...I'm at home right now, so I can't check for certain).  But, I don't think there's anything related.  Also, in my other Canvas environment I have access to, I just looked, and there is no custom CSS at all.  (This environment does not use DesignPLUS.)

[chriscas · Accepted solution]

Hi @RachelSalmon,

The following css may help a bit:

.canvas-rce__skins--root.rce-wrapper span span button span span {
color:#000000;
}

Note: you can set the color to whatever you'd like, I just did black to ensure I could see that this worked.

I tried this is a few places (announcements, assignments, pages) and it did seem to work in all of those areas.  I would not expect it to work in New Quizzes though, since that's technically an external tool where normal Canvas CSS doesn't apply.  I'm also not 100% sure if there will be any other elements unexpectedly altered by this CSS or not.  Someone else in the Developers Group may have a better suggestion, so I'll move this thread over there.

Long-term, I think this needs to be an Instructure fix to theming though, as we should not have to resort to CSS (which can break with future Canvas updates) for what I feel is a core functionality need.  This is just my opinion...

Hope this helps a bit.

-Chris

[RachelSalmon]

Thank you so much Chris! I agree there needs to be some more expanded customization in the text colors. We were really hesitating to change the primary button color since a lot of our screenshots and documentation mention "the yellow ____ button" so I will keep my eyes out on anything it may not apply to and I also appreciate you moving the thread to the developers group to see if there's more that can be done. 

[chriscas]

Hi @RachelSalmon,

I see this too in one of the Canvas instances I manage.  It doesn't seem like this is going to be an easy one to fix even with custom CSS.  I think ultimately, making a new theme color selection for this, or just having those buttons be the standard text color (although I know they won't stand out as much then) may be the best ways forward.  You can submit this to the ideas area of the community for Instructure to evaluate as a future Canvas enhancement.

For now, if at all possible, I'd suggest using a different primary button color (maybe swap with your secondary if that is darker).

-Chris

[eschiebel]

While the solution suggested here will work, it might not in the future. Canvas should do the right thing so you don't have to muck about with CSS. I will look into fixing this in the RCE.

[RachelSalmon]

Hi @eschiebel 

Thank you! I did add the custom CSS code that was offered but it wasn't all encompassing of the text that follows the primary color button. We noticed that in Discussions and Announcements, the "Attach" option was still the same color of the primary button. If there's a way to fix it so that any text/icons aren't attached to the primary button color, that would be fantastic since I know the CSS isn't always the best option. 

[eschiebel]

I'll get that button too when I fix this.

[eschiebel]

I fixed the buttons below the RCE so they are black and not based on the current theme. This change is currently in beta, and will go to production next week.
The same is true for the "Attach" button in discussion replies.

[RachelSalmon]

That's awesome, thank you!