Milligram: Hervorhebungsfarbe einfach ändern (#9b4dca)

Erstellt am 22. Feb. 2018  ·  6Kommentare  ·  Quelle: milligram/milligram

Mithilfe von CSS3-Variablen (benutzerdefinierte Eigenschaften) ist es möglich, die Hervorhebungsfarbe in einer CSS-Zeile zu überschreiben.

In milligram.css haben Sie etwas in der Art von:

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

und ersetzen Sie dann jedes #9b4dca durch var(--highlight-color) .

Sobald dies erledigt ist, ist das Ersetzen der Hervorhebungsfarbe so einfach wie das Einfügen einer custom.css-Datei

:root {
  --highlight-color: #abcabc;
}
Hacktoberfest new feature
Quelle
picture mterron
👍10 ❤3

Hilfreichster Kommentar

Ich bin aus demselben Grund hierher gekommen ^^, aber da es in SASS geschrieben ist und Sie vielleicht alte Browser unterstützen möchten, würde ich empfehlen, ein Fallback-erprobteres Beispiel wie dieses zu machen:

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

Auf diese Weise greifen Browser, die benutzerdefinierte CSS-Eigenschaften nicht unterstützen, immer noch auf eine funktionierende Version zurück. Auch auf diese Weise wird kein :root {} in den eigentlichen Stylesheets benötigt, da var() bereits eine Fallback-Option bietet.

Prost,
Dominik

picture dkundel am 23. März 2018
👍6

Alle 6 Kommentare

Ich bin aus demselben Grund hierher gekommen ^^, aber da es in SASS geschrieben ist und Sie vielleicht alte Browser unterstützen möchten, würde ich empfehlen, ein Fallback-erprobteres Beispiel wie dieses zu machen:

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

Auf diese Weise greifen Browser, die benutzerdefinierte CSS-Eigenschaften nicht unterstützen, immer noch auf eine funktionierende Version zurück. Auch auf diese Weise wird kein :root {} in den eigentlichen Stylesheets benötigt, da var() bereits eine Fallback-Option bietet.

Prost,
Dominik

dkundel picture dkundel am 23. März 2018
👍6

Gibt es diesbezüglich Fortschritte oder wurde bisher etwas unternommen? 😄

timrossback picture timrossback am 29. Juni 2019

Gibt es diesbezüglich Fortschritte oder wurde bisher etwas unternommen? 😄

Sie können jederzeit die Werte der Farben aus dem src/_Color.sass ändern und dann mit sass --update neu kompilieren. Sie können auch Ihre eigenen Sass-Dateien hinzufügen.

dntzbgh picture dntzbgh am 29. Juni 2019

Gibt es diesbezüglich Fortschritte oder wurde bisher etwas unternommen? 😄

Sie können jederzeit die Werte der Farben aus dem src/_Color.sass ändern und dann mit sass --update neu kompilieren. Sie können auch Ihre eigenen Sass-Dateien hinzufügen.

Guter Punkt! Ich denke, ich suche nach einer etwas Out-of-the-Box-Lösung, da ich Sass nicht verwende, aber ich weiß nicht wirklich, wie das einfach gemacht werden könnte, außer die Werte selbst in /dist/milligram.min.css zu ändern

timrossback picture timrossback am 30. Juni 2019
👍1

Liebe diesen Rahmen! Ich kann es kaum erwarten, dass diese Funktion veröffentlicht wird 🚀

cilim picture cilim am 26. Aug. 2020

Hey @mterron @dkundel @timrossback @dntzbgh @cilim

Vielleicht so etwas?
https://github.com/milligram/milligram/pull/262/files#diff -7b0a61514569d183adbda861549f9d98

cjpatoilo picture cjpatoilo am 27. Aug. 2020
👍2
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

davedele picture davedele  ·  5Kommentare
piever picture piever  ·  3Kommentare
garretwilson picture garretwilson  ·  18Kommentare
schirrel picture schirrel  ·  3Kommentare
dnohr picture dnohr  ·  7Kommentare