Contrast

List of Contrast Utility Classes included with Canvas. Use these Utility Classes to turn any Layout to Dark/Light Mode. These are incredibly powerful, works with all Layouts and only available with Canvas.

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 `` 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;
}