tessl/npm-css-prefers-color-scheme
PostCSS plugin and browser polyfill that enables prefers-color-scheme media queries in all browsers.
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
browser-global.mddocs/
Browser Global
The browser global version provides the same polyfill functionality as the browser module but exposes it as a global variable for CDN usage and legacy integration patterns. This is ideal for HTML script tags and environments where ES module imports are not available.
Capabilities
Global Function
The global script exposes the same initialization function as the browser module, but makes it available on the global object.
/**
* Global version of prefersColorSchemeInit function
* Available as window.prefersColorSchemeInit in browsers
* Available as self.prefersColorSchemeInit in web workers
* Same signature and behavior as browser polyfill version
*/
declare function prefersColorSchemeInit(
initialColorScheme?: 'dark' | 'light',
options?: { debug?: boolean }
): ColorSchemeManager;The global function has the exact same signature and behavior as the browser module version:
function prefersColorSchemeInit(
initialColorScheme?: 'dark' | 'light',
options?: { debug?: boolean }
): ColorSchemeManager;Usage Examples:
<!-- Load from CDN -->
<script src="https://unpkg.com/css-prefers-color-scheme@10.0.0/dist/browser-global.js"></script>
<script>
// Function is now available globally
const colorScheme = prefersColorSchemeInit();
// Use exactly like the module version
colorScheme.scheme = 'dark';
colorScheme.onChange = function() {
console.log('Color scheme changed to:', colorScheme.scheme);
};
</script>CDN Integration
Versioned CDN URLs (recommended):
<script src="https://unpkg.com/css-prefers-color-scheme@10.0.0/dist/browser-global.js"></script>Alternative CDN providers:
<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/css-prefers-color-scheme@10.0.0/dist/browser-global.js"></script>
<!-- cdnjs (if available) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-prefers-color-scheme/10.0.0/browser-global.js"></script>Legacy Browser Support
The global version is specifically designed for legacy environments and provides the same wide browser compatibility as the module version.
<!DOCTYPE html>
<html>
<head>
<style>
/* Transformed CSS from PostCSS plugin */
@media (color: 48842621) {
body { background: #000; color: #fff; }
}
@media (color: 70318723) {
body { background: #fff; color: #000; }
}
</style>
</head>
<body>
<script src="https://unpkg.com/css-prefers-color-scheme@10.0.0/dist/browser-global.js"></script>
<script>
// Works in IE9+, Safari 6+, and all modern browsers
var colorScheme = prefersColorSchemeInit();
// Add toggle functionality
function toggleTheme() {
colorScheme.scheme = colorScheme.scheme === 'dark' ? 'light' : 'dark';
}
</script>
<button onclick="toggleTheme()">Toggle Theme</button>
</body>
</html>Global Object Detection
The script safely attaches to the appropriate global object:
// Internal implementation (for reference)
(function (global) {
global.prefersColorSchemeInit = prefersColorSchemeInit;
}('object' === typeof window && window || 'object' === typeof self && self || {}));This ensures compatibility with:
- Browsers:
window.prefersColorSchemeInit - Web Workers:
self.prefersColorSchemeInit - Other environments: Falls back to empty object
Integration with Frameworks
jQuery:
<script src="https://unpkg.com/css-prefers-color-scheme@10.0.0/dist/browser-global.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var colorScheme = prefersColorSchemeInit();
$('#theme-toggle').click(function() {
colorScheme.scheme = colorScheme.scheme === 'dark' ? 'light' : 'dark';
});
colorScheme.onChange = function() {
$('body').attr('data-theme', colorScheme.scheme);
};
});
</script>Vanilla JavaScript:
<script src="https://unpkg.com/css-prefers-color-scheme@10.0.0/dist/browser-global.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var colorScheme = prefersColorSchemeInit();
// Persist user preference
var savedScheme = localStorage.getItem('colorScheme');
if (savedScheme) {
colorScheme.scheme = savedScheme;
}
colorScheme.onChange = function() {
localStorage.setItem('colorScheme', colorScheme.scheme);
document.documentElement.setAttribute('data-theme', colorScheme.scheme);
};
// Initialize theme attribute
document.documentElement.setAttribute('data-theme', colorScheme.scheme);
});
</script>No-Conflict Mode
Since the function is only attached to the global object, there are no naming conflicts to resolve. The global script does not provide a no-conflict mode because it only adds a single, specifically-named function.
Error Handling
Global usage supports the same error handling as the module version:
<script src="https://unpkg.com/css-prefers-color-scheme@10.0.0/dist/browser-global.js"></script>
<script>
try {
var colorScheme = prefersColorSchemeInit('dark', { debug: true });
// Use colorScheme...
} catch (error) {
console.error('Failed to initialize color scheme:', error);
// Fallback behavior
}
</script>Install with Tessl CLI
npx tessl i tessl/npm-css-prefers-color-scheme