Classic Themes

Classic themes use SCSS variables that are resolved at compile time. They produce smaller CSS output but require recompilation to change. 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
Material Dark	`cx-theme-material-dark`	Material Design dark variant
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
Packed Dark	`cx-theme-packed-dark`	Compact dark theme for data-dense UIs

Installation

npm install cx-theme-aquamarine

Usage

Import the theme in your SCSS entry file:

@use "cx-theme-aquamarine/src/index";

Alternatively, import the precompiled CSS:

import "cx-theme-aquamarine/dist/reset.css";
import "cx-theme-aquamarine/dist/widgets.css";
import "cx-theme-aquamarine/dist/charts.css";
import "cx-theme-aquamarine/dist/svg.css";

Customization

Classic themes are customized at three levels: variables, maps, and CSS overrides. To use any of these, import the theme from SCSS source instead of the precompiled CSS.

Level 1: Variables

Variables control base values like colors, border radius, and font sizes. Use @forward...with() to override them before they reach the framework.

Create a variables.scss file:

@forward "cx-theme-aquamarine/src/variables" with (
   $cx-theme-primary-color: #3b82f6 !default,
   $cx-default-border-radius: 8px !default
);

The !default flag ensures your values take priority — the theme and framework will only set values that haven’t been defined yet.

Level 2: State Style Maps

Maps define how widgets look in different states (default, hover, focus, disabled, etc.). Use cx-deep-map-merge() to modify specific states without replacing the entire map.

Create a maps.scss file:

@use "./variables" as *;
@use "cx-theme-aquamarine/src/maps" as *;
@use "cx/src/util/scss/deep-merge" as *;

// Make primary buttons bolder on hover
$cx-button-state-style-map: cx-deep-map-merge(
   $cx-button-state-style-map,
   (
      hover: (font-weight: bold)
   )
);

Level 3: CSS Overrides

For styling that can’t be expressed through variables or maps, add CSS rules after the theme is loaded.

Create an index.scss entry point that brings everything together:

// 1. Forward your variables (configures the theme)
@forward "./variables";

// 2. Load your maps (extends state style maps)
@use "./maps" as *;

// 3. Load theme overrides (generates all CSS)
@use "cx-theme-aquamarine/src/overrides";

// 4. Add your own CSS overrides
.cxb-button.cxm-primary {
   text-transform: uppercase;
}

Import it in your app entry file:

import "./index.scss";

Check the theme’s repository for available SCSS variables and maps.