Fully Theme

[Don]

@Renato_Mendes

changing it this way makes it look the same on dark mode

Hello @Renato_Mendes

Oh I see, so you only want to use the transparent background on one color scheme. I didn’t know that.

@Renato_Mendes

How can I change the css only for a specific color scheme?

There are several ways to do this

1. dark-light-choose(): It’s possible to do this with it but not to practical in this case as it’s create variables. Better to use for colors.

---

2. schemeType: This one is better to this use case if you want to use it by scheme type.

Use schemeType

Here is how to use schemeType

Remove the previous code from the component you created and place the new one to the component Color Definitions section as you see on the image.

This will only activate the code on light scheme.

Common / Color Definitions

@if #{schemeType()} == light {
  .desktop-view {
    .has-sidebar-page {
      .d-header-wrap {
        &:before {
          background: transparent;
          border-right: none;
        }
      }
    }
  }
}

---

3. Targetable Color Schemes : If you have more color schemes and/or want to target a specific color scheme where you want to change things then this theme component is ideal for you.

Use Targetable Color Schemes

This component puts the actual color scheme to the html so you can target it with CSS.

Here is how to use it:

Install the component.
Check the color scheme id where you want to change things.
You can find here

or

/admin/customize/colors
Colors page. Here if you click a color scheme the id will adds to the URL.

Now you can use this in the code. Don’t forget to remove the previously added code.

html[color-scheme="your-color-scheme-id"] {  
  &.desktop-view {
    .has-sidebar-page {
      .d-header-wrap {
        &:before {
          background: transparent;
          border-right: none;
        }
      }
    }
  }
}

---

Hello @packman I sent you a PM.