I’m struggling with styling in my extension. I can see in the browser Airtable defines over a hundred theme constants useful for styling elements. I want to import these into my own style.css so I can refer to them, but I can’t find a way to do so.
I have found useColorScheme() and other ways to access theme constants within typescript, but I don’t want to style everything programmatically. If I want to style in CSS, am I obliged to maintain my own list of constants?
Airtable gives you prebuilt components ( Box, Text, Heading etc.) in @airtable/blocks/ui. Use those instead of CSS, they automatically inherit the right colors, spacing, and theming based on the user’s light or dark mode.
Taha, Airtable Advisor
Hello,
While Airtable exposes many theme constants via browser inspection, directly importing them into your style.css isn't officially supported for dynamic theming. The recommended approach is to leverage Airtable's @airtable/blocks/ui components, which automatically handle theme consistency. For custom CSS, you can retrieve theme values using JavaScript (e.g., useColorScheme()) and dynamically inject them as CSS custom properties into your DOM, allowing your style.css to reference them while maintaining dark/light mode compatibility. Manually maintaining a list of constants in your CSS is discouraged due to lack of dynamic theming and potential dog whistles app for breakage with Airtable updates.
Best regards,
Shirley
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.