All Color Variables
Complete reference of all 300+ Squarespace color theme CSS custom properties, grouped by category.
This page contains a comprehensive reference of all color variables available in Squarespace's section theme system. These variables are automatically generated for each of your 10 color themes and applied as CSS custom properties on each section.
Each variable is grouped by category to help you find the right color for your needs. Click on any custom property to copy it to your clipboard.
Section Background
Global section background and section divider/inset borders.
| Name | Custom Property |
|---|---|
| Section Background Color | var(--siteBackgroundColor) |
| Background Overlay Color | var(--backgroundOverlayColor) |
| Section Divider Stroke Color | var(--section-divider-stroke-color) |
| Section Inset Border Color | var(--section-inset-border-color) |
Text Block
Text block backgrounds, strokes, and highlight colors.
| Name | Custom Property |
|---|---|
| Text Block Background Color | var(--tweak-text-block-background-color) |
| Text Block Stroke Color | var(--tweak-text-block-stroke-color) |
| Text Highlight Color | var(--text-highlight-color) |
| Text Highlight Color on Background | var(--text-highlight-color-on-background) |
Headings
Heading colors for all heading sizes and links.
| Name | Custom Property |
|---|---|
| Heading Extra Large Color | var(--headingExtraLargeColor) |
| Heading Large Color | var(--headingLargeColor) |
| Heading Medium Color | var(--headingMediumColor) |
| Heading Small Color | var(--headingSmallColor) |
| Heading Link Color | var(--headingLinkColor) |
Paragraphs
Paragraph text and link colors across sizes.
| Name | Custom Property |
|---|---|
| Paragraph Large Color | var(--paragraphLargeColor) |
| Paragraph Medium Color | var(--paragraphMediumColor) |
| Paragraph Small Color | var(--paragraphSmallColor) |
| Paragraph Link Color | var(--paragraphLinkColor) |
Buttons
Primary, secondary, and tertiary button colors.
| Name | Custom Property |
|---|---|
| Primary Button Background Color | var(--primaryButtonBackgroundColor) |
| Primary Button Text Color | var(--primaryButtonTextColor) |
| Secondary Button Background Color | var(--secondaryButtonBackgroundColor) |
| Secondary Button Text Color | var(--secondaryButtonTextColor) |
| Tertiary Button Background Color | var(--tertiaryButtonBackgroundColor) |
| Tertiary Button Text Color | var(--tertiaryButtonTextColor) |
Main Navigation
Header background, borders, shadows, and navigation link colors.
| Name | Custom Property |
|---|---|
| Header Border Color | var(--headerBorderColor) |
| Solid Header Background Color | var(--solidHeaderBackgroundColor) |
| Solid Header Border Color | var(--solidHeaderBorderColor) |
| Gradient Header Background Color | var(--gradientHeaderBackgroundColor) |
| Gradient Header Border Color | var(--gradientHeaderBorderColor) |
| Header Drop Shadow Color | var(--headerDropShadowColor) |
| Solid Header Drop Shadow Color | var(--solidHeaderDropShadowColor) |
| Gradient Header Drop Shadow Color | var(--gradientHeaderDropShadowColor) |
| Announcement Bar Background Color | var(--announcement-bar-background-color) |
| Announcement Bar Text Color | var(--announcement-bar-text-color) |
| Navigation Link Color | var(--navigationLinkColor) |
| Solid Header Navigation Color | var(--solidHeaderNavigationColor) |
| Gradient Header Navigation Color | var(--gradientHeaderNavigationColor) |
| Site Title Color | var(--siteTitleColor) |
Menu Overlay
Overlay menu background, buttons, and links.
| Name | Custom Property |
|---|---|
| Menu Overlay Background Color | var(--menuOverlayBackgroundColor) |
| Menu Overlay Button Background Color | var(--menuOverlayButtonBackgroundColor) |
| Menu Overlay Button Text Color | var(--menuOverlayButtonTextColor) |
| Menu Overlay Navigation Link Color | var(--menuOverlayNavigationLinkColor) |
Menu Block
Menu block titles, navigation, item titles/prices/descriptions.
| Name | Custom Property |
|---|---|
| Menu Block Title Color | var(--tweak-menu-block-title-color) |
| Menu Block Nav Color | var(--tweak-menu-block-nav-color) |
| Menu Block Item Title Color | var(--tweak-menu-block-item-title-color) |
| Menu Block Item Price Color | var(--tweak-menu-block-item-price-color) |
| Menu Block Item Description Color | var(--tweak-menu-block-item-description-color) |
Form Block
Form block background, text, fields, accents, and buttons.
| Name | Custom Property |
|---|---|
| Form Block Background Color | var(--tweak-form-block-background-color) |
| Form Block Title Color | var(--tweak-form-block-title-color) |
| Form Block Description Color | var(--tweak-form-block-description-color) |
| Form Block Caption Color | var(--tweak-form-block-caption-color) |
| Form Block Field Input Color | var(--tweak-form-block-field-input-color) |
| Form Block Field Border Color | var(--tweak-form-block-field-border-color) |
| Form Block Field Fill Color | var(--tweak-form-block-field-fill-color) |
| Form Block Field Accessory Color | var(--tweak-form-block-field-accessory-color) |
| Form Block Field Accent Color | var(--tweak-form-block-field-accent-color) |
| Form Block Button Background Color | var(--tweak-form-block-button-background-color) |
| Form Block Button Text Color | var(--tweak-form-block-button-text-color) |
| Form Block Stroke Color | var(--tweak-form-block-stroke-color) |
Newsletter Block
Newsletter block text and button colors, including on-background variants.
| Name | Custom Property |
|---|---|
| Newsletter Block Background Color | var(--tweak-newsletter-block-background-color) |
| Newsletter Block Title Color | var(--tweak-newsletter-block-title-color) |
| Newsletter Block Title Color on Background | var(--tweak-newsletter-block-title-color-on-background) |
| Newsletter Block Description Color | var(--tweak-newsletter-block-description-color) |
| Newsletter Block Description Color on Background | var(--tweak-newsletter-block-description-color-on-background) |
| Newsletter Block Button Background Color | var(--tweak-newsletter-block-button-background-color) |
| Newsletter Block Button Background Color on Background | var(--tweak-newsletter-block-button-background-color-on-background) |
| Newsletter Block Button Text Color | var(--tweak-newsletter-block-button-text-color) |
| Newsletter Block Button Text Color on Background | var(--tweak-newsletter-block-button-text-color-on-background) |
| Newsletter Block Footnote Color | var(--tweak-newsletter-block-footnote-color) |
| Newsletter Block Footnote Color on Background | var(--tweak-newsletter-block-footnote-color-on-background) |
| Newsletter Block Stroke Color | var(--tweak-newsletter-block-stroke-color) |
Summary Block
Summary block backgrounds, text, metadata, and read more link colors.
| Name | Custom Property |
|---|---|
| Summary Block Background Color | var(--tweak-summary-block-background-color) |
| Summary Block Title Color | var(--tweak-summary-block-title-color) |
| Summary Block Excerpt Color | var(--tweak-summary-block-excerpt-color) |
| Summary Block Read More Color | var(--tweak-summary-block-read-more-color) |
| Summary Block Primary Metadata Color | var(--tweak-summary-block-primary-metadata-color) |
| Summary Block Secondary Metadata Color | var(--tweak-summary-block-secondary-metadata-color) |
| Summary Block Header Text Color | var(--tweak-summary-block-header-text-color) |
| Summary Block Stroke Color | var(--tweak-summary-block-stroke-color) |
| Summary Block Read More Color on Background | var(--tweak-summary-block-read-more-color-on-background) |
Quote Block
Quote block background, text, source, and strokes (with on-background variants).
| Name | Custom Property |
|---|---|
| Quote Block Background Color | var(--tweak-quote-block-background-color) |
| Quote Block Text Color | var(--tweak-quote-block-text-color) |
| Quote Block Text Color on Background | var(--tweak-quote-block-text-color-on-background) |
| Quote Block Source Color | var(--tweak-quote-block-source-color) |
| Quote Block Source Color on Background | var(--tweak-quote-block-source-color-on-background) |
| Quote Block Stroke Color | var(--tweak-quote-block-stroke-color) |
Accordion Block
Accordion icons, backgrounds, dividers, and strokes.
| Name | Custom Property |
|---|---|
| Accordion Block Icon Color | var(--tweak-accordion-block-icon-color) |
| Accordion Block Icon Color on Background | var(--tweak-accordion-block-icon-color-on-background) |
| Accordion Block Background Color | var(--tweak-accordion-block-background-color) |
| Accordion Block Divider Color | var(--tweak-accordion-block-divider-color) |
| Accordion Block Divider Color on Background | var(--tweak-accordion-block-divider-color-on-background) |
| Accordion Block Stroke Color | var(--tweak-accordion-block-stroke-color) |
Marquee Block
Marquee block background, headings, paragraphs, and strokes.
| Name | Custom Property |
|---|---|
| Marquee Block Background Color | var(--tweak-marquee-block-background-color) |
| Marquee Block Heading Color | var(--tweak-marquee-block-heading-color) |
| Marquee Block Heading Color on Background | var(--tweak-marquee-block-heading-color-on-background) |
| Marquee Block Paragraph Color | var(--tweak-marquee-block-paragraph-color) |
| Marquee Block Paragraph Color on Background | var(--tweak-marquee-block-paragraph-color-on-background) |
| Marquee Block Stroke Color | var(--tweak-marquee-block-stroke-color) |
Donation Block
Donation block background and stroke colors.
| Name | Custom Property |
|---|---|
| Donation Block Background Color | var(--donation-block-background-color) |
| Donation Block Stroke Color | var(--donation-block-stroke-color) |
Line Block
Line block line color.
| Name | Custom Property |
|---|---|
| Line Block Line Color | var(--tweak-line-block-line-color) |
Image Block
Card/Poster/Stack overlays, titles, subtitles, buttons, and links.
| Name | Custom Property |
|---|---|
| Image Block Overlay Color | var(--image-block-overlay-color) |
| Image Block Card Image Button Background Color | var(--image-block-card-image-button-bg-color) |
| Image Block Card Image Button Text Color | var(--image-block-card-image-button-text-color) |
| Image Block Card Image Title Color | var(--image-block-card-image-title-color) |
| Image Block Card Image Subtitle Color | var(--image-block-card-image-subtitle-color) |
| Image Block Card Inline Link Color | var(--image-block-card-inline-link-color) |
| Image Block Poster Image Button Background Color | var(--image-block-poster-image-button-bg-color) |
| Image Block Poster Image Button Text Color | var(--image-block-poster-image-button-text-color) |
| Image Block Poster Image Title Color | var(--image-block-poster-image-title-color) |
| Image Block Poster Image Subtitle Color | var(--image-block-poster-image-subtitle-color) |
| Image Block Poster Inline Link Color | var(--image-block-poster-inline-link-color) |
| Image Block Stack Image Button Background Color | var(--image-block-stack-image-button-bg-color) |
| Image Block Stack Image Button Text Color | var(--image-block-stack-image-button-text-color) |
| Image Block Stack Image Title Color | var(--image-block-stack-image-title-color) |
| Image Block Stack Image Subtitle Color | var(--image-block-stack-image-subtitle-color) |
| Image Block Stack Inline Link Color | var(--image-block-stack-inline-link-color) |
Image Block Collage
Collage background, overlays, buttons, titles, subtitles, and links.
| Name | Custom Property |
|---|---|
| Image Block Collage Background Color | var(--image-block-collage-background-color) |
| Image Block Collage Image Overlay Color | var(--image-block-collage-image-overlay-color) |
| Image Block Collage Image Button Background Color | var(--image-block-collage-image-button-bg-color) |
| Image Block Collage Image Button Text Color | var(--image-block-collage-image-button-text-color) |
| Image Block Collage Image Title Color | var(--image-block-collage-image-title-color) |
| Image Block Collage Image Subtitle Color | var(--image-block-collage-image-subtitle-color) |
| Image Block Collage Inline Link Color | var(--image-block-collage-inline-link-color) |
| Image Block Collage Image Title BG Color | var(--image-block-collage-image-title-bg-color) |
Image Block Overlap
Overlap variant overlays, buttons, titles, subtitles, and links.
| Name | Custom Property |
|---|---|
| Image Block Overlap Inline Link Color | var(--image-block-overlap-inline-link-color) |
| Image Block Overlap Image Overlay Color | var(--image-block-overlap-image-overlay-color) |
| Image Block Overlap Image Button Background Color | var(--image-block-overlap-image-button-bg-color) |
| Image Block Overlap Image Button Text Color | var(--image-block-overlap-image-button-text-color) |
| Image Block Overlap Image Subtitle Color | var(--image-block-overlap-image-subtitle-color) |
| Image Block Overlap Image Title Color | var(--image-block-overlap-image-title-color) |
| Image Block Overlap Image Title BG Color | var(--image-block-overlap-image-title-bg-color) |
Gallery
Gallery icons and lightbox background colors.
| Name | Custom Property |
|---|---|
| Gallery Icon Color | var(--tweak-gallery-icon-color) |
| Gallery Icon Background Color | var(--tweak-gallery-icon-background-color) |
| Gallery Lightbox Icon Color | var(--tweak-gallery-lightbox-icon-color) |
| Gallery Lightbox Background Color | var(--tweak-gallery-lightbox-background-color) |
Blog
Blog item titles, meta, comments, and pagination colors.
| Name | Custom Property |
|---|---|
| Blog Item Title Color | var(--tweak-blog-item-title-color) |
| Blog Item Meta Color | var(--tweak-blog-item-meta-color) |
| Blog Item Author Profile Color | var(--tweak-blog-item-author-profile-color) |
| Blog Item Comment Text Color | var(--tweak-blog-item-comment-text-color) |
| Blog Item Comment Meta Color | var(--tweak-blog-item-comment-meta-color) |
| Blog Item Pagination Icon Color | var(--tweak-blog-item-pagination-icon-color) |
| Blog Item Pagination Title Color | var(--tweak-blog-item-pagination-title-color) |
| Blog Item Pagination Meta Color | var(--tweak-blog-item-pagination-meta-color) |
Blog Side‑by‑Side
Side‑by‑side list titles, meta, excerpts, and read more.
| Name | Custom Property |
|---|---|
| Blog Side-by-Side List Title Color | var(--tweak-blog-side-by-side-list-title-color) |
| Blog Side-by-Side List Meta Color | var(--tweak-blog-side-by-side-list-meta-color) |
| Blog Side-by-Side List Excerpt Color | var(--tweak-blog-side-by-side-list-excerpt-color) |
| Blog Side-by-Side List Read More Color | var(--tweak-blog-side-by-side-list-read-more-color) |
Blog Masonry
Masonry list titles, meta, excerpts, and read more.
| Name | Custom Property |
|---|---|
| Blog Masonry List Title Color | var(--tweak-blog-masonry-list-title-color) |
| Blog Masonry List Meta Color | var(--tweak-blog-masonry-list-meta-color) |
| Blog Masonry List Excerpt Color | var(--tweak-blog-masonry-list-excerpt-color) |
| Blog Masonry List Read More Color | var(--tweak-blog-masonry-list-read-more-color) |
Blog Single Column
Single column list titles, meta, excerpts, and read more.
| Name | Custom Property |
|---|---|
| Blog Single Column List Title Color | var(--tweak-blog-single-column-list-title-color) |
| Blog Single Column List Meta Color | var(--tweak-blog-single-column-list-meta-color) |
| Blog Single Column List Excerpt Color | var(--tweak-blog-single-column-list-excerpt-color) |
| Blog Single Column List Read More Color | var(--tweak-blog-single-column-list-read-more-color) |
Blog Basic Grid
Basic grid list titles, meta, excerpts, and read more.
| Name | Custom Property |
|---|---|
| Blog Basic Grid List Title Color | var(--tweak-blog-basic-grid-list-title-color) |
| Blog Basic Grid List Meta Color | var(--tweak-blog-basic-grid-list-meta-color) |
| Blog Basic Grid List Excerpt Color | var(--tweak-blog-basic-grid-list-excerpt-color) |
| Blog Basic Grid List Read More Color | var(--tweak-blog-basic-grid-list-read-more-color) |
Product
Product titles, prices, sale prices, scarcity, descriptions, and breadcrumbs.
| Name | Custom Property |
|---|---|
| Product Basic Item Title Color | var(--tweak-product-basic-item-title-color) |
| Product Basic Item Price Color | var(--tweak-product-basic-item-price-color) |
| Product Basic Item Sale Price Color | var(--tweak-product-basic-item-sale-price-color) |
| Product Basic Item Scarcity Color | var(--tweak-product-basic-item-scarcity-color) |
| Product Basic Item Description Color | var(--tweak-product-basic-item-description-color) |
| Product Basic Item Variant Fields Color | var(--tweak-product-basic-item-variant-fields-color) |
| Product Basic Item Breadcrumb Nav Color | var(--tweak-product-basic-item-breadcumb-nav-color) |
Product Detail & Subscriptions
Quick view and subscription UI text and button colors.
| Name | Custom Property |
|---|---|
| Product Quick View Button Color | var(--tweak-product-quick-view-button-color) |
| Product Quick View Lightbox Overlay Color | var(--tweak-product-quick-view-lightbox-overlay-color) |
| Product Quick View Lightbox Controls Color | var(--tweak-product-quick-view-lightbox-controls-color) |
| Product Detail One-Time Purchase Price Text Color | var(--product-detail-one-time-purchase-price-text-color) |
| Product Detail Subscription Price Text Color | var(--product-detail-subscription-price-text-color) |
| Product Detail Subscriptions Frequency Text Color | var(--product-detail-subscriptions-frequency-text-color) |
| Product Detail Subscriptions Description Text Color | var(--product-detail-subscriptions-description-text-color) |
| Product Detail Subscriptions Title Color | var(--product-detail-subscriptions-title-color) |
| Product Detail Subscriptions Button Background Color | var(--product-detail-subscriptions-button-background-color) |
| Product Detail Subscriptions Button Text Color | var(--product-detail-subscriptions-button-text-color) |
Product Grid
Text‑below list nav, titles, prices, sale prices, status, and pagination.
| Name | Custom Property |
|---|---|
| Product Grid Text-Below List Category Nav Color | var(--tweak-product-grid-text-below-list-category-nav-color) |
| Product Grid Text-Below List Title Color | var(--tweak-product-grid-text-below-list-title-color) |
| Product Grid Text-Below List Price Color | var(--tweak-product-grid-text-below-list-price-color) |
| Product Grid Text-Below List Sale Price Color | var(--tweak-product-grid-text-below-list-sale-price-color) |
| Product Grid Text-Below List Status Color | var(--tweak-product-grid-text-below-list-status-color) |
| Product Grid Text-Below List Scarcity Color | var(--tweak-product-grid-text-below-list-scarcity-color) |
| Product Grid Text-Below List Pagination Color | var(--tweak-product-grid-text-below-list-pagination-color) |
Portfolio
Portfolio grid/index titles and overlay colors.
| Name | Custom Property |
|---|---|
| Portfolio Grid Basic Title Color | var(--portfolio-grid-basic-title-color) |
| Portfolio Grid Overlay Title Color | var(--portfolio-grid-overlay-title-color) |
| Portfolio Grid Overlay Overlay Color | var(--portfolio-grid-overlay-overlay-color) |
| Portfolio Index Background Title Color | var(--portfolio-index-background-title-color) |
| Portfolio Hover Static Title Color | var(--portfolio-hover-static-title-color) |
| Portfolio Hover Follow Title Color | var(--portfolio-hover-follow-title-color) |
Portfolio Item Pagination
Item pagination titles, icons, and meta colors.
| Name | Custom Property |
|---|---|
| Portfolio Item Pagination Title Color | var(--tweak-portfolio-item-pagination-title-color) |
| Portfolio Item Pagination Icon Color | var(--tweak-portfolio-item-pagination-icon-color) |
| Portfolio Item Pagination Meta Color | var(--tweak-portfolio-item-pagination-meta-color) |
Video
Video item titles, pagination, meta, descriptions, and grid colors.
| Name | Custom Property |
|---|---|
| Video Item Title Color | var(--tweak-video-item-title-color) |
| Video Item Pagination Title Color | var(--tweak-video-item-pagination-title-color) |
| Video Item Pagination Icon Color | var(--tweak-video-item-pagination-icon-color) |
| Video Item Meta Color | var(--tweak-video-item-meta-color) |
| Video Item Description Color | var(--tweak-video-item-description-color) |
| Video Grid Basic Title Color | var(--video-grid-basic-title-color) |
| Video Grid Basic Description Color | var(--video-grid-basic-description-color) |
| Video Grid Basic Meta Color | var(--video-grid-basic-meta-color) |
| Video Grid Category Nav Color | var(--video-grid-category-nav-color) |
| Video Preview Badge Background Color | var(--video-preview-badge-background-color) |
| Video Preview Badge Font Color | var(--video-preview-badge-font-color) |
Events
Events pagination titles, icons, and date colors.
| Name | Custom Property |
|---|---|
| Events Item Pagination Title Color | var(--tweak-events-item-pagination-title-color) |
| Events Item Pagination Icon Color | var(--tweak-events-item-pagination-icon-color) |
| Events Item Pagination Date Color | var(--tweak-events-item-pagination-date-color) |
Social Links Block
Social links primary and secondary icon colors.
| Name | Custom Property |
|---|---|
| Social Links Block Main Icon Color | var(--social-links-block-main-icon-color) |
| Social Links Block Secondary Icon Color | var(--social-links-block-secondary-icon-color) |
Shape Block
Shape block background, drop shadow, and stroke colors.
| Name | Custom Property |
|---|---|
| Shape Block Background Color | var(--shape-block-background-color) |
| Shape Block Dropshadow Color | var(--shape-block-dropshadow-color) |
| Shape Block Stroke Color | var(--shape-block-stroke-color) |
List Section
List section titles, banners, simple and carousel variants.
| Name | Custom Property |
|---|---|
| List Section Title Color | var(--list-section-title-color) |
| List Section Banner Slideshow Title Color | var(--list-section-banner-slideshow-title-color) |
| List Section Banner Slideshow Description Color | var(--list-section-banner-slideshow-description-color) |
| List Section Banner Slideshow Arrow Background Color | var(--list-section-banner-slideshow-arrow-background-color) |
| List Section Banner Slideshow Arrow Color | var(--list-section-banner-slideshow-arrow-color) |
| List Section Banner Slideshow Button Background Color | var(--list-section-banner-slideshow-button-background-color) |
| List Section Banner Slideshow Button Text Color | var(--list-section-banner-slideshow-button-text-color) |
| List Section Banner Slideshow Card Color | var(--list-section-banner-slideshow-card-color) |
| List Section Banner Slideshow Card Button Background Color | var(--list-section-banner-slideshow-card-button-background-color) |
| List Section Banner Slideshow Card Button Text Color | var(--list-section-banner-slideshow-card-button-text-color) |
| List Section Banner Slideshow Card Description Color | var(--list-section-banner-slideshow-card-description-color) |
| List Section Banner Slideshow Card Title Color | var(--list-section-banner-slideshow-card-title-color) |
| List Section Simple Button Background Color | var(--list-section-simple-button-background-color) |
| List Section Simple Button Text Color | var(--list-section-simple-button-text-color) |
| List Section Simple Card Description Color | var(--list-section-simple-card-description-color) |
| List Section Simple Card Description Link Color | var(--list-section-simple-card-description-link-color) |
| List Section Simple Card Title Color | var(--list-section-simple-card-title-color) |
| List Section Simple Card Button Background Color | var(--list-section-simple-card-button-background-color) |
| List Section Simple Card Button Text Color | var(--list-section-simple-card-button-text-color) |
| List Section Simple Card Color | var(--list-section-simple-card-color) |
| List Section Simple Description Color | var(--list-section-simple-description-color) |
| List Section Carousel Button Background Color | var(--list-section-carousel-button-background-color) |
| List Section Carousel Button Text Color | var(--list-section-carousel-button-text-color) |
| List Section Carousel Arrow Background Color | var(--list-section-carousel-arrow-background-color) |
| List Section Carousel Arrow Color | var(--list-section-carousel-arrow-color) |
| List Section Carousel Title Color | var(--list-section-carousel-title-color) |
| List Section Carousel Description Color | var(--list-section-carousel-description-color) |
| List Section Carousel Card Title Color | var(--list-section-carousel-card-title-color) |
| List Section Carousel Card Description Color | var(--list-section-carousel-card-description-color) |
| List Section Carousel Card Description Link Color | var(--list-section-carousel-card-description-link-color) |
| List Section Carousel Card Button Background Color | var(--list-section-carousel-card-button-background-color) |
| List Section Carousel Card Button Text Color | var(--list-section-carousel-card-button-text-color) |
| List Section Carousel Card Color | var(--list-section-carousel-card-color) |
Course Item Nav
Course item navigation text, backgrounds, borders, and active states.
| Name | Custom Property |
|---|---|
| Course Item Nav Text Color | var(--course-item-nav-text-color) |
| Course Item Nav Background Color | var(--course-item-nav-background-color) |
| Course Item Nav Border Color | var(--course-item-nav-border-color) |
| Course Item Nav Active Lesson Background Color | var(--course-item-nav-active-lesson-background-color) |
| Course Item Nav Active Lesson Text Color | var(--course-item-nav-active-lesson-text-color) |
Course List Grid
Grid layout borders, backgrounds, hovers, text, and dividers.
| Name | Custom Property |
|---|---|
| Course List Grid Layout Course Item Border Color | var(--course-list-grid-layout-course-item-border-color) |
| Course List Grid Layout Course Item Background Color | var(--course-list-grid-layout-course-item-background-color) |
| Course List Grid Layout Course Item Hover Background Color | var(--course-list-grid-layout-course-item-hover-background-color) |
| Course List Grid Layout Course Item Text Color | var(--course-list-grid-layout-course-item-text-color) |
| Course List Grid Layout Chapter Divider Color | var(--course-list-grid-layout-chapter-divider-color) |
Course List
Course list backgrounds, progress bars, chapters, and text.
| Name | Custom Property |
|---|---|
| Course List Course Item Background | var(--course-list-course-item-background) |
| Course List Course Item Hover Background | var(--course-list-course-item-hover-background) |
| Course List Course Chapter Divider Color | var(--course-list-course-chapter-divider-color) |
| Course List Course Progress Bar Color | var(--course-list-course-progress-bar-color) |
| Course List Course Item Text Color | var(--course-list-course-item-text-color) |
Additional
Additional site‑wide variables like toggles and site title color.
| Name | Custom Property |
|---|---|
| Toggle Off Color | var(--toggle-off-color) |
| Toggle On Color | var(--toggle-on-color) |
For an overview of how to use color variables in Squarespace, see Color Variables in Squarespace.