Blue Light Filter Tool

Overview

The Blue Light Filter tool reduces blue light emission from screens to minimize eye strain and improve sleep health. This tool applies a warm color overlay that reduces harsh blue light wavelengths while maintaining visual clarity and readability through an advanced overlay-based implementation that works seamlessly with all content types including images and videos.

Features

• Four Intensity Levels: Off, Low, Medium, and High filtering options
• Overlay-Based Technology: Uses a dedicated overlay element for better compatibility with canvas, SVG, and media content
• Smooth Transitions: Gradual opacity and color changes with CSS transitions
• Eye Strain Relief: Reduces digital eye fatigue during extended screen use
• Sleep Health Support: Minimizes blue light exposure before bedtime
• Cycling Interface: Easy step-through interface with visual feedback

Settings

Level	Color Temperature	Warmth	Overlay Color	Description
Off	6500K	Cool	None	No filtering - standard screen colors
Low	5000K	Slightly Warm	rgba(255, 147, 41, 0.12)	Minimal filtering for day use
Medium	4000K	Moderately Warm	rgba(255, 120, 41, 0.18)	Balanced filtering for evening
High	3000K	Very Warm	rgba(255, 100, 41, 0.25)	Strong filtering for night use

Usage

1. Click the Blue Light Filter button in the accessibility toolbar
2. The tool cycles through levels: Off → Low → Medium → High → Off
3. Visual feedback shows current intensity level and step position
4. Screen overlay adjusts with smooth transitions based on selected level
5. Choose the intensity that provides optimal comfort for current lighting conditions

Accessibility Benefits

• Eye Strain Relief: Reduces digital eye fatigue and discomfort
• Sleep Quality: Improves sleep patterns by reducing blue light exposure
• Migraine Prevention: Helps users sensitive to bright, cool light
• Light Sensitivity: Assists users with photophobia or light sensitivity
• Extended Use Comfort: Makes long screen sessions more comfortable

Health Benefits

Digital Eye Strain

• Reduces symptoms like dry eyes, blurred vision, and headaches
• Minimizes the need for frequent breaks during computer work
• Improves overall visual comfort during screen use

Sleep Health

• Reduces disruption to circadian rhythm
• Helps maintain natural melatonin production
• Improves sleep quality when using devices before bedtime

Light Sensitivity

• Provides relief for users with photophobia
• Reduces discomfort from bright screen displays
• Helps users with certain medical conditions

Technical Implementation

Uses a fixed-position overlay element with CSS blend modes to apply color temperature adjustments across the entire viewport. The tool maintains compatibility with all content types including canvas elements, SVGs, images, and videos through its overlay-based approach rather than CSS filters. The implementation includes:

• Overlay Element: Fixed-position div with maximum z-index for proper layering
• CSS Classes: Dynamic HTML classes for different intensity levels
• Blend Modes: Uses multiply blend mode for natural color temperature adjustment
• Smooth Transitions: CSS transitions for opacity and background color changes
• Registry Integration: Coordinates with other color tools to manage global effect classes

API Usage Example

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

// Basic activation - enables with 'low' level by default
window.BrowseAidWidget.api.enableTool('blue-light-filter');

// Enable with specific filter level
window.BrowseAidWidget.api.enableTool('blue-light-filter', {
  level: 'medium'    // Medium blue light filtering
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('blue-light-filter', {
  enabled: true,
  level: 'high'    // High filtering for evening use
});

// Toggle the tool on/off (cycles through levels when on)
const isEnabled = window.BrowseAidWidget.api.toggleTool('blue-light-filter');
console.log('Blue Light Filter is now:', isEnabled ? 'enabled' : 'disabled');

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('blue-light-filter');
console.log('Current settings:', settings);
// Returns: { enabled: boolean, level: 'off' | 'low' | 'medium' | 'high' }

// Disable the tool
window.BrowseAidWidget.api.disableTool('blue-light-filter');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'blue-light-filter') {
    console.log('Blue Light Filter settings changed:', settings);
    console.log('Current level:', settings.level);
    console.log('Is active:', settings.enabled && settings.level !== 'off');
  }
});

Configuration Options

Option	Type	Values	Default	Description
enabled	boolean	true/false	false	Enables or disables the tool
level	string	'off', 'low', 'medium', 'high'	'off'	Filter intensity level

Level Details

• 'off' - No filtering, overlay removed (6500K)
• 'low' - Light filtering for daytime use (5000K, 12% opacity)
• 'medium' - Moderate filtering for evening (4000K, 18% opacity)
• 'high' - Strong filtering for nighttime (3000K, 25% opacity)

Advanced Usage Patterns

// Time-based automatic filtering
function setBluelightForTime() {
  const hour = new Date().getHours();
  let filterLevel;

  if (hour >= 22 || hour <= 6) {
    // Night: 10 PM - 6 AM
    filterLevel = 'high';
  } else if (hour >= 18 || hour <= 8) {
    // Evening/Morning: 6 PM - 10 PM, 6 AM - 8 AM
    filterLevel = 'medium';
  } else if (hour >= 16) {
    // Late afternoon: 4 PM - 6 PM
    filterLevel = 'low';
  } else {
    // Day time: 8 AM - 4 PM
    filterLevel = 'off';
  }

  window.BrowseAidWidget.api.updateTool('blue-light-filter', {
    enabled: filterLevel !== 'off',
    level: filterLevel
  });
}

// Progressive level cycling
function cycleBlueFilterLevel() {
  const currentSettings = window.BrowseAidWidget.api.getToolState('blue-light-filter');
  const levels = ['off', 'low', 'medium', 'high'];
  const currentIndex = levels.indexOf(currentSettings?.level || 'off');
  const nextIndex = (currentIndex + 1) % levels.length;
  const nextLevel = levels[nextIndex];

  window.BrowseAidWidget.api.updateTool('blue-light-filter', {
    enabled: nextLevel !== 'off',
    level: nextLevel
  });

  console.log(`Blue light filter cycled to: ${nextLevel}`);
}

// User preference profiles
const lightSensitivityProfiles = {
  'normal': { enabled: false, level: 'off' },
  'light-sensitive': { enabled: true, level: 'low' },
  'eye-strain': { enabled: true, level: 'medium' },
  'severe-sensitivity': { enabled: true, level: 'high' }
};

function applyLightSensitivityProfile(profile) {
  const settings = lightSensitivityProfiles[profile] || lightSensitivityProfiles['normal'];
  window.BrowseAidWidget.api.updateTool('blue-light-filter', settings);
}

// Check if tool is currently active
function isBlueFilterActive() {
  const settings = window.BrowseAidWidget.api.getToolState('blue-light-filter');
  return settings?.enabled && settings?.level !== 'off';
}

// Get current color temperature
function getCurrentColorTemperature() {
  const settings = window.BrowseAidWidget.api.getToolState('blue-light-filter');
  const temperatureMap = {
    'off': 6500,
    'low': 5000,
    'medium': 4000,
    'high': 3000
  };
  return temperatureMap[settings?.level || 'off'];
}

Event Handling

// Comprehensive event monitoring
window.BrowseAidWidget.api.onToolChange((toolName, settings, previousSettings) => {
  if (toolName === 'blue-light-filter') {
    const wasActive = previousSettings?.enabled && previousSettings?.level !== 'off';
    const isNowActive = settings.enabled && settings.level !== 'off';

    if (!wasActive && isNowActive) {
      console.log(`Blue light filter activated at ${settings.level} level`);
    } else if (wasActive && !isNowActive) {
      console.log('Blue light filter deactivated');
    } else if (wasActive && isNowActive && settings.level !== previousSettings?.level) {
      console.log(`Blue light filter level changed from ${previousSettings.level} to ${settings.level}`);
    }
  }
});