How do I change the default text highlighting color in Summernote?

I’m building a Rails app capable of displaying text with rich formatting – the app will be used by non-technical personnel, so using markdown is not possible.

Therefore, I’ve decided to use Summernote as a WYSIWYG editor.

However, the default highlighting color (the background color option) that is shown when the summernote is initialized is yellow which really conflicts with the color scheme of my app. Any idea how I can reset it so that the default color is whatever I want it to be?

I thought of editing the CSS class to have the correct coloring, but it appears that Summernote applies background color styles via inline style tags – not the best for editability.

If I can’t change the default color, then any way that I can force-change the color using some other custom JS?

Update:

I dug into the page source and found that Summernote uses the data-backcolor to set the highlight color. I then used JS to set that value whenever the page loads.

But it would still be nicer (or more elegant, I think) to do it using an option on Summernote itself. I’ll leave this question open for a day or two in case anyone knows how to do it using Summernote itself, before posting my JS solution.

Summernote themes might be what I’m looking for, but I’ll have to look into it further to make sure. Thanks @razvans

Update 2:

I apologize to everyone that viewed this question, but I had worded it badly :(.

I was referring to the color used to highlight text in summernote (which summernote refers to as the background color of the text) – I wasn’t referring to the color of the editor itself.

Again, sorry about that. 🙁

Answer

I dug into the page source and found that Summernote stores the highlighting color in the data-backcolor attribute. It also marks the highlighting button element with data-original-title="Recent Color". So, I used those to change the default color with JS:

First, I selected the button and changed the color it would highlight text with. I also changed the background of the button itself to better reflect what the color would be:

$('[data-original-title="Recent Color"]').each ->
  $(this).attr "data-backcolor", "#F7C6CE"
  $(this).attr "style", "background-color: rgb(247, 198, 206);"

Then, I also changed the background of the icon within the button, so that it blended into the button (instead of being a white square within the button):

$('i.note-recent-color').each ->
  $(this).attr "style", "background-color: rgb(247, 198, 206);"

Finally, I removed the option to select new highlighting colors, since that wasn’t needed in my application and would only serve to confuse the person using it. The button for selecting new colors was given the data-original-title="More Color" attribute:

$('[data-original-title="More Color"]').each ->
  $(this).attr "style", "display: none;"