- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
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:
The desired theme can be set using the theme option. Don't forget to include the corresponding CSS theme file.
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>