Colors

Color System

Theme Palette

Discover the visual identity of PiruAdmin. This color system is built with Bootstrap 5 theme variables and utility classes, supporting light and dark modes natively.

Theme Colors

Brand colors representing actions, status, and feedback.

Primary

.bg-primary$primary

Secondary

.bg-secondary$secondary

Success

.bg-success$success

Info

.bg-info$info

Warning

.bg-warning$warning

Danger

.bg-danger$danger

Theme Color Tints (Subtle Tones)

Transparent primary brand-aware tints for high-end active statuses and backgrounds.

Primary Hover (5%)

rgba($primary, 0.05)Submenu Hover

Primary Active (10%)

rgba($primary, 0.1)Submenu Active

Primary Border (25%)

rgba($primary, 0.25)Sidebar Guide Line

Body Secondary

.bg-body-secondaryTheme Backgrounds

Grayscale & Body Colors

Neutral colors that dynamically change to guarantee contrast under Dark Mode.

Body Background.bg-body

Body Tertiary.bg-body-tertiary

Card Backgroundvar(--pr-card-bg)

Solid Dark.bg-dark

Social & Brand Colors Showcase

Unified brand colors for social sign-in buttons, sharing actions, and custom avatar profiles.

Facebook

#1877f2

Google

#ea4335

X / Twitter

#000000

GitHub

#181717

#0077b5

YouTube

#ff0000

Instagram

#e1306c

#25d366

Spotify

#1db954

PayPal

#003087

Apple

#a2aaad

Amazon

#ff9900