Colors

Modify Site Colors to match your theme.

Key Takeaways

  • Customize colors in Admin Tools → Settings → CM → Themes → Compass: Urban Hope.
  • Start with Primary color:
  1. Provide Hex and RGB values
  2. Define darker and lighter variations
  3. Set a Primary Contrast color for readability
  • Configure Dark Mode colors to ensure proper visibility.
  • Repeat the process for Secondary colors.
  • Neutral colors provide a full light-to-dark scale and can be adjusted (not limited to gray).
  • Status colors indicate success, warning, or error states.
  • Heading and Link colors can reference existing theme colors.

Best Practices

  • Test colors in both light and dark mode for consistency.
  • Ensure strong contrast for readability and accessibility.
  • Keep primary and secondary colors aligned with your brand.
  • Use neutral colors to support, not compete with, primary elements.
  • Reuse existing color variables to maintain a consistent design system.
Top