Theming of Collabora Online

Theming Collabora Online – information for the upcoming 6.4.0 release – October 2020

How that works and how it looks

If you are a Collabora partner or a customer running your own installation, you can change the theming of Collabora Online. And it can be done very easily too; just by setting a couple of CSS variables through your integration.
Here’s how that works and how it looks.

Extra hidden field in COOL frame integration

In the COOL frame in the integration there is a form where you pass a access_token to COOL for loading the valid document. For your theming you have to add another hidden field to the form named “css_variables”. Then the css variables and their values for the theming can be passed, formatted as shown in the example below.

Content of hidden field “css_variables”

The default values of various css variables can be overridden by sending them in the post message in this format:
<input name="css_variables" value="co-color-main-text=#000;--co-body-bg=#FFF--co-txt-accent=#38257a;" type="hidden"/>
Note that the variables in the form are formatted slightly different from how they look in the css file!

Available variables

Various variables can be overridden for the theming. Their names, and the default values that are used in COOL are:

--co-primary-element: #4c566a
--co-primary-element-light: #706aab
--co-txt-accent: #38257a
--co-primary-text: #ffffff
--co-border-radius: 3px
--co-body-bg: #ffffff
--co-color-main-text: #000000

What it is, and how it looks

CSS Variables overview
New in 6.4: Theme it via CSS Variables
  1. primary-element (1) is for selected elements on menu’s and toolbars, various bars
  2. primary-element-light (2) is for selected unselected elements
  3. txt-accent (3)
  4. primary-text (4) is the text on these elements
  5. border-radius (5) is the rounding of the selection of  items on e.g. toolbars and the status bar
  6. body-bg is the background beside the document
  7. color-main-text is the fall-back in the case a specific element does not have its own color text value.


Examples of CSS varible tweaks
Tweak it and make it feel at home with your own integration

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.