Jeder Website eine benutzerdefinierte Akzentfarbe geben
Jede Seite wählt eine Akzentfarbe — das Blau ihrer Links, das Grün ihrer Hauptschaltfläche. Wenn diese Farbe Ihrem Geschmack widerspricht, müssen Sie nicht damit leben. Eine JustZix-CSS-Regel kann eine ganze Seite in Ihren Lieblingston umstreichen.
Finden, was überschrieben werden soll
Die Akzentfarbe lebt normalerweise an drei Stellen: Links, Hauptschaltflächen sowie Fokus-/Auswahlzustände. Moderne Seiten geben sie oft als CSS-Custom-Property preis, was Ihre Aufgabe trivial macht.
:root {
--accent: #e8590c;
--accent-hover: #d9480f;
}Öffnen Sie die DevTools, inspizieren Sie eine Schaltfläche und suchen Sie nach einer Variable wie --primary, --brand oder --link-color. Wenn Sie eine sehen, überschreiben Sie sie direkt — die gesamte Seite aktualisiert sich auf einmal.
:root {
--primary: #e8590c !important;
--brand-color: #e8590c !important;
--link: #e8590c !important;
}Wenn es keine Variablen gibt
Viele ältere Seiten codieren Farben fest. Dann visieren Sie Elemente direkt an. Dieser Block deckt die häufigen Fälle ab.
a, a:visited {
color: #e8590c !important;
}
a:hover {
color: #d9480f !important;
}
button, .btn, .button,
input[type="submit"], [role="button"] {
background-color: #e8590c !important;
border-color: #e8590c !important;
color: #fff !important;
}Fokus und Auswahl umfärben
Hören Sie nicht bei Links auf. Auswahl-Hervorhebung und Fokusringe tragen ebenfalls den Akzent — sie anzupassen lässt das Ergebnis absichtlich statt geflickt wirken.
::selection {
background: #e8590c;
color: #fff;
}
:focus-visible {
outline: 2px solid #e8590c !important;
outline-offset: 2px;
}
input:focus, textarea:focus, select:focus {
border-color: #e8590c !important;
box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.25) !important;
}SVG-Symbole umfärben
Symbol-Sets erben oft die Textfarbe, sodass sie sich kostenlos aktualisieren. Die, die das nicht tun, verwenden meist fill oder stroke — fegen Sie sie mit einer Regel.
svg, svg path {
fill: currentColor;
}
.icon, [class*="icon-"] {
color: #e8590c !important;
}Ein praktischer Arbeitsablauf
- Wählen Sie einen Hex-Wert und verwenden Sie ihn überall wieder — Konsistenz ist, was den Look verkauft.
- Prüfen Sie zuerst auf CSS-Variablen; eine Zeile zu überschreiben schlägt zwanzig zu schreiben.
- Behalten Sie einen dunkleren Ton für Hover-Zustände, damit Schaltflächen sich weiterhin interaktiv anfühlen.
- Prüfen Sie den Kontrast: ein blasser Akzent auf weißem Text ist unlesbar. Streben Sie ein Verhältnis von 4,5:1 an.
Akzent-Umfärbung passt wunderbar zu einem dunklen Theme — siehe einen universellen Dunkelmodus bauen. Für mehr einsatzbereite Snippets besuchen Sie unsere fertigen Beispiele, und falls Sie die Erweiterung noch nicht installiert haben, laden Sie JustZix herunter, um loszulegen.
Bewerte diesen Beitrag
Noch keine Bewertungen — sei der Erste.