BlackMagic Framework Test Page

Button Variations

Testing various button colors and hover states:

Text Color Samples

Primary text color

Secondary text color

Success text color

Danger text color

Warning text color

Info text color

Dark text color

Muted text color

Alert Messages

Info! This is an info alert with light blue background.

Success! This is a success alert with light green background.

Warning! This is a warning alert with light yellow background.

Danger! This is a danger alert with light red background.

Progress Indicators

Blue Progress (75%)

75%

Green Progress (60%)

60%

Red Progress (45%)

45%

Orange Progress (85%)

85%

Badges & Labels

Various badge styles for testing:

Primary Success Danger Warning Info

Highlighted text: This text is highlighted within a paragraph.

Code Examples

Code blocks with syntax highlighting simulation:

// Initialize BlackMagic
const blackMagic = new BlackMagic({
    cookieName: 'darkmode',
    backgroundColor: '#000',
    factor: 0.4
});

// Add event listener to toggle button
document.getElementById('darkModeToggle').addEventListener('click', function() {
    blackMagic.toggle();
});
                

Feature	Status	Color Test	Priority
Dark Mode Toggle	Active	Blue Text	High
Color Conversion	Testing	Green Text	Medium
Cookie Storage	Active	Red Text	Low
Auto Detection	Planned	Purple Text	Low

🌙 BlackMagic Framework Test Page

Button Variations

Text Color Samples

Alert Messages

Progress Indicators

Badges & Labels

Code Examples

Color Palette Testing

Quick Links

Form Elements