Reagrding DropDown Text

[Lakszy]

I am currently maintaining both dark mode and light mode in my project, but I'm encountering difficulty accessing the option text color. Can someone please assist me with this issue?

[ntrappe-msft]

Hi, I'm not sure exactly what you've tried (it might be helpful to share a code snippet) but there are 3 ways I'd recommend trying to set text colors given a dark/light mode.

Option 1: Primer CSS Text Colors

<ActionList.Item className='color-fg-success'>
  Placeholder Text
</ActionList.Item>

You can set the className of your ActionList to one of the many color options Primer provides¹. These classes are handy because they're compatible with the different color modes. For example, given light mode, color-fg-success appears as a dark purple. When you switch to dark mode, it appears as a brighter purple.

Examples:

• color-fg-default (default grey)
• color-fg-muted (lower contrast grey)
• color-fg-success (purple)
• color-fg-open (green)

Option 2: Primer Text

<Text color='fg.subtle'>
  Placeholder Text
</Text>

If you're using a Text component, you can use the color prop to pass in one of the color options we mentioned above. Once you've specified a color, they're also compatible with the different color modes² and will change accordingly.

Option 3: Custom Colors

{/* When returning your React component, pass it your custom color scheme */}
<Caption color={captionColor}>
  Placeholder Text
</Caption>

// Define the custom color scheme: which colors per color mode
const captionColor = useColorSchemeVar({
  light: '#596069',   
  dark: '#8d949d',
});

// Tell your component to use the color scheme
const Caption = styled(Text)`
  color: ${props => props.color};
`;

If you don't love the color options that are already available, you can set your own. You'll have to use the useColorSchemeVar to specify the color your component should be given the different color modes ³. For example, I'll only be using light and dark mode so I set the associated colors for each. This will then by passed as a prop to your component so it can set the color of the text.

Footnotes

1. Make sure you've installed Primer css npm i @primer/css and added it locally (say to your html file). ↩

2. By color mode I mean the colorMode prop associated with the ThemeProvider that wraps your React App. When you're switching modes, you should be updating that so the colors change appopriately. ↩

3. Make sure to import useColorSchemeVar from @primer/react. ↩