Colors

Overview

The color system includes a predefined set of colors that can be used for text, backgrounds, and more.

Variable: $colors

The library includes a set of predefined colors that can be customized.

primary: #007bff

secondary: #6c757d

success: #28a745

danger: #dc3545

warning: #ffc107

info: #17a2b8

light: #f8f9fa

dark: #343a40

Change the text color using the text-* classes.

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

Change the background color using the bg-* classes.

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

The library includes a dark mode that can be toggled by adding the .dark class to the body element.

.dark (Dark mode enabled)

.dark header, .dark footer

.dark .bg-light