How to change css item based on dark or light mode?

dev
1

I didn’t seem to find a definitive answer when searching, but I want to change a CSS item one way for dark, and another for light.

What is the best way to accomplish this in Discourse?

1 Like
2

i suspect this topic may help you.

3

I don’t believe i can edit color_definitions.css since I am an enterprise customer that CDCK is hosting. I suppose I’d have to reach out to them about this then.

Thanks, Lilly!

2 Likes
4

i think you can override it with your own CSS in another theme or component i’m not sure how this works so i’m going to mess around with it today and see if i can come up with dark - light mode css conditional. i feel like this should be possible.

5

what is the CSS element you want to change based on dark/light mode?

you can add color definitions to the color definitions tab of the edit CSS/ HTML of a theme (color_definitions stylesheet).

6

Sorry for the late reply! So I was looking to change the color of the highlighted* bar atop an expert response post in a topic, but I wanted to highlight the bar with a different color for light and dark theme.

1 Like
7

not sure what you mean? can you provide a screenshot?

8

Highlighted** sorry, mobile typo!

1 Like
10

I’d love to be proven wrong on this, but I think there’s no reliable check you could use with css.

@sp-jordan-violet usually the way to go is to use color variables from your dark and light color schemes. You can check your current values using the browser inspector. I believe you can’t add new variables that will switch depending on color scheme. But there’s quite a lot of variables to pick from and you can use them in any custom declaration. E.g

.topic-avatar {
  height: unset;
  align-self: stretch;
  background-image: linear-gradient(
      to right,
      transparent -40%,
      var(--secondary) 80%
    ),
    linear-gradient(
      to bottom,
      var(--tertiary-300) 0%,
      var(--highlight) 50%,
      var(--quaternary-low) 100%
    );
}

could give you a post highlight like this :rainbow: :slight_smile:

image
image790×556 70.5 KB

2 Likes
11

yea i tend to agree. i’ve also been tinkering with a javascript / css solution but nothing working yet

1 Like
12

Woah, I really like this idea!!

2 Likes
13

that looks really cool. nicely done :slight_smile:

1 Like