Contrast

Contrast Colors

Contrast utilities are one of Canvas's most useful features. Instead of hardcoding greys, you use a contrast scale (0 to 1000) that automatically inverts in dark mode. contrast-0 is the page background, contrast-1000 is the strongest foreground, and the steps between map to a neutral grey ramp. Switch to dark mode and every contrast color flips, so your markup stays the same.

The scale

The scale mirrors the grey ramp:

Step	Light mode value
`0`	#fff
`100`	#f8f9fa
`200`	#e9ecef
`300`	#dee2e6
`400`	#ced4da
`500`	#adb5bd
`600`	#6c757d
`700`	#495057
`800`	#343a40
`900`	#212529
`1000`	#000

Class families

Each family accepts every step (0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000):

Family	Purpose
`.text-contrast-{n}`	Text color
`.bg-contrast-{n}`	Background color
`.border-contrast-{n}`	Border color

Hover variants exist too: .h-text-contrast-{n}, .h-bg-contrast-{n}, .h-border-contrast-{n} apply the color on hover.

Usage

A card that reads correctly in both light and dark mode with no overrides:

<div class="bg-contrast-100 border border-contrast-300 p-4 rounded-3">
  <h3 class="text-contrast-900">Card title</h3>
  <p class="text-contrast-600">Muted body copy that adapts to the color mode.</p>
</div>

Hover to darken a link:

<a href="#" class="text-contrast-600 h-text-contrast-1000">Read more</a>

Because the scale is driven by CSS custom properties (--cnvs-contrast-*), these classes automatically invert wherever a dark context is active.

Usage

<div class="p-5 bg-contrast-100 border border-contrast-400 text-contrast-1000">Copy/Paste this Code in your Canvas Layout and see the Magic.</div>

Make sure you add the .adaptive-color-scheme Class to the <body> Tag and then change your PC/Mac Dark Mode to On/Off to see the difference.

Classes

Class	Description
`.text-contrast-*`	Sets a Contrast Color on Text Example: `.text-contrast-100`
`.bg-contrast-*`	Sets a Background Contrast Color Example: `.bg-contrast-100`
`.border-contrast-*`	Sets a Contrast Color on the Border Example: `.border-contrast-100`
`RGB Colors`	Use `--cnvs-contrast-rgb` and `--cnvs-invert-contrast-rgb` to set Contrast RGB Colors Example: `rgba(var(--cnvs-contrast-rgb), 0.1)`

CSS Variables

:root,
.not-dark {
	--cnvs-contrast-0: #fff;
	--cnvs-contrast-100: #f8f9fa;
	--cnvs-contrast-200: #e9ecef;
	--cnvs-contrast-300: #dee2e6;
	--cnvs-contrast-400: #ced4da;
	--cnvs-contrast-500: #adb5bd;
	--cnvs-contrast-600: #6c757d;
	--cnvs-contrast-700: #495057;
	--cnvs-contrast-800: #343a40;
	--cnvs-contrast-900: #212529;
	--cnvs-contrast-1000: #000;
	--cnvs-invert-contrast-0: #000;
	--cnvs-invert-contrast-100: #212529;
	--cnvs-invert-contrast-200: #343a40;
	--cnvs-invert-contrast-300: #495057;
	--cnvs-invert-contrast-400: #6c757d;
	--cnvs-invert-contrast-500: #adb5bd;
	--cnvs-invert-contrast-600: #ced4da;
	--cnvs-invert-contrast-700: #dee2e6;
	--cnvs-invert-contrast-800: #e9ecef;
	--cnvs-invert-contrast-900: #f8f9fa;
	--cnvs-invert-contrast-1000: #fff;
	--cnvs-contrast-rgb: 0, 0, 0;
	--cnvs-invert-contrast-rgb: 255, 255, 255;
	--cnvs-contrast-bg: #fff;
	--cnvs-contrast-bg-offset: #f8f9fa;
}

.dark {
	--cnvs-contrast-bg: #212529;
	--cnvs-contrast-bg-offset: #343a40;
	--cnvs-contrast-0: #000;
	--cnvs-contrast-100: #212529;
	--cnvs-contrast-200: #343a40;
	--cnvs-contrast-300: #495057;
	--cnvs-contrast-400: #6c757d;
	--cnvs-contrast-500: #adb5bd;
	--cnvs-contrast-600: #ced4da;
	--cnvs-contrast-700: #dee2e6;
	--cnvs-contrast-800: #e9ecef;
	--cnvs-contrast-900: #f8f9fa;
	--cnvs-contrast-1000: #fff;
	--cnvs-invert-contrast-0: #fff;
	--cnvs-invert-contrast-100: #f8f9fa;
	--cnvs-invert-contrast-200: #e9ecef;
	--cnvs-invert-contrast-300: #dee2e6;
	--cnvs-invert-contrast-400: #ced4da;
	--cnvs-invert-contrast-500: #adb5bd;
	--cnvs-invert-contrast-600: #6c757d;
	--cnvs-invert-contrast-700: #495057;
	--cnvs-invert-contrast-800: #343a40;
	--cnvs-invert-contrast-900: #212529;
	--cnvs-invert-contrast-1000: #000;
	--cnvs-contrast-rgb: 255, 255, 255;
	--cnvs-invert-contrast-rgb: 0, 0, 0;
}

Was this page helpful?