The user interface colors of Textbox.io can be customized to match with the theme of your application.  

All the tooling that you require to theme Textbox.io can be found within the theme folder of the Textbox.io distribution.  Several example themes are also packaged in this directory.

Creating a Theme

The theme building tool requires knowledge of CSS syntax and use of command line tools. It also requires a node.js installation (link provided in README.html).

The README.html file in the theme folder contains instructions on how to setup and use the theme building tool packaged with Textbox.io.

The tool enables designers to specify a small set of colors that are then compiled into a complete theme for use with Textbox.io.  

Themes are compiled into a set of CSS files that are placed in the textboxio/resources/css folder ready for deployment.

Textbox.io Theme Tooling

The theme folder of the Textbox.io distribution contains a theme building tool that can be used to easily create Textbox.io themes.  This tool consists of 3 main parts:

• README.html - Instructions on how to use the theme builder and live preview the compiled theme
• theme.css - A file containing the variables representing the colors that can be set for Textbox.io's interface
• Gruntfile.js and package.json - A grunt build script and supporting NPM package that automatically compiles the editor theme when you change theme.css

Deploying a Theme

Once a theme has been built the resulting CSS files are placed into the textbox.io/resources/css folder ready to be deployed with your instance of Textbox.io.  This overwrites the default Textbox.io theme and no further action is required before deploying Textbox.io.

It's recommended that the theme be deployed as part of a complete Textbox.io deployment to ensure that the compiled theme matches the deployed version of Textbox.io.