Themes

CxJS provides pre-built themes that style all framework widgets consistently. See them in action at the CxJS Gallery.

Available Themes

Theme	Package	Description
Aquamarine	`cx-theme-aquamarine`	Clean, modern theme with aquamarine accents
Material	`cx-theme-material`	Google Material Design inspired theme
Frost	`cx-theme-frost`	Light theme with subtle blue tones
Dark	`cx-theme-dark`	Dark theme for low-light environments
Space Blue	`cx-theme-space-blue`	Dark blue theme

Installation

Install the theme package of your choice:

npm install cx-theme-aquamarine

Usage

Import the theme CSS in your entry file:

import "cx-theme-aquamarine/dist/index.css";

Customization

Instead of importing the precompiled CSS file, you can import the theme’s SCSS source files directly. This is a common approach that allows you to customize theme variables.

Create an index.scss file:

// Pre-set theme variables
$cx-theme-primary-color: #3b82f6;

// Import theme variables
@import "cx-theme-aquamarine/src/variables";

// Advanced customizations go here

// Import theme styles
@import "cx-theme-aquamarine/src/index";

// Add classes that override default theme behavior

Then import it in your entry file:

import "./index.scss";

Check the theme’s repository for available SCSS variables.