Dark Mode Tool

Overview

The Dark Mode tool converts light backgrounds to dark and adjusts text colors for reduced eye strain. It uses advanced color mapping algorithms to maintain readability and contrast while preserving the visual integrity of images and media.

Features

• Intelligent Color Inversion: Smart color mapping that preserves readability
• Image Preservation: Maintains original appearance of photos and graphics
• Contrast Optimization: Ensures WCAG compliance for color contrast
• System Integration: Respects user's system dark mode preferences
• Mobile Support: Fully functional on all devices

Settings

Level	Description
Disabled	Standard light mode appearance
Enabled	Full dark mode with inverted colors and optimized contrast

Usage

1. Click the Dark Mode button in the accessibility toolbar
2. The page instantly switches to dark mode
3. All backgrounds become dark while text becomes light
4. Images and media retain their original appearance
5. Click again to return to light mode

Accessibility Benefits

• Light Sensitivity: Reduces glare for photosensitive users
• Eye Strain Relief: Minimizes eye fatigue during extended reading
• Night Usage: Improves comfort when using devices in low-light environments
• Migraine Prevention: Helps users sensitive to bright lights
• Sleep Health: Reduces blue light exposure before bedtime

Color Mapping

The tool intelligently maps colors while maintaining:

• Text Contrast: Ensures readability standards are met
• Brand Colors: Preserves important visual identity elements
• Image Quality: Keeps photos and graphics unaltered
• UI Elements: Maintains button and form visibility

Technical Implementation

Uses CSS filters, custom property overrides, and intelligent color analysis to provide comprehensive dark mode functionality without compromising content integrity.

API Usage Example

The Dark Mode tool can be programmatically controlled using the widget API. Here's how to enable and customize the tool:

// Basic activation
window.BrowseAidWidget.api.enableTool('dark-mode');

// Enable with custom settings
window.BrowseAidWidget.api.enableTool('dark-mode', {
  intensity: 0.9,       // Dark mode intensity: 0.1 to 1 (default: 0.85)
  preserveImages: true, // Keep images unchanged (default: true)
  invertMedia: false    // Don't invert video/media (default: false)
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('dark-mode', {
  enabled: true,
  intensity: 0.8,       // Slightly less intense dark mode
  preserveImages: true,
  invertMedia: false
});

// Toggle the tool on/off
const isEnabled = window.BrowseAidWidget.api.toggleTool('dark-mode');
console.log('Dark Mode is now:', isEnabled ? 'enabled' : 'disabled');

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('dark-mode');
console.log('Current Dark Mode settings:', settings);

// Disable the tool
window.BrowseAidWidget.api.disableTool('dark-mode');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'dark-mode') {
    console.log('Dark Mode settings changed:', settings);
  }
});

// Auto-enable based on system preference
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  window.BrowseAidWidget.api.enableTool('dark-mode');
}

// Listen for system theme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  if (e.matches) {
    window.BrowseAidWidget.api.enableTool('dark-mode');
  } else {
    window.BrowseAidWidget.api.disableTool('dark-mode');
  }
});

Configuration Options

Option	Type	Range	Default	Description
enabled	boolean	true/false	false	Enables or disables the tool
intensity	number	0.1 - 1	0.85	Intensity of the dark mode effect
preserveImages	boolean	true/false	true	Keep images in original colors
invertMedia	boolean	true/false	false	Whether to invert video/media elements

Intensity Examples

• 0.3 - Light dark mode for subtle effect
• 0.6 - Medium dark mode for moderate contrast
• 0.85 - Standard dark mode for good readability
• 1.0 - Maximum dark mode for complete inversion

Advanced Usage Patterns

// Time-based dark mode activation
const hour = new Date().getHours();
if (hour >= 18 || hour <= 6) { // 6 PM to 6 AM
  window.BrowseAidWidget.api.enableTool('dark-mode', {
    intensity: 0.9
  });
}

// Progressive dark mode based on ambient light
// (requires device light sensor API if available)
if ('AmbientLightSensor' in window) {
  const sensor = new AmbientLightSensor();
  sensor.addEventListener('reading', () => {
    const lightLevel = sensor.illuminance;
    if (lightLevel < 50) { // Low light conditions
      window.BrowseAidWidget.api.enableTool('dark-mode');
    }
  });
  sensor.start();
}