fix: Navigation menu text colors in dark theme
The menu was showing light gray text in dark theme, creating poor contrast against the white menu background. Menu text must always be dark since the menu background is always white regardless of theme. Changes: - Added dark theme overrides for .navigation-menu and .submenu-content - Force --text-dark to #1a1a1a (dark text) in dark theme for menu - Force --text-gray to #333333 (dark gray) in dark theme for menu icons - Applied same fix for auto theme when system preference is dark Result: - Menu text: Dark/black (rgb(26, 26, 26)) in all themes - Menu icons: Dark gray (rgb(51, 51, 51)) in all themes - Menu background: White (rgb(255, 255, 255)) in all themes - Proper contrast and readability restored Test created: 68-menu-colors-dark-theme-test.mjs Screenshots: menu-light-theme.png, menu-dark-theme.png
This commit is contained in:
juanatsap
Executable
+187
@@ -0,0 +1,187 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
import { chromium } from 'playwright';
|
||||
|
||||
/**
|
||||
* TEST: Navigation Menu Text Colors in Dark Theme
|
||||
*
|
||||
* Verifies that menu text is always dark/black regardless of theme,
|
||||
* since the menu background is always white.
|
||||
*/
|
||||
|
||||
const THEMES = {
|
||||
light: { name: 'Light Theme', selector: 'light' },
|
||||
dark: { name: 'Dark Theme', selector: 'dark' }
|
||||
};
|
||||
|
||||
async function testTheme(browser, theme) {
|
||||
const context = await browser.newContext({
|
||||
viewport: { width: 1278, height: 800 }
|
||||
});
|
||||
const page = await context.newPage();
|
||||
|
||||
await page.goto(`http://localhost:1999/?lang=en`);
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// Set theme
|
||||
await page.evaluate((themeValue) => {
|
||||
document.documentElement.setAttribute('data-color-theme', themeValue);
|
||||
}, theme.selector);
|
||||
|
||||
// Wait for theme to apply
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
// Hover over hamburger to open menu
|
||||
await page.hover('.hamburger-btn');
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
const results = await page.evaluate(() => {
|
||||
const menuItem = document.querySelector('.menu-item');
|
||||
const menuIcon = document.querySelector('.menu-item iconify-icon');
|
||||
const menuHeader = document.querySelector('.menu-item-header');
|
||||
const menuHeaderIcon = document.querySelector('.menu-item-header iconify-icon');
|
||||
const controlLabel = document.querySelector('.menu-control-label');
|
||||
const controlIcon = document.querySelector('.menu-control-label iconify-icon');
|
||||
|
||||
function getColor(el) {
|
||||
if (!el) return 'N/A';
|
||||
return window.getComputedStyle(el).color;
|
||||
}
|
||||
|
||||
return {
|
||||
menuBackground: window.getComputedStyle(document.querySelector('.navigation-menu')).backgroundColor,
|
||||
menuItem: {
|
||||
exists: !!menuItem,
|
||||
color: getColor(menuItem)
|
||||
},
|
||||
menuIcon: {
|
||||
exists: !!menuIcon,
|
||||
color: getColor(menuIcon)
|
||||
},
|
||||
menuHeader: {
|
||||
exists: !!menuHeader,
|
||||
color: getColor(menuHeader)
|
||||
},
|
||||
menuHeaderIcon: {
|
||||
exists: !!menuHeaderIcon,
|
||||
color: getColor(menuHeaderIcon)
|
||||
},
|
||||
controlLabel: {
|
||||
exists: !!controlLabel,
|
||||
color: getColor(controlLabel)
|
||||
},
|
||||
controlIcon: {
|
||||
exists: !!controlIcon,
|
||||
color: getColor(controlIcon)
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
await page.screenshot({
|
||||
path: `tests/screenshots/menu-${theme.selector}-theme.png`,
|
||||
fullPage: false
|
||||
});
|
||||
|
||||
await context.close();
|
||||
return results;
|
||||
}
|
||||
|
||||
(async () => {
|
||||
const browser = await chromium.launch({ headless: true });
|
||||
|
||||
console.log('🎨 Navigation Menu Color Test - Dark Theme Fix\n');
|
||||
console.log('Testing: Menu text should be dark in both themes (white menu bg)\n');
|
||||
|
||||
const allResults = {};
|
||||
const failures = [];
|
||||
|
||||
for (const [key, theme] of Object.entries(THEMES)) {
|
||||
console.log(`🎨 Testing: ${theme.name}`);
|
||||
console.log('='.repeat(60));
|
||||
|
||||
const results = await testTheme(browser, theme);
|
||||
allResults[key] = results;
|
||||
|
||||
console.log(`\nMenu Background: ${results.menuBackground}`);
|
||||
console.log('\nText Colors:');
|
||||
console.log(` Menu Item: ${results.menuItem.color}`);
|
||||
console.log(` Menu Icon: ${results.menuIcon.color}`);
|
||||
console.log(` Menu Header: ${results.menuHeader.color}`);
|
||||
console.log(` Header Icon: ${results.menuHeaderIcon.color}`);
|
||||
console.log(` Control Label: ${results.controlLabel.color}`);
|
||||
console.log(` Control Icon: ${results.controlIcon.color}`);
|
||||
|
||||
// Validation
|
||||
const issues = [];
|
||||
|
||||
// Menu background should be white
|
||||
if (!results.menuBackground.includes('255, 255, 255')) {
|
||||
issues.push('Menu background should be white (rgb(255, 255, 255))');
|
||||
}
|
||||
|
||||
// Text colors should be dark (rgb values < 100)
|
||||
function isDarkColor(colorStr) {
|
||||
if (!colorStr || colorStr === 'N/A') return false;
|
||||
const match = colorStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
|
||||
if (!match) return false;
|
||||
const r = parseInt(match[1]);
|
||||
const g = parseInt(match[2]);
|
||||
const b = parseInt(match[3]);
|
||||
// Dark colors have RGB values < 100
|
||||
return r < 100 && g < 100 && b < 100;
|
||||
}
|
||||
|
||||
if (!isDarkColor(results.menuItem.color)) {
|
||||
issues.push(`Menu item text should be dark, got: ${results.menuItem.color}`);
|
||||
}
|
||||
if (!isDarkColor(results.menuIcon.color)) {
|
||||
issues.push(`Menu icon should be dark, got: ${results.menuIcon.color}`);
|
||||
}
|
||||
if (!isDarkColor(results.menuHeader.color)) {
|
||||
issues.push(`Menu header text should be dark, got: ${results.menuHeader.color}`);
|
||||
}
|
||||
if (!isDarkColor(results.menuHeaderIcon.color)) {
|
||||
issues.push(`Header icon should be dark, got: ${results.menuHeaderIcon.color}`);
|
||||
}
|
||||
if (!isDarkColor(results.controlLabel.color)) {
|
||||
issues.push(`Control label should be dark, got: ${results.controlLabel.color}`);
|
||||
}
|
||||
if (!isDarkColor(results.controlIcon.color)) {
|
||||
issues.push(`Control icon should be dark, got: ${results.controlIcon.color}`);
|
||||
}
|
||||
|
||||
if (issues.length > 0) {
|
||||
console.log('\n❌ ISSUES FOUND:');
|
||||
issues.forEach(issue => {
|
||||
console.log(` - ${issue}`);
|
||||
failures.push(`${theme.name}: ${issue}`);
|
||||
});
|
||||
} else {
|
||||
console.log('\n✅ All colors correct - dark text on white background');
|
||||
}
|
||||
|
||||
console.log('\n');
|
||||
}
|
||||
|
||||
// Final summary
|
||||
console.log('='.repeat(60));
|
||||
console.log('FINAL SUMMARY\n');
|
||||
|
||||
if (failures.length === 0) {
|
||||
console.log('✅ ALL TESTS PASSED\n');
|
||||
console.log('Menu colors are correct in all themes:');
|
||||
console.log(' ✅ Menu background: White (rgb(255, 255, 255))');
|
||||
console.log(' ✅ Menu text: Dark/Black in both light and dark themes');
|
||||
console.log(' ✅ Menu icons: Dark gray in both themes');
|
||||
console.log('\nDark theme fix verified!\n');
|
||||
} else {
|
||||
console.log(`❌ ${failures.length} ISSUE(S) FOUND:\n`);
|
||||
failures.forEach((failure, i) => {
|
||||
console.log(`${i + 1}. ${failure}`);
|
||||
});
|
||||
console.log('');
|
||||
}
|
||||
|
||||
await browser.close();
|
||||
process.exit(failures.length === 0 ? 0 : 1);
|
||||
})();
|
||||
Reference in New Issue
Block a user