fix: Resolve color-blindness ring theme toggle conflicts
- Fix conflicting data-theme attributes between accessibility system and dark/light toggle - Remove obsolete updateRingMaterial function that referenced non-existent mobius variable - Update setAccessibilityTheme to use both data-theme and data-accessibility attributes - Add dark mode variants for all accessibility materials (protanopia, deuteranopia, tritanopia, achromatopsia) - Update logo.js material selection logic to check both attribute systems - Ensure theme toggle preserves accessibility settings while changing light/dark mode - Update CHORUS 8-color accessibility system with proper light/dark mode material mappings 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tony
@@ -8,6 +8,7 @@ const logoInstances = new Map();
|
||||
// Define materials for both themes and accessibility modes
|
||||
let darkMaterial, lightMaterial;
|
||||
let accessibilityMaterials = {};
|
||||
let accessibilityMaterialsDark = {};
|
||||
|
||||
// Animation parameters (now in an object for GUI control)
|
||||
const params = {
|
||||
@@ -62,60 +63,113 @@ function createMaterials() {
|
||||
envMapIntensity: 0.8,
|
||||
});
|
||||
|
||||
// Accessibility materials for different color blindness types
|
||||
// CHORUS 8-Color Accessibility Materials - Matching CSS system
|
||||
accessibilityMaterials.protanopia = new THREE.MeshPhysicalMaterial({
|
||||
color: 0x1e40af, // Blue-800 for protanopia (red-blind)
|
||||
color: 0x2a3441, // ocean-950 (matching --chorus-danger for protanopia)
|
||||
roughness: 0.26,
|
||||
metalness: 0.95,
|
||||
clearcoat: 0.5,
|
||||
clearcoatRoughness: 0.14,
|
||||
reflectivity: 1.1,
|
||||
sheen: 0.3,
|
||||
sheenColor: new THREE.Color(0xca8a04), // Yellow-600
|
||||
sheenColor: new THREE.Color(0x473e2f), // sand-950 (matching --chorus-success for protanopia)
|
||||
sheenRoughness: 0.18,
|
||||
envMapIntensity: 0.9,
|
||||
});
|
||||
|
||||
accessibilityMaterials.deuteranopia = new THREE.MeshPhysicalMaterial({
|
||||
color: 0x6b21a8, // Purple-800 for deuteranopia (green-blind)
|
||||
color: 0x2a3441, // ocean-950 (matching --chorus-success for deuteranopia)
|
||||
roughness: 0.25,
|
||||
metalness: 0.96,
|
||||
clearcoat: 0.49,
|
||||
clearcoatRoughness: 0.13,
|
||||
reflectivity: 1.15,
|
||||
sheen: 0.32,
|
||||
sheenColor: new THREE.Color(0x3b82f6), // Blue-500
|
||||
sheenColor: new THREE.Color(0x2e1d1c), // coral-950 (matching --chorus-accent for deuteranopia)
|
||||
sheenRoughness: 0.17,
|
||||
envMapIntensity: 0.92,
|
||||
});
|
||||
|
||||
accessibilityMaterials.tritanopia = new THREE.MeshPhysicalMaterial({
|
||||
color: 0x991b1b, // Red-800 for tritanopia (blue-blind)
|
||||
color: 0x2e1d1c, // coral-950 (matching --chorus-info for tritanopia)
|
||||
roughness: 0.27,
|
||||
metalness: 0.94,
|
||||
clearcoat: 0.51,
|
||||
clearcoatRoughness: 0.15,
|
||||
reflectivity: 1.05,
|
||||
sheen: 0.28,
|
||||
sheenColor: new THREE.Color(0x16a34a), // Green-600
|
||||
sheenColor: new THREE.Color(0x2a3330), // eucalyptus-950 (matching --chorus-warning for tritanopia)
|
||||
sheenRoughness: 0.19,
|
||||
envMapIntensity: 0.88,
|
||||
});
|
||||
|
||||
accessibilityMaterials.achromatopsia = new THREE.MeshPhysicalMaterial({
|
||||
color: 0x374151, // Gray-700 for achromatopsia (complete color blindness)
|
||||
color: 0x111111, // Almost black (matching --chorus-danger for achromatopsia)
|
||||
roughness: 0.3,
|
||||
metalness: 0.9,
|
||||
clearcoat: 0.45,
|
||||
clearcoatRoughness: 0.16,
|
||||
reflectivity: 1.0,
|
||||
sheen: 0.25,
|
||||
sheenColor: new THREE.Color(0x6b7280), // Gray-500
|
||||
sheenColor: new THREE.Color(0x444444), // Dark medium (matching --chorus-info for achromatopsia)
|
||||
sheenRoughness: 0.2,
|
||||
envMapIntensity: 0.85,
|
||||
});
|
||||
|
||||
console.log("Materials created including accessibility variants");
|
||||
// Create dark mode variants for accessibility materials
|
||||
accessibilityMaterialsDark.protanopia = new THREE.MeshPhysicalMaterial({
|
||||
color: 0xcbefff, // ocean-50 (matching dark mode --chorus-danger for protanopia)
|
||||
roughness: 0.24,
|
||||
metalness: 1.0,
|
||||
clearcoat: 0.48,
|
||||
clearcoatRoughness: 0.15,
|
||||
reflectivity: 1.2,
|
||||
sheen: 0.35,
|
||||
sheenColor: new THREE.Color(0xcee1be), // sand-50 (matching dark mode --chorus-success for protanopia)
|
||||
sheenRoughness: 0.168,
|
||||
envMapIntensity: 1,
|
||||
});
|
||||
|
||||
accessibilityMaterialsDark.deuteranopia = new THREE.MeshPhysicalMaterial({
|
||||
color: 0xcbefff, // ocean-50 (matching dark mode --chorus-success for deuteranopia)
|
||||
roughness: 0.24,
|
||||
metalness: 1.0,
|
||||
clearcoat: 0.48,
|
||||
clearcoatRoughness: 0.15,
|
||||
reflectivity: 1.2,
|
||||
sheen: 0.35,
|
||||
sheenColor: new THREE.Color(0xffd6d6), // coral-50 (matching dark mode --chorus-accent for deuteranopia)
|
||||
sheenRoughness: 0.168,
|
||||
envMapIntensity: 1,
|
||||
});
|
||||
|
||||
accessibilityMaterialsDark.tritanopia = new THREE.MeshPhysicalMaterial({
|
||||
color: 0xffd6d6, // coral-50 (matching dark mode --chorus-info for tritanopia)
|
||||
roughness: 0.24,
|
||||
metalness: 1.0,
|
||||
clearcoat: 0.48,
|
||||
clearcoatRoughness: 0.15,
|
||||
reflectivity: 1.2,
|
||||
sheen: 0.35,
|
||||
sheenColor: new THREE.Color(0xbacfbf), // eucalyptus-50 (matching dark mode --chorus-warning for tritanopia)
|
||||
sheenRoughness: 0.168,
|
||||
envMapIntensity: 1,
|
||||
});
|
||||
|
||||
accessibilityMaterialsDark.achromatopsia = new THREE.MeshPhysicalMaterial({
|
||||
color: 0xeeeeee, // Almost white (matching dark mode --chorus-danger for achromatopsia)
|
||||
roughness: 0.24,
|
||||
metalness: 1.0,
|
||||
clearcoat: 0.48,
|
||||
clearcoatRoughness: 0.15,
|
||||
reflectivity: 1.2,
|
||||
sheen: 0.35,
|
||||
sheenColor: new THREE.Color(0xbbbbbb), // Light medium (matching dark mode --chorus-info for achromatopsia)
|
||||
sheenRoughness: 0.168,
|
||||
envMapIntensity: 1,
|
||||
});
|
||||
|
||||
console.log("Materials created including accessibility variants and dark mode variants");
|
||||
}
|
||||
|
||||
function initLogo(canvas) {
|
||||
@@ -257,16 +311,27 @@ function initLogo(canvas) {
|
||||
|
||||
function updateCanvasMaterial(mobius, isDark) {
|
||||
if (mobius) {
|
||||
// Check for accessibility theme first
|
||||
const accessibilityTheme = document.documentElement.getAttribute('data-theme');
|
||||
// Check for accessibility theme first (both data-theme for legacy and data-accessibility for new system)
|
||||
const accessibilityTheme = document.documentElement.getAttribute('data-accessibility') ||
|
||||
document.documentElement.getAttribute('data-theme');
|
||||
|
||||
let targetMaterial;
|
||||
if (accessibilityTheme && accessibilityMaterials[accessibilityTheme]) {
|
||||
targetMaterial = accessibilityMaterials[accessibilityTheme];
|
||||
console.log(`Updating material to accessibility theme: ${accessibilityTheme}`);
|
||||
if (accessibilityTheme && accessibilityTheme !== 'standard') {
|
||||
// Choose accessibility material based on light/dark mode
|
||||
const accessibilityMaterialSet = isDark ? accessibilityMaterialsDark : accessibilityMaterials;
|
||||
|
||||
if (accessibilityMaterialSet[accessibilityTheme]) {
|
||||
targetMaterial = accessibilityMaterialSet[accessibilityTheme];
|
||||
console.log(`Updating material to ${isDark ? 'dark' : 'light'} accessibility theme: ${accessibilityTheme}`);
|
||||
} else {
|
||||
// Fallback to standard materials
|
||||
targetMaterial = isDark ? darkMaterial : lightMaterial;
|
||||
console.log(`Accessibility material not found for ${accessibilityTheme}, using standard ${isDark ? 'dark' : 'light'} material`);
|
||||
}
|
||||
} else {
|
||||
// Standard materials
|
||||
targetMaterial = isDark ? darkMaterial : lightMaterial;
|
||||
console.log(`Updating material to:`, isDark ? 'dark' : 'light', 'material color:', targetMaterial.color.getHex().toString(16));
|
||||
console.log(`Updating material to standard:`, isDark ? 'dark' : 'light', 'material color:', targetMaterial.color.getHex().toString(16));
|
||||
}
|
||||
|
||||
let meshCount = 0;
|
||||
|
||||
Reference in New Issue
Block a user