Switch Logo on Different Color Themes

Free

Jan 25

Use a different logo that with specific color themes.

Why Use This?
Use this tutorial for showing the appropriate color logo on different color themes. If you’d like to switch out the logo (and it’s corresponding url) with a completely different logo, check out this tutorial.

Steps

Step 1. Upload your logo variation to the Custom CSS » Custom Files area

Navigate to your Website » Website Tools » Custom CSS area and upload your logo to the Custom Files area.

Step 2. Set your logo variant as a Custom Property.

Paste the below code into your Custom CSS area, replacing the url in single quotes with the url of your new logo.

/**
 * Logo Variations
**/
html {
  --light-logo: url('https://static1.squarespace.com/static/65317d8e655a6734ccfb9e58/t/65b29b71ab0ad84dc5d58bf7/1706204017728/Light+Logo.png');
}

Step 3. Apply your different logos to different color themes.

Target one or more color themes and apply the Custom Property of your logo variation. Use the Color Theme Index below to choose which color themes to apply your new logo too. Separate each color theme with a comma.

/**
 * Logo Variations
**/
.bright,
.bright-inverse{
  .header-mobile-logo,
  .header-title-logo {
    img {
      content: var(--light-logo);
    }
  }
}

Color Theme Index
      
        Color Theme
        Target
      
        Lightest 1
        .white
      
        Lightest 2
        .white-bold
      
        Light 1
        .light
      
        Light 2
        .light-bold
      
        Bright 1
        .bright
      
        Bright 2
        .bright-inverse
      
        Dark 1
        .dark
      
        Darkest 2
        .dark-bold
      
        Darkest 1
        .black
      
        Darkest 2
        .black-bold

Color Theme	Target
Lightest 1	.white
Lightest 2	.white-bold
Light 1	.light
Light 2	.light-bold
Bright 1	.bright
Bright 2	.bright-inverse
Dark 1	.dark
Darkest 2	.dark-bold
Darkest 1	.black
Darkest 2	.black-bold