blackmagic-js
Version:
A powerful dark mode framework with automatic color adjustment and contrast optimization
285 lines (248 loc) • 9.6 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlackMagic Test - Auto Switch Disabled</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #ffffff;
color: #333333;
margin: 0;
padding: 20px;
line-height: 1.6;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
.header {
background: linear-gradient(135deg, #ff9800 0%, #f44336 100%);
color: #ffffff;
padding: 30px;
border-radius: 10px;
margin-bottom: 30px;
text-align: center;
}
.settings-info {
background-color: #fff8e1;
border: 2px solid #ff9800;
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
}
.settings-info h3 {
color: #f57c00;
margin-top: 0;
}
.settings-info code {
background-color: #f5f5f5;
padding: 2px 6px;
border-radius: 3px;
font-family: monospace;
}
.warning-box {
background-color: #ffebee;
border: 2px solid #f44336;
border-radius: 8px;
padding: 15px;
margin: 20px 0;
color: #c62828;
}
.card {
background-color: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 25px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.toggle-btn {
background-color: #ff9800;
color: #ffffff;
padding: 15px 30px;
font-size: 1.2rem;
border: none;
border-radius: 25px;
cursor: pointer;
display: block;
margin: 20px auto;
transition: all 0.3s ease;
}
.toggle-btn:hover {
background-color: #f57c00;
transform: scale(1.05);
}
.manual-controls {
text-align: center;
margin: 30px 0;
padding: 20px;
background-color: #f0f0f0;
border-radius: 8px;
}
.manual-controls button {
background-color: #2196f3;
color: white;
border: none;
padding: 12px 20px;
margin: 10px;
border-radius: 5px;
cursor: pointer;
}
.manual-controls button:hover {
background-color: #1976d2;
}
.status-display {
background-color: #e3f2fd;
border: 2px solid #2196f3;
border-radius: 8px;
padding: 15px;
margin: 20px 0;
text-align: center;
}
.test-elements {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin: 20px 0;
}
.test-box {
padding: 20px;
border-radius: 8px;
text-align: center;
font-weight: bold;
border: 2px solid;
}
.red-box {
background-color: #ffcdd2;
color: #c62828;
border-color: #f44336;
}
.blue-box {
background-color: #bbdefb;
color: #1565c0;
border-color: #2196f3;
}
.green-box {
background-color: #c8e6c9;
color: #2e7d32;
border-color: #4caf50;
}
.purple-box {
background-color: #e1bee7;
color: #7b1fa2;
border-color: #9c27b0;
}
.instructions {
background-color: #e8f5e8;
border-left: 4px solid #4caf50;
padding: 15px;
margin: 20px 0;
}
.instructions h4 {
color: #2e7d32;
margin-top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🔧 BlackMagic Test: Auto Switch Disabled</h1>
<p>Testing manual theme control without auto-switching</p>
</div>
<div class="settings-info">
<h3>⚙️ Current Settings</h3>
<p><strong>Mode:</strong> Manual Control Only</p>
<p><strong>Auto Switch:</strong> <code>false</code></p>
<p><strong>Factor:</strong> <code>0.4</code> (Default)</p>
<p><strong>Background Color:</strong> <code>#2d2d2d</code></p>
<p><strong>Cookie Duration:</strong> <code>30 days</code></p>
<p><strong>Description:</strong> The framework will NOT automatically apply saved theme on page load. You must manually trigger theme changes.</p>
</div>
<div class="warning-box">
<strong>⚠️ Important:</strong> With autoSwitch disabled, the page will always start in light mode, even if you previously selected dark mode. The theme preference is still saved but not automatically applied.
</div>
<div class="instructions">
<h4>🧪 Testing Instructions:</h4>
<ol>
<li>Click "Toggle Dark Mode" to switch to dark mode</li>
<li>Refresh the page - it should return to light mode (ignoring saved preference)</li>
<li>Use manual controls to test direct theme application</li>
<li>Check browser cookies to verify preference is still being saved</li>
</ol>
</div>
<div class="manual-controls">
<h3>Manual Theme Controls</h3>
<button onclick="blackMagic.applyTheme('light')">Force Light Mode</button>
<button onclick="blackMagic.applyTheme('dark')">Force Dark Mode</button>
<button onclick="showCurrentCookie()">Show Saved Preference</button>
</div>
<div class="status-display">
<h4>Current Status</h4>
<p id="statusText">Page loaded in light mode (autoSwitch disabled)</p>
</div>
<button id="toggleBtn" class="toggle-btn">🌓 Toggle Dark Mode</button>
<div class="card">
<h2>Color Test Elements</h2>
<p>These elements will change color when you manually toggle the theme:</p>
<div class="test-elements">
<div class="test-box red-box">Red Theme Box</div>
<div class="test-box blue-box">Blue Theme Box</div>
<div class="test-box green-box">Green Theme Box</div>
<div class="test-box purple-box">Purple Theme Box</div>
</div>
</div>
<div class="card">
<h2>Text Content Test</h2>
<p>This paragraph contains various text that should change color when the theme is manually switched.</p>
<ul>
<li style="color: #1976d2;">Blue list item</li>
<li style="color: #388e3c;">Green list item</li>
<li style="color: #d32f2f;">Red list item</li>
<li style="color: #7b1fa2;">Purple list item</li>
</ul>
</div>
<div class="card">
<h2>Refresh Test</h2>
<p>After switching to dark mode, refresh this page. It should return to light mode because autoSwitch is disabled, even though your preference is saved in the cookie.</p>
<button onclick="location.reload()" style="background-color: #ff5722; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">
🔄 Refresh Page
</button>
</div>
</div>
<script src="../../src/blackmagic.js"></script>
<script>
// Initialize with autoSwitch disabled
const blackMagic = new BlackMagic({
autoSwitch: false, // Disabled - page always starts in light mode
factor: 0.4,
backgroundColor: '#2d2d2d',
cookieName: 'manual-control-test',
cookieDuration: 30
});
// Add event listener to the toggle button
document.getElementById('toggleBtn').addEventListener('click', function() {
blackMagic.toggle();
// Update button text and status
setTimeout(() => {
const isDark = document.body.style.backgroundColor === 'rgb(45, 45, 45)';
this.textContent = isDark ? '☀️ Switch to Light Mode' : '🌓 Toggle Dark Mode';
const statusText = document.getElementById('statusText');
statusText.textContent = isDark ?
'Currently in dark mode (manually triggered)' :
'Currently in light mode';
}, 100);
});
// Function to show current cookie value
function showCurrentCookie() {
const savedTheme = blackMagic.getCookie('manual-control-test');
alert(`Saved theme preference: ${savedTheme || 'None'}\n\nNote: Even though the preference is saved, it won't be automatically applied on page load because autoSwitch is disabled.`);
}
console.log('Manual Control Test initialized');
console.log('autoSwitch is disabled - page always starts in light mode');
console.log('Theme preference will be saved but not automatically applied');
</script>
</body>
</html>