# ¿Por qué podría no funcionar dark-light-choose()?

**URL:** https://meta.discourse.org/t/why-might-dark-light-choose-not-work/172232
**Category:** Support
**Created:** [4 Diciembre, 2020 10:14 UTC](https://meta.discourse.org/t/why-might-dark-light-choose-not-work/172232 "2020-12-04T10:14:41Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Nacho\_Caballero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nacho_caballero/32/130189_2.png) [@Nacho\_Caballero](https://meta.discourse.org/u/Nacho_Caballero)
#### Post date: [4 Diciembre, 2020 10:14 UTC](https://meta.discourse.org/t/why-might-dark-light-choose-not-work/172232/1 "2020-12-04T10:14:41Z")

</div>

Estoy intentando usar la función `dark-light-choose($light, $dark)` en mi CSS personalizado, pero siempre devuelve `$light`, incluso cuando cambio la paleta de clara (Clara) a oscura (Oscura):

 ![image](https://global.discourse-cdn.com/meta/original/3X/4/6/46c9ad95a5b1a168f4d9465073140d77a0ea5b0a.png)

Aquí proporciono más detalles sobre mi configuración:

> [@How to change CSS color for a single theme palette?](https://meta.discourse.org/t/how-to-change-css-color-for-a-single-theme-palette/171867/3):
>
> Thanks for pointing that out, @Johani. It looks like the dark-light-choose($light, $dark) function does exactly what I want, but my problem now is that it’s not detecting the change of palette. My only active theme is called “Nacho” and it has two palettes: “Clara” (Light) and “Oscura” (Dark): I’ve personalized it with this CSS: $dark-theme-ins: #4da06d; $light-theme-ins: #acf2bd; .modal.history-modal { ins { background: dark-light-choose($light-theme-ins, $dark-theme-in…

Hasta ahora, he verificado dos veces:

- que el color primario en mi tema oscuro tenga un brillo mayor que el color secundario.
- que estoy usando los argumentos de la función en el orden correcto.

No tengo idea de cómo depurar esto. ¿Podría ser un problema en mi tema? ¿Hay alguna otra variable que debería considerar?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [5 Diciembre, 2020 03:02 UTC](https://meta.discourse.org/t/why-might-dark-light-choose-not-work/172232/2 "2020-12-05T03:02:24Z")

</div>

Creo que, debido a la forma en que se compila el SCSS, las definiciones personalizadas de modo oscuro/claro deben agregarse en `color_definitions.scss` dentro de un tema y no funcionarán en otros archivos SCSS.

 ![Screen Shot 2020-12-04 at 9.54.13 PM](https://global.discourse-cdn.com/meta/original/3X/1/b/1bcf071375070d293ec39a5444b00f34b8beb06d.png)

`color_definitions.scss` está muy arriba en la cascada (antes de muchos de los estilos predeterminados), por lo que no querrás agregar allí la parte `.modal.history-modal ins`. En su lugar, solo puedes agregar la definición de color en sí…

```scss
$dark-theme-ins: #acf2bd;
$light-theme-ins: #4da06d;

$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);

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

```

y luego en common o en cualquiera de los otros archivos de tu tema puedes hacer:

```css
.modal.history-modal {
    ins {
        background: var(--custom-ins);
    }
}

```

---

<div class="post-metadata">

### Author: ![Nacho\_Caballero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nacho_caballero/32/130189_2.png) [@Nacho\_Caballero](https://meta.discourse.org/u/Nacho_Caballero)
#### Post date: [5 Diciembre, 2020 11:32 UTC](https://meta.discourse.org/t/why-might-dark-light-choose-not-work/172232/3 "2020-12-05T11:32:25Z")

</div>

¡Muchísimas gracias, Kris! ¡Me has salvado! Funciona a la perfección 🎉

He estado experimentando con ello y lo único que no entiendo es por qué se requiere interpolación de variables con los valores de color. Por ejemplo, esto no funciona sin interpolación:

```plaintext
$ins: #7f7e7e;
:root {
  --custom-ins: $ins;
}

```

Pero esto sí:

```plaintext
$ins: #7f7e7e;
:root {
  --custom-ins: #{$ins};
}

```

Ambas versiones funcionan si `$ins` se asigna a una variable (por ejemplo: `$ins: $dark-theme-ins`).

¿Qué es lo que me estoy perdiendo?

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [6 Diciembre, 2020 13:47 UTC](https://meta.discourse.org/t/why-might-dark-light-choose-not-work/172232/4 "2020-12-06T13:47:01Z")

</div>

> [@Nacho\_Caballero](#):
>
> lo único que no entiendo es por qué se requiere interpolación de variables con los valores de color.

Es un requisito de SCSS al usar propiedades personalizadas de CSS. Más detalles aquí: [Sass: Property Declarations](https://sass-lang.com/documentation/style-rules/declarations)

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [5 Enero, 2021 13:47 UTC](https://meta.discourse.org/t/why-might-dark-light-choose-not-work/172232/5 "2021-01-05T13:47:14Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
