# Fully Theme

**URL:** https://meta.discourse.org/t/fully-theme/262833
**Category:** Theme
**Tags:** official, fully-theme
**Created:** [April 25, 2023, 3:07pm UTC](https://meta.discourse.org/t/fully-theme/262833 "2023-04-25T15:07:59Z")
**Posts on this page:** 1
**Showing post:** 72

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [October 8, 2023, 8:27am UTC](https://meta.discourse.org/t/fully-theme/262833/72 "2023-10-08T08:27:24Z")

</div>

> [@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.

* * *

1. `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.
> 
> ![Screenshot 2023-10-08 at 9.57.46](https://global.discourse-cdn.com/meta/original/4X/f/8/1/f8129b559bf17c36b5b91cd90655def5013b6867.png)
> 
> This will only activate the code on light scheme.
> 
> Common / Color Definitions
> 
> ```scss
> @if #{schemeType()} == light {
> .desktop-view {
> .has-sidebar-page {
> .d-header-wrap {
> &:before {
> background: transparent;
> border-right: none;
> }
> }
> }
> }
> }
> 
> ```

* * *

1. [Targetable Color Schemes](https://meta.discourse.org/t/targetable-color-schemes/276967) : 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
> 
> ![Screenshot 2023-10-08 at 10.10.30](https://global.discourse-cdn.com/meta/original/4X/0/3/9/039c9d89e26b3b0adcadf4ffc2e527bc1050b15c.png)
> 
> 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.
> 
> ![Screenshot 2023-10-08 at 10.17.05](https://global.discourse-cdn.com/meta/original/4X/2/e/b/2ebac935f0da59b3226cc89d05bff65be6b40b30.png)
> 
> ```scss
> 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.

---

_[View the full topic](https://meta.discourse.org/t/fully-theme/262833)._