Colors
Mantle uses Tailwind under the hood for all its CSS styling. However, we differ from Tailwind when it comes to colors. Mantle provides a full color library that automatically provides a dark mode. This is different from standard Tailwind usage that requires dark class variations. By simply specifying light colors provided by mantle, you'll get dark mode for free. If you require additional customization, you can provide dark variant classes as an override.
Variables
Mantle's colors are delivered as CSS variables via Tailwind's API eg. .text-blue-500. They can be directly accessed via var(--primary-500) but do note that you'll need to wrap everything in hsl() like so: hsl(var(--primary-500)). This allows for Tailwind operations like text-blue-500/25.
Blue (primary)
ngrok's primary branding color is used in its logo as well as primary links. Use it sparingly to attract attention.