or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

browser-global.md browser-polyfill.md index.md postcss-plugin.md

tile.json

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>