---
title: Light and dark surfaces from one theme | Unbound
description: Unbound expresses light and dark from the same theme settings so marketing pages can change surface without installing a second theme.
image: https://hs.phrutos.com/hubfs/unbound-news-covers/cover-03.png
---

[Skip to main content](https://hs.phrutos.com/news/light-and-dark-from-one-theme#main-content)

[![Logo](https://hs.phrutos.com/hubfs/raw_assets/public/Unbound/images/logo-unbound-on-light.svg)](https://hs.phrutos.com/)

- [Point of view](https://hs.phrutos.com/news/light-and-dark-from-one-theme#point-of-view)
- [The system](https://hs.phrutos.com/news/light-and-dark-from-one-theme#system)
  
  Foundation 
    - [![Design tokens](https://hs.phrutos.com/hubfs/Icon.svg) Design tokens Color, type, and spacing as one system.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#system)
    - [![Theme settings](https://hs.phrutos.com/hubfs/Icon%20(1).svg) Theme settings Brand controls for every page.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#system)
    - [![Global header](https://hs.phrutos.com/hubfs/Icon.svg) Global header One header, every template.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#system)

  Build 
    - [![Modules](https://hs.phrutos.com/hubfs/Icon%20(1).svg) Modules Reusable sections matched to brand.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)
    - [![Templates](https://hs.phrutos.com/hubfs/Icon.svg) Templates Page types ready to publish.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)
    - [![Styles](https://hs.phrutos.com/hubfs/Icon%20(1).svg) Styles Layout, chrome, and motion.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)

  Start here 
    - [How Unbound works From tokens to live pages.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#how-it-works)
    - Get a demo
      
      See Unbound on a live brand site.
- [Capabilities](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)
  
  Layout 
    - [![Hero Banner](https://hs.phrutos.com/hubfs/Icon.svg) Hero Banner Split, centered, and form heroes.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)
    - [![Content Split](https://hs.phrutos.com/hubfs/Icon%20(1).svg) Content Split Copy and media, side by side.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)
    - [![Rich Content](https://hs.phrutos.com/hubfs/Icon.svg) Rich Content Long-form sections with structure.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)

  Proof 
    - [![Testimonials](https://hs.phrutos.com/hubfs/Icon%20(1).svg) Testimonials Quotes, logos, and social proof.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)
    - [![Stats & Metrics](https://hs.phrutos.com/hubfs/Icon.svg) Stats & Metrics Numbers that carry the story.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)
    - [![Pricing Plans](https://hs.phrutos.com/hubfs/Icon%20(1).svg) Pricing Plans Plan cards and comparison.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)
- [How it works](https://hs.phrutos.com/news/light-and-dark-from-one-theme#how-it-works)
- [About us](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)
  
  Layout 
    - [![Hero Banner](https://hs.phrutos.com/hubfs/Icon.svg) Hero Banner Split, centered, and form heroes.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)
    - [![Content Split](https://hs.phrutos.com/hubfs/Icon%20(1).svg) Content Split Copy and media, side by side.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)
    - [![Rich Content](https://hs.phrutos.com/hubfs/Icon.svg) Rich Content Long-form sections with structure.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)

  Proof 
    - [![Testimonials](https://hs.phrutos.com/hubfs/Icon%20(1).svg) Testimonials Quotes, logos, and social proof.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)
    - [![Stats & Metrics](https://hs.phrutos.com/hubfs/Icon.svg) Stats & Metrics Numbers that carry the story.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)
    - [![Pricing Plans](https://hs.phrutos.com/hubfs/Icon%20(1).svg) Pricing Plans Plan cards and comparison.](https://hs.phrutos.com/news/light-and-dark-from-one-theme#capabilities)

  Title 
    - [Careers Come work for us ![fashion-terrace-cape](https://hs.phrutos.com/hs-fs/hubfs/fashion-terrace-cape.jpg?width=1672&height=941&name=fashion-terrace-cape.jpg)](https://hs.phrutos.com/careers-unbound-theme)

![](https://hs.phrutos.com/hubfs/raw_assets/public/Unbound/images/module-icons/search.svg)

[Start building](https://hs.phrutos.com/home-light-unbound-theme)

![Bar Icon](https://hs.phrutos.com/hubfs/Carousel%20Image/header-toggle-btn-bar-icon-1.svg) ![Close Icon](https://hs.phrutos.com/hubfs/Carousel%20Image/header-toggle-btn-close-icon.svg)

×

Search

Theme settings

# Light and dark surfaces from one theme

Unbound expresses light and dark from the same theme settings so marketing pages can change surface without installing a second theme.

[Unbound Design](https://hs.phrutos.com/news/author/unbound-design) Nov 13, 2026, 10:52:25 AM 1 min read

![Abstract cover split between lighter and darker geometric planes, used as the featured image for the light and dark post.](https://hs.phrutos.com/hubfs/unbound-news-covers/cover-03.png)

In this article

Light and dark in Unbound are surface expressions of the same theme, not a second package. Editors should be able to move a page between those surfaces while typography, radius, spacing, and component structure stay in place.

## What to check on a blog post

Use this post to confirm the blog templates inherit theme surfaces the same way page templates do:

- Heading and body contrast remain readable on both surfaces.
- Links, tags, and the author row remain distinct from the background.
- Related post cards use the theme surface tokens, not a one-off blog palette.
- Comments, when enabled, pick up form and button styles from theme settings.

## Keep exceptions local

If a single module needs a different surface, use that module’s style fields. Do not fork the theme or duplicate the blog templates to get a darker hero. Global changes belong in theme settings so listing, post, and related-post views stay aligned.

- [Tweet](https://twitter.com/share)

[Theme settings](https://hs.phrutos.com/news/tag/theme-settings), [Design system](https://hs.phrutos.com/news/tag/design-system), [Light and dark](https://hs.phrutos.com/news/tag/light-and-dark)

[Previous article **Design excellence for non-designers**](https://hs.phrutos.com/news/design-excellence-for-non-designers)

Keep reading

## Related insights.

[![Abstract gradient cover suggesting linked theme controls, used as the featured image for the connected settings post.](https://hs.phrutos.com/hs-fs/hubfs/unbound-news-covers/cover-02.png?width=352&name=cover-02.png)](https://hs.phrutos.com/news/connected-theme-settings)

Theme settings

### [Connected theme settings keep a site coherent](https://hs.phrutos.com/news/connected-theme-settings)

A HubSpot theme is useful when global style lives in theme settings and page editors do not have to ...

[![Abstract geometric cover in Unbound brand colors, used as the featured image for the Unbound product thesis post.](https://hs.phrutos.com/hs-fs/hubfs/unbound-news-covers/cover-01.png?width=352&name=cover-01.png)](https://hs.phrutos.com/news/design-excellence-for-non-designers)

Theme settings

### [Design excellence for non-designers](https://hs.phrutos.com/news/design-excellence-for-non-designers)

Unbound exists so HubSpot teams can ship a credible corporate site without a dedicated design ...

Newsletter

## One useful growth idea. No noise.

## Start your 30-day free trial

Join over 4,000+ startups already growing with UNBOUND.

Learn more

Get started

[![UNBOUND](https://hs.phrutos.com/hubfs/raw_assets/public/Unbound/images/logo-unbound-on-dark.svg)](https://hs.phrutos.com/)

Design amazing digital experiences that create more happy in the world.

Product

- Overview
- Features
- SolutionsNew
- Tutorials
- Pricing
- Releases

Company

- About us
- Careers
- Press
- News
- Media kit
- Contact

Resources

- Blog
- Newsletter
- Events
- Tutorials
- Help center
- Support

Social

- Twitter
- LinkedIn
- Facebook
- GitHub
- AngelList
- Dribbble

Trust & Safety

- Terms
- Privacy
- Cookies
- Licenses
- Settings
- Contact

© 2026 UNBOUND UI Kit. All rights reserved.

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Unbound Design",
    "url" : "https://hs.phrutos.com/news/author/unbound-design"
  },
  "dateModified" : "2026-11-13T18:52:25.102Z",
  "datePublished" : "2026-11-13T18:52:25.000Z",
  "headline" : "Light and dark surfaces from one theme | Unbound",
  "image" : [ "https://hs.phrutos.com/hubfs/unbound-news-covers/cover-03.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://hs.phrutos.com/news/light-and-dark-from-one-theme",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://hs.phrutos.com/hubfs/Logo%20wrap.svg"
    },
    "name" : "PHRUTOS"
  }
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Unbound Design"
  },
  "datePublished" : "2026-11-13T18:52:25+0000",
  "description" : "Unbound expresses light and dark from the same theme settings so marketing pages can change surface without installing a second theme.",
  "headline" : "Light and dark surfaces from one theme",
  "image" : "https://6948429.fs1.hubspotusercontent-na1.net/hubfs/6948429/unbound-news-covers/cover-03.png",
  "mainEntityOfPage" : {
    "@id" : "https://hs.phrutos.com/news/light-and-dark-from-one-theme",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "name" : "PHRUTOS"
  },
  "url" : "https://hs.phrutos.com/news/light-and-dark-from-one-theme"
}
```