I’m trying to make our current application more accessible. The default color for ::placeholder in most browsers does not have enough contrast. We can set it in webwb • py-cosmos-custom-css • css but this might be a problem with future releases.
Is there a way to set this in the Skin for theme-cosmos or should I continue to use the custom css option?
The short answer is: use Custom CSS. Theme Cosmos does not currently expose a skin setting for styling the ::placeholder pseudo-element.
The Skin rule in Theme Cosmos allows you to configure colors, fonts, spacing, controls, etc., but placeholder text is not one of the configurable design tokens or skin properties. The browser renders placeholder text using the CSS ::placeholder pseudo-element, and Cosmos does not provide a corresponding setting in the Skin.
Will this cause problems during upgrades?
Generally, this is one of the safer customizations because:
You’re overriding standard CSS rather than modifying OOTB rules.
The py-cosmos-custom-css extension is intended for application-specific styling.
::placeholder is a standard CSS pseudo-element, so it’s unlikely to disappear.
The only caveat is that if Pega changes the HTML structure or introduces CSS variables/tokens for placeholder colors in a future release, you may need to revisit your CSS. However, this is a low-maintenance customization compared to overriding Cosmos component styles.