Skip to content

Themes

Themes establish baseline styling that applies consistently across all reports and templates. While every component can be customized individually within reports or templates, themes provide:

  • Consistent branding across multiple reports
  • Shared styling foundation that reduces repetitive formatting work
  • Easy maintenance - change theme settings once to update all associated reports

Individual component customization remains available in the report editor for complex styling requirements that go beyond theme settings. However, theme-level styling serves as the starting point, ensuring visual consistency while allowing flexibility where needed.

Access your themes through the left sidebar on the home screen, where you can:

  • View all existing themes
  • Create new themes
  • Edit, duplicate, or delete themes
  • Preview associated reports and templates

The options menu (located on the right side of each theme row) provides additional functionality, including the ability to view which reports and templates are currently using that specific theme.

After creating a new theme or editing an existing one, the Theme Edit page is opened. Each theme tab controls specific visual elements of your reports. The live preview in each tab allows you to see changes applied immediately.

Colors

Define your color palette and create reusable color variables. Adding new colors is done using the + Add new color button. Each color definition includes:

  • Color name - Reference name for the color
  • Color value - Can be either selected using the built-in color picker or manually entered as a hex code, RGBA, or HSLA value.
  • Variable - Auto-generated CSS variable (e.g., var(--dark-gray)) based on the color name and can not be separately defined or changed

Use the color variables defined here in other theme settings as well to maintain consistency. When a color is changed here, all elements using that color will be updated automatically.

Text

Control typography for text elements and the table of contents.

Text, paragraphs, links, and headings are styled in the General section, where you can configure:

  • Font family, size, weight, and color
  • Line height and text transformation (uppercase, lowercase, capitalize)
  • Top and bottom margins

Styling for the table of contents and its levels (L1-L6) can be done in the Table of Contents section, with additional options:

  • Indentation control for hierarchical display
  • Padding and border settings for each ToC level

Tables

Style data tables and their components.

Switch between Table, Header, Cells, Footer, and Group using the styling buttons. Each component supports:

  • Background and text colors
  • Font properties and text transformation
  • Padding controls for all four sides
  • Border styling with individual side controls and color selection

Charts

Configure data visualization colors and chart elements.

Color Palette: Set 16 colors for chart data series. Charts automatically cycle through these colors for multiple data sets.

Labels Font Size: Control text size for:

  • Chart labels (data point labels)
  • Axis labels (category and value labels)
  • Axis label and tick colors

Guidelines: Set color and width for chart grid lines.

Zero Marker: Style the zero-value reference lines on X and Y axes with custom colors and widths.

Chart Legend

Control legend appearance and positioning.

Configure legend elements:

  • Shape - Choose legend marker style
  • Shape Size - Set marker dimensions
  • Item Width/Max Width - Control legend item spacing
  • Font properties - Size, color, and weight for legend text
  • Positioning - Item and shape alignment options
  • Spacing - Gaps between legend elements, margins, and padding
  • Borders - Full border control for the legend container

Figures

Style images, charts, and visual elements in reports.

Common Tab - General figure styling, including text alignment, fonts, margins, and borders.

Name/Title Tabs - Separate styling for figure captions and titles.

Table of Figures Section - Style figure lists with independent formatting options similar to the table of contents, including alignment, background colors, and spacing controls.

Components

In this tab, you can configure report components and visual separators.

Separator Configuration - Style divider lines between report sections:

  • Color and size selection
  • Padding controls for spacing around separators

Key-Value Table: Format data tables with key-value pairs:

  • Field widths - Control column proportions
  • Row styling - Alternate background colors for odd/even rows
  • Spacing - Row gaps and cell gaps
  • Borders - Full border controls with collapse options
  • Element styling - Use tabs (Common, Keys, Values, Divider, Frame) to style different table parts independently

Custom CSS

For advanced styling, custom CSS can be defined. Write CSS code directly to override default styles or add effects not available in the standard interface. This section accepts standard CSS syntax and applies after all theme settings.

External CSS

Link external stylesheets and import fonts.

Add external CSS file URLs to extend your theme capabilities. Use this section to import web fonts from services like Google Fonts or Adobe Fonts.

Add Google Fonts to your theme through this section:

  1. Select fonts on Google Fonts
  2. Copy the <link> tag from the Web tab
  3. Paste it into the External CSS section
  4. Use the font name in the theme typography settings

Example

In this code snippet: 

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
The actual font import is done via the following URL: 
https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap

ECharts

Here you can configure Apache ECharts themes for advanced data visualizations.

This tab provides access to the ECharts theme builder functionality. Configure colors, fonts, and styling specifically for ECharts-based visualizations. Changes here affect only ECharts components, not standard CxReports charts.

Refer to the Apache ECharts theme builder documentation for detailed configuration options [here].