Styling

Color Themes

The default theme of the WYSIWYG HTML editor can be changed to one that better fits the color palette of your website. You can also create your own theme and customize the rich text editor's interface the way you want using the customizer.

Customizer

The desired theme can be set using the theme option. Don't forget to include the corresponding CSS theme file.

Edit in JSFiddle

HTML

<div id="eg-dark-theme">
  Dark Theme
</div>
<br/>

<div id="eg-red-theme">
  Red Theme
</div>
<br/>

<div id="eg-gray-theme">
  Gray Theme
</div>
<br/>

<div id="eg-royal-theme">
  Royal Theme
</div>

CSS

<!-- Include theme files. -->
<link href="../css/themes/dark.min.css" rel="stylesheet" type="text/css" />
<link href="../css/themes/red.min.css" rel="stylesheet" type="text/css" />
<link href="../css/themes/gray.min.css" rel="stylesheet" type="text/css" />
<link href="../css/themes/royal.min.css" rel="stylesheet" type="text/css" />

JAVASCRIPT

<script>
  $(function() {
    $('div#eg-dark-theme').froalaEditor({
      // Set dark theme name.
      theme: 'dark',
      zIndex: 2003
    })

    $('div#eg-red-theme').froalaEditor({
      // Set red theme name.
      theme: 'red',
      zIndex: 2002
    })

    $('div#eg-gray-theme').froalaEditor({
      // Set gray theme name.
      theme: 'gray',
      zIndex: 2001
    })

    $('div#eg-royal-theme').froalaEditor({
      // Set royal theme name.
      theme: 'royal'
    })
  });
</script>