Dark/Light Mode Toggle

[Moin]

Is your question about this theme component that adds a toggle to switch to dark mode, or detecting a dark color palette in general?

There is dark-light-choose.

Update themes and plugins to support automatic dark mode

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…

[Andrew_Rowe]

Thank you for your help
I am using this Dark/Light Mode Toggle component

@Moin

Is your question about this theme component that adds a toggle to switch to dark mode, or detecting a dark color palette in general?

My question is about detecting which mode I am in and switch the background image so I can have one image for light mode and another for dark mode.

I tried to follow along with the link you posted and also this one

Different CSS changes for different color schemes

If I understand the issue well, there’s a specific thing to do for this. 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 will help). Then, create a common/color_definitions.scss …

which goes into a little more detail but I did not succeed. I tried adding image files(JPGs) $bg-light and $bg-dark to my theme

I also tried adding a color_definitions.scss stylesheet to my theme with the code in that post

$bg: url(dark-light-choose($bg-light, $bg-dark));

:root {
  --custom-bg: #{$bg};
}

I also tried creating a theme on github

GitHub - MyRaceData/WebsiteTheme

like I said, sorry about being a little lost
If I should start a new topic let me know and in what category to put it
Thanks for your help

[Moin]

@Andrew_Rowe

If I should start a new topic let me know and in what category to put it

Moderators can move the posts to a new topic in Dev if needed. I just wanted to make sure that your problem is not directly related to the theme component, but also happens when you activate dark mode via the browser or device settings.

I think you are already pretty close. One thing I noticed is that you use url() twice:

MyRaceData/WebsiteTheme/blob/ef2fc67525b0b40d744436d8ce6600409dc4ebc6/common/common.scss#L2-L2

MyRaceData/WebsiteTheme/blob/ef2fc67525b0b40d744436d8ce6600409dc4ebc6/common/color_definitions.scss#L1

[Andrew_Rowe]

My problem is definitely not related to the theme component
Thanks for the help, sorry for the noise

@Moin

One thing I noticed is that you use url() twice:

Woah… don’t tell anybody, that is my secret sauce for blending two backgrounds together. The first one takes precedence over the next. So, the first one is a linear gradient with half being transparent and the other is a static image

here is the effect in action

[Moin]

I understood that you use 2 backgrounds.

background-image: linear-gradient(to top, white, 15%, transparent), url(var(--custom-bg));

But isn’t url(var(--custom-bg)) in combination with --custom-bg: #{$bg}; and $bg: url(dark-light-choose($bg-light, $bg-dark)); something like url(url(dark-light-choose($bg-light, $bg-dark)))?