Here's the context

<header id="Header">
   <div class="masthead">
      <svg class="logo">...[dark logo]...</svg>
   </div>
</header>
<main>
   <section class="dark-bg">
      <div class="hero">...[img with dark bg]...</div>
   </section>
</main>

On some of my pages I use the dark logo and dark menu font color because there is a light background, but on other pages I have a dark background and would like to style the logo to be light so it's legible.

Here is a stack overflow I was browsing and I realize I can't traverse the DOM in the way I want to like:

.dark-bg .masthead svg {
   color: #fff;
}

From my understanding I'll have to do some JS to get this to work right. I COULD just target certain pages, but that seems like it could become unruly in the long run so I was wondering if any of you know of a clever way with some of the October language that I could make an if statement or something like that to where if class "dark-bg" exists in the first section of the page, change the logo or something of that nature. Or is there a way that I could setup some kind of theme for the page that puts a class into the masthead or something like that? Any ideas? Thank you.

Last updated 2 years ago

You can use {{this.page.id}} in your class to distinguish pages

You can read the full article here: add a unique class to page or element

// markup
<section class="dark-bg {{header-section-{{this.page.id}}">
     <div class="hero">...[img with dark bg]...</div>
</section>

// CSS
// for all pages
[class^="header-section-"] svg { 
    color: #fff;
}

// for a specific page
.header-section-contact svg { 
    color: #000;
}

Last updated 2 years ago