Milligram: Cambie fácilmente el color de resaltado (#9b4dca)

Creado en 22 feb. 2018 · 6Comentarios · Fuente: milligram/milligram

Usando variables CSS3 (propiedades personalizadas) es posible anular el color de resaltado en 1 línea de CSS.

En miligram.css tiene algo como:

:root {
  --highlight-color: #9b4dca;
}

y luego reemplace cada #9b4dca con var(--highlight-color) .

Una vez hecho esto, reemplazar el color de resaltado es tan fácil como incluir un archivo custom.css con

:root {
  --highlight-color: #abcabc;
}

Hacktoberfest new feature

Fuente

mterron

👍10 ❤3

Comentario más útil

Vine aquí por lo mismo ^^ pero dado que está escrito en SASS y es posible que desee admitir navegadores antiguos, recomendaría hacer un ejemplo más probado como este:

button {
  background-color: $color-primary;
  background-color: var(--color-primary, $color-primary);
}

De esta forma, los navegadores que no admitan las propiedades personalizadas de CSS seguirán recurriendo a una versión funcional. Además, de esta manera, no se necesita :root {} en las hojas de estilo reales, ya que var() ya proporciona una opción alternativa.

Salud,
dominik

dkundel en 23 mar. 2018

👍6

Todos 6 comentarios

Vine aquí por lo mismo ^^ pero dado que está escrito en SASS y es posible que desee admitir navegadores antiguos, recomendaría hacer un ejemplo más probado como este:

button {
  background-color: $color-primary;
  background-color: var(--color-primary, $color-primary);
}

Salud,
dominik

dkundel en 23 mar. 2018

👍6

¿Hay algún progreso o se ha hecho algo al respecto hasta ahora? 😄

timrossback en 29 jun. 2019

¿Hay algún progreso o se ha hecho algo al respecto hasta ahora? 😄

siempre puede cambiar los valores de los colores desde src/_Color.sass y luego volver a compilar con sass --update . También puede agregar sus propios archivos sass.

dntzbgh en 29 jun. 2019

¿Hay algún progreso o se ha hecho algo al respecto hasta ahora? 😄
siempre puede cambiar los valores de los colores desde src/_Color.sass y luego volver a compilar con sass --update . También puede agregar sus propios archivos sass.

¡Buen punto! Supongo que estoy buscando una solución un poco más lista para usar ya que no uso Sass, pero realmente no sé cómo se podría hacer eso fácilmente además de cambiar los valores mismos en /dist/milligram.min.css que sería problemático.

timrossback en 30 jun. 2019

👍1

Me encanta este marco! No puedo esperar a que se lance esta función 🚀