Froala Editor 3 is here!

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.


Try it yourself:

Dark Theme

Gray Theme

Royal Theme

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-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/gray.min.css" rel="stylesheet" type="text/css" />
<link href="../css/themes/royal.min.css" rel="stylesheet" type="text/css" />

JAVASCRIPT

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

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

  new FroalaEditor('div#eg-royal-theme', {
    // Set royal theme name.
    theme: 'royal'
  })
</script>