Replies: 1 comment
-
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 Examples:
Option 2: Primer Text<Text color='fg.subtle'>
Placeholder Text
</Text> If you're using a 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 Footnotes
|
Beta Was this translation helpful? Give feedback.
-
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?
![issue2](https://private-user-images.githubusercontent.com/117038630/301741367-f11ccd12-59f0-4841-9ed6-91fc021f66da.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE3Mjg4MzAsIm5iZiI6MTcyMTcyODUzMCwicGF0aCI6Ii8xMTcwMzg2MzAvMzAxNzQxMzY3LWYxMWNjZDEyLTU5ZjAtNDg0MS05ZWQ2LTkxZmMwMjFmNjZkYS5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzIzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyM1QwOTU1MzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03ZTU1OWFlZWNlNTZkM2NjYzU1OTY2YjA1Y2M4NDJhNDYzODY5NWJkZGJhNmFjYmI5NTFlYzBhZDQzNzdhZDRkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.u6tXlpSE5UddSQg5fLJGdNd-L4-L6d0s7vQd9qo6eYI)
![issue1](https://private-user-images.githubusercontent.com/117038630/301741376-acfc3b86-e443-4958-8de9-ce17c4c8d05d.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE3Mjg4MzAsIm5iZiI6MTcyMTcyODUzMCwicGF0aCI6Ii8xMTcwMzg2MzAvMzAxNzQxMzc2LWFjZmMzYjg2LWU0NDMtNDk1OC04ZGU5LWNlMTdjNGM4ZDA1ZC5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzIzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyM1QwOTU1MzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zOWFjZDYzY2RhZGJjOWE2MTQ3YThmMGJhZGNlNWEwZjE0YmJjMTJiYjY3YzZmOTYwYTE4ZjIwOTZmZDQ3YzI1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.77ADrNTLG3mMA-DmLjSLgdPfs2A4Ija3v7_yR_9kly8)
Beta Was this translation helpful? Give feedback.
All reactions