SerConnect - Ser Connect System

Professional Ser Connect 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

#f0f7ff

100

#e0effe

200

#b9dffd

300

#7cc4fc

400

#36a6f8

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]

SerConnect - Ser Connect System

Professional Ser Connect 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

#f0f7ff

100

#e0effe

200

#b9dffd

300

#7cc4fc

400

#36a6f8

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]

SerConnect - Ser Connect System

🎨 Theme System Demo

Theme Controls

Toggle Variants

Direct Selection

Quick Actions

Primary Colors

Secondary Colors

Semantic Colors

Interactive Elements

Buttons

Form Elements

CSS Variables Reference

Code Examples

Using CSS Classes:

Using CSS Variables:

Using React Hooks:

SER Connect

SerConnect - Ser Connect System

🎨 Theme System Demo

Theme Controls

Toggle Variants

Direct Selection

Quick Actions

Primary Colors

Secondary Colors

Semantic Colors

Interactive Elements

Buttons

Form Elements

CSS Variables Reference

Code Examples

Using CSS Classes:

Using CSS Variables:

Using React Hooks: