How do you design for dark mode accessibility in Salesforce custom components?

Dark mode in Salesforce is delivered through the Lightning Theme Builder and SLDS dark theme tokens. For custom components:

1. Use SLDS tokens, not hex values: Tokens like --slds-g-color-neutral-base-10 automatically switch between light and dark values when the theme changes. Hardcoded hex colours do not adapt.
2. Contrast re-testing: A colour pair that meets 4.5:1 in light mode may fail in dark mode — e.g., a mid-grey text on a dark background. Test all contrast ratios under both themes separately.
3. Avoid pure white on pure black: High-contrast extremes (#fff on #000) can cause halation for users with certain visual conditions. SLDS dark theme uses near-black and near-white by design.
4. Shadows and borders: Dark mode often requires replacing drop shadows (which disappear on dark backgrounds) with subtle border outlines for component delineation.
5. Images and icons: SVG icons using fill: currentColor adapt automatically. Raster images with white backgrounds appear as white boxes in dark mode — use transparent PNG backgrounds or CSS mask techniques.