# איך להחליף תמונה לפי מצב כהה או בהיר

**URL:** https://meta.discourse.org/t/how-to-switch-image-based-on-dark-or-light-mode/284443
**Category:** Development
**Created:** [5 בנובמבר,‏ 2023,‏ 6:11am UTC](https://meta.discourse.org/t/how-to-switch-image-based-on-dark-or-light-mode/284443 "2023-11-05T06:11:37Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![miao\_miao](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/miao_miao/32/333887_2.png) [@miao\_miao](https://meta.discourse.org/u/miao_miao)
#### Post date: [5 בנובמבר,‏ 2023,‏ 6:11am UTC](https://meta.discourse.org/t/how-to-switch-image-based-on-dark-or-light-mode/284443/1 "2023-11-05T06:11:37Z")

</div>

I would like to custom my banner image according to what mode the os is using now.  
I tried to add this to my `color_definitions.scss` stylesheet:

```plaintext
$banner: url(dark-light-choose($light-banner, $dark-banner));

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

```

And I tried use `var(--custom-banner)` in my regular stylesheet.

Everything looks good on pc and mobile phone. But the picture flickers on ipad. 😥

Is there a way to fix the problem or should I try another way?

---

<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: [5 בנובמבר,‏ 2023,‏ 6:57am UTC](https://meta.discourse.org/t/how-to-switch-image-based-on-dark-or-light-mode/284443/2 "2023-11-05T06:57:25Z")

</div>

> [@miao\_miao](#):
>
> But the picture flickers on ipad. 😥

Hello 👋 Could you show an example? 🙂