# Different CSS changes for different color schemes
**URL:** https://meta.discourse.org/t/different-css-changes-for-different-color-schemes/282436
**Category:** Development
**Tags:** css
**Created:** [October 16, 2023, 7:17pm UTC](https://meta.discourse.org/t/different-css-changes-for-different-color-schemes/282436 "2023-10-16T19:17:55Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Renato\_Mendes](https://meta.discourse.org/u/Renato_Mendes)
#### Post date: [October 16, 2023, 7:17pm UTC](https://meta.discourse.org/t/different-css-changes-for-different-color-schemes/282436/1 "2023-10-16T19:17:55Z")
Hey!
As I’ve been able to understand so far, any change in CSS is applied to both light and dark mode, which doesn’t make much sense.
Most recently, I have to deal with this problem: on dark mode, the wrapped text looks the same color as the wrapper, and if I change it through CSS, the light theme wrapped text will be changed too, but I don’t want that.
How can I change the CSS only for one color scheme?
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 16, 2023, 7:23pm UTC](https://meta.discourse.org/t/different-css-changes-for-different-color-schemes/282436/2 "2023-10-16T19:23:38Z")
If you use the color variables (ie: `var(--primary-very-low), var(--secondary-low)`) available in your forum’s style guide `/styleguide/atoms/colors`, then the dark light modes should respect the different variables (you can also see them in the two colour palettes you are using for the dark and light switch). You will need to enable the `styleguide enabled` setting in admin-settings, and there is also the `styleguide admin only` setting which limits it to admins only.
---
### Author:  [@Renato\_Mendes](https://meta.discourse.org/u/Renato_Mendes)
#### Post date: [October 17, 2023, 1:21pm UTC](https://meta.discourse.org/t/different-css-changes-for-different-color-schemes/282436/3 "2023-10-17T13:21:13Z")
The problem is I already made changes that did not respect the color variable set on the style guide (I couldn’t access it through `/styleguide/atoms/colors`, though). Is there a way to do so without following the variables?
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [October 17, 2023, 1:56pm UTC](https://meta.discourse.org/t/different-css-changes-for-different-color-schemes/282436/4 "2023-10-17T13:56:59Z")
> [@Renato\_Mendes](#):
>
> As I’ve been able to understand so far, any change in CSS is applied to both light and dark mode, which doesn’t make much sense.
If I understand the issue well, there’s a specific thing to do for this.
> [@Update themes and plugins to support automatic dark mode](https://meta.discourse.org/t/update-themes-and-plugins-to-support-automatic-dark-mode/161595/5):
>
> Great question, I tried this and noticed that we didn’t properly support using background images or theme variables in the special color definitions stylesheet. So I made some fixes in core, and you should be able to do this now (make sure you pull the latest core). So, if you have two images in your theme or theme component, with SCSS vars of $bg-light and $bg-dark respectively, you can add this to your color\_definitions.scss stylesheet: $bg: url(dark-light-choose($bg-light, $bg-dark)); :ro…
I’ve been working on a guide about this, but I’m struggling a bit to merge information so it’s clear enough to directly use the information in a theme, but still explains underlying technical stuff.
To explain how to do it the most clearly as I can…
I suggest you create a theme locally (using [Install the Discourse Theme CLI console app to help you build themes](https://meta.discourse.org/t/install-the-discourse-theme-cli-console-app-to-help-you-build-themes/82950) will help).
Then, create a `common/color_definitions.scss` file in your theme, in which you write:
```scss
$my-color: dark-light-choose(#FC3468, #FF93AC);
:root {
--my-color: #{$my-color};
}
```
Then, in `common/common.scss`, you can make use of the variable like this:
```scss
h1 {
color: var(--my-color);
}
```
It will automatically pick the right color when in dark or light mode.