Using a color tag that changes automatically

Braden

HI, I am tired of using external color codes that are using # . They are not good at all since they interfere with Flarum system, for example when turning ON night mode, these colors with # they don't change with CSS. I need help for background color tag of '' code and quote (something like color: @muted-color; which was shown sometime back with devwheat)

Example 1

Example 2

SychO

Sorry but I'm very confused and don't understand what you mean.

Are you customizing the background colors of code and quote blocks and would like them to also change on dark mode to something else ?

Braden

SychO Thanks for trying to help. For example, the "code background color" and "quote background color" above , they can change when you switch ON night mode. The colors turn automatic.

But using #color-code in css, usually the color remains the same.

SychO

Braden you can do the same:

.define-custom-colors(@config-dark-mode);
.define-custom-colors(false) {
  // This will apply in light mode
  @my-custom-color: #fff;
}
.define-custom-colors(true) {
  // This will apply in dark mode
  @my-custom-color: #000;
}

.example {
  background-color: @my-custom-color;
}

Braden

SychO yes! now the colors can change 🥳

You can be a good techer! When i enjoy, would enjoy with people like you I consider very !important