Wrap Cartel - Job Management Portal.

Professional Wrap Cartel with beautiful theme system

View Login Page Theme Demo

🎨 Theme System Demo

Deep Blue, Light Blue & White Color Palette

Current Theme:system(Light Mode Active)

Theme Controls

Toggle Variants

Direct Selection

Quick Actions

Primary Colors

Deep blue primary palette

#fefce8

100

#fef9c3

200

#fef08a

300

#fde047

400

#f7d370

Secondary Colors

Light blue secondary palette

#f0f9ff

100

#e0f2fe

200

#bae6fd

300

#7dd3fc

400

#38bdf8

Semantic Colors

Status and feedback colors

success

#22c55e

warning

#f59e0b

error

#ef4444

info

#3b82f6

Interactive Elements

Buttons

Form Elements

CSS Variables Reference

--bg-primary

Sample

--bg-secondary

Sample

--fg-primary

Sample

--fg-secondary

Sample

--interactive-primary

Sample

--border-default

Sample

Code Examples

Using CSS Classes:

<div className="theme-bg-primary theme-text-primary">
  <button className="theme-interactive-primary">Click me</button>
</div>

Using CSS Variables:

<div style={{ 
  backgroundColor: 'var(--bg-primary)',
  color: 'var(--fg-primary)' 
}}>
  Content
</div>

Using React Hooks:

const { theme, isDark, colors } = useTheme()
const primaryColor = colors.primary[600]

Wrap Cartel - Job Management Portal.

Professional Wrap Cartel with beautiful theme system

View Login Page Theme Demo

🎨 Theme System Demo

Deep Blue, Light Blue & White Color Palette

Current Theme:system(Light Mode Active)

Theme Controls

Toggle Variants

Direct Selection

Quick Actions

Primary Colors

Deep blue primary palette

#fefce8

100

#fef9c3

200

#fef08a

300

#fde047

400

#f7d370

Secondary Colors

Light blue secondary palette

#f0f9ff

100

#e0f2fe

200

#bae6fd

300

#7dd3fc

400

#38bdf8

Semantic Colors

Status and feedback colors

success

#22c55e

warning

#f59e0b

error

#ef4444

info

#3b82f6

Interactive Elements

Buttons

Form Elements

CSS Variables Reference

--bg-primary

Sample

--bg-secondary

Sample

--fg-primary

Sample

--fg-secondary

Sample

--interactive-primary

Sample

--border-default

Sample

Code Examples

Using CSS Classes:

<div className="theme-bg-primary theme-text-primary">
  <button className="theme-interactive-primary">Click me</button>
</div>

Using CSS Variables:

<div style={{ 
  backgroundColor: 'var(--bg-primary)',
  color: 'var(--fg-primary)' 
}}>
  Content
</div>

Using React Hooks:

const { theme, isDark, colors } = useTheme()
const primaryColor = colors.primary[600]