Colors

Color palette

The full set of theme colors available across all color utilities.

28 theme colors total. Semantic tokens (primary, secondary, success, info, warning, danger, light, dark) sit alongside a full Material-style palette (red, pink, purple, deeppurple, indigo, blue, lightblue, cyan, teal, green, lightgreen, lime, yellow, amber, orange, deeporange, brown, grey, black, white) - every one generates matching .text-*/.fg-*, .bg-*, .border-*, .link-*, and .gradient-* utilities.

Text colors

Apply a foreground color to text using .text-{color} or the alias .fg-{color} - both classes generate the same output.

<p class="text-primary">Primary text</p>
<p class="text-danger">Danger text</p>
<p class="fg-success">Success text (alias)</p>

Background colors

Set an element's background color with .bg-{color}.

<div class="bg-primary text-white px-4 py-2">Primary</div>
<div class="bg-success text-white px-4 py-2">Success</div>
<div class="bg-danger text-white px-4 py-2">Danger</div>

Hover variants

Prefix any color utility with hover: to apply it only on mouse hover. Works for both text and background colors.

<!-- Text turns primary on hover -->
<a class="text-secondary hover:text-primary" href="#">Hover me</a>

<!-- Background shifts to danger on hover -->
<button class="bg-primary hover:bg-danger text-white px-4 py-2">
  Delete
</button>

<!-- Combine text and background hover -->
<div class="bg-light hover:bg-primary text-dark hover:text-white px-3 py-2 rounded">
  Card
</div>

All color names are supported. Every token in $theme-colors generates a hover:text-{color} and hover:bg-{color} variant - no extra configuration needed.

Custom colors

ArchCSS is built from SCSS, and a future release will let you override any theme color or extend the palette by redefining variables before importing the source. All utilities would regenerate from your custom map automatically.

Coming soon. SCSS source customization isn't part of the public package yet - the snippets below preview how it will work once it ships.

Override a single token

// Change the primary brand color
$primary: #6366f1;

@use 'archcss/src/scss/index';

Extend the theme-colors map

Add entirely new color tokens by merging into $theme-colors:

// Add custom colors to the palette
$theme-colors: (
  "primary"  : #6366f1,
  "accent"   : #f59e0b,
  "brand"    : #10b981,
);

@use 'archcss/src/scss/index';

Note: Defining $theme-colors replaces the default map. To keep the built-in colors and add new ones, use the SCSS map.merge() function or define your overrides before the @use statement using the with clause.