{"id":37715,"date":"2024-05-28T14:02:21","date_gmt":"2024-05-28T18:02:21","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/?page_id=37715"},"modified":"2024-05-28T14:02:22","modified_gmt":"2024-05-28T18:02:22","slug":"color-palette-overrides","status":"publish","type":"page","link":"https:\/\/university-communications.ncsu.edu\/documentation\/products-and-tools\/nc-state-web-platform\/unbranded-nc-state-theme\/color-palette-overrides\/","title":{"rendered":"Color Palette Overrides"},"content":{"rendered":"\n\n\n\n\n

A high level of override granularity can be achieved, but this level of control is usually unnecessary for most sites. This level of control also benefits from a more detailed understanding of how the theme’s styling is architected. If you have any questions about implementing color overrides, please reach out to us<\/a>.<\/p>\n\n\n\n

Most sites will only need to override the “Brand Primary” and “Brand Secondary” variables.<\/p>\n\n\n\n

Brand Primary<\/h2>\n\n\n\n

This is the core color of the theme, by default this controls the colors of things like Headings, backgrounds, and links. <\/p>\n\n\n\n

Default:<\/strong> #CC0000<\/p>\n\n\n\n

Override Tag:<\/strong> brand-primary<\/p>\n\n\n\n

Brand Primary Dark<\/h2>\n\n\n\n

This is the darkened version of brand primary, it is used by most hover states and in a few other places that a darker version is needed for accessibility.<\/p>\n\n\n\n

Default:<\/strong> #990000<\/p>\n\n\n\n

Override Tag:<\/strong> brand-primary-dark<\/p>\n\n\n\n

Dark Heading text<\/h2>\n\n\n\n

This is the color of the headings, in the base theme this will default to brand-primary, but due to accessibility if your primary color is too light you may need to override this.<\/p>\n\n\n\n

Default:<\/strong> brand-primary<\/p>\n\n\n\n

Override Tag:<\/strong> dark-heading-text-color<\/p>\n\n\n\n

Text has Background<\/h2>\n\n\n\n

This is the color of the text when a background other than white is assumed to be present. In the event your backgrounds are of a lighter color this may need to be overridden for accessibility.<\/p>\n\n\n\n

Default:<\/strong> #FFFFFF (white)<\/p>\n\n\n\n

Override Tag:<\/strong> text-has-bg-color<\/p>\n\n\n\n

List Bullet<\/h2>\n\n\n\n

This is the color of the bullets in lists, it will default to the brand primary but if your brand primary is too light you may need to override.<\/p>\n\n\n\n

Default:<\/strong> brand-primary<\/p>\n\n\n\n

Override Tag:<\/strong> list-bullet<\/p>\n\n\n\n

Content Card Header<\/h2>\n\n\n\n

This is the color for the headline in the card of the Featured Content block.<\/p>\n\n\n\n

Default:<\/strong> brand-primary<\/p>\n\n\n\n

Override Tag:<\/strong> content-card-header<\/p>\n\n\n\n

Content Card Teaser<\/h2>\n\n\n\n

This is the color for the teaser in the card of the Featured Content block.<\/p>\n\n\n\n

Default:<\/strong> #333333 (dark-grey)<\/p>\n\n\n\n

Override Tag:<\/strong> content-card-teaser<\/p>\n\n\n\n

Content Card CTA<\/h2>\n\n\n\n

This is the color for the call to action in the card of the Featured Content block.<\/p>\n\n\n\n

Default:<\/strong> brand-primary<\/p>\n\n\n\n

Override Tag:<\/strong> content-card-cta<\/p>\n\n\n\n

Video Image Play indicator<\/h2>\n\n\n\n

This is the color for the youtube play icon of the Video Image block.<\/p>\n\n\n\n

Default:<\/strong> brand-primary<\/p>\n\n\n\n

Override Tag:<\/strong> video-img-play-indicator<\/p>\n\n\n\n

Video Image Play hover<\/h2>\n\n\n\n

This is the color for hover state of the youtube play icon in the Video Image block.<\/p>\n\n\n\n

Default:<\/strong> brand-primary-dark<\/p>\n\n\n\n

Override Tag:<\/strong> video-img-play-hover<\/p>\n\n\n\n

Background Colors<\/h2>\n\n\n\n

These are the colors that are used by dynamic background colors of most blocks within the theme. For most they can be overridden in two ways either the brand color or the custom background color, for background colors that use a brand color they will always default to the brand color unless the custom background color is set in the overrides section. For defaults and overrides see the figure below.<\/p>\n\n\n\n

Default:<\/strong> Varies based on the background, the first seven are the brand primary, secondary, and tertiary colors, with the last three being set to shades of grey.<\/p>\n\n\n\n

Override:<\/strong> custom-background# (# corresponding to the order of the backgrounds in the selector)<\/p>\n\n\n\n

Background Hover\/Active Colors<\/h2>\n\n\n\n

Additionally Background colors have a related -active override to assign darker or lighter colors for on hover\/focus states.<\/p>\n\n\n\n

Default:<\/strong> Varies, the first seven are darkened versions of the default brand primary, secondary, and tertiary colors, with the last three being set to shades of grey.<\/p>\n\n\n\n

Override:<\/strong> custom-background#-active (# corresponding to the order of the backgrounds in the selector)<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"

A high level of override granularity can be achieved, but this level of control is usually unnecessary for most sites. This level of control also benefits from a more detailed understanding of how the theme’s styling is architected. If you have any questions about implementing color overrides, please reach out to us. Most sites will…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3694,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"ncst_custom_author":"","ncst_show_custom_author":false,"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"One of the biggest features of the unbranded version of the NC State Theme is the ability to change the color scheme used on the site.\"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-37715","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/37715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/comments?post=37715"}],"version-history":[{"count":1,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/37715\/revisions"}],"predecessor-version":[{"id":37717,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/37715\/revisions\/37717"}],"up":[{"embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/3694"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=37715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}