Visual theme
SKY UX supports two visual themes in its patterns and component library: default theme and modern theme. Blackbaud is adopting the updated and improved modern visual theme across our products. While the design principles and patterns of SKY UX are the same in both themes, modern visual theme carries several advantages, including:
- Meets AA standards of WCAG 2.1 accessibility guidelines. (Default theme only meets 2.0 guidelines.)
- Improves usability with larger click/touch targets.
- Creates a more useful visual hierarchy with typography and spacing.
- Reduces clutter and noise for a cleaner, more focused visual aesthetic.
- Increases alignment with Blackbaud brand elements.
- Supports UI personalization for compact mode, dark mode, and other user preferences.
We encourage partners and developers to enable theme support alongside Blackbaud's rolling adoption of modern visual theme. When SPAs and SKY Add-ins are properly designed and configured, they can present either the default theme or modern theme to match the solution where they appear. This keeps user experiences consistent no matter when or where an add-in is applied. It is important to use the most up-to-date SKY UX syntax for styles and follow design guidelines for the best results in both visual themes.
Read more about enabling theme support.
The toggle switch under the navigation bar changes the visual theme displayed on this site.
- Component and guideline pages display example images and live demos in the visual theme you select, but the underlying design and development content does not change.
- Style pages change their content when viewed in the different themes. This is because they contain the specific values of the styling properties each theme applies to SKY UX classes and variables.