Vom Benutzer konfigurierbare CSS-Farben

Question

Ich arbeite seit etwas mehr als zwei Monaten als Softwareentwickler. Ich wurde bei einer Firma eingestellt, die für größere Unternehmen Handypläne verwaltet. Ich arbeite hauptsächlich an zwei Web-Anwendungen, die zusammenarbeiten, dem "Front-End", wo sich ein Benutzer anmelden und neue Geräte bestellen, ein Gerät aktualisieren, ein Gerät aussetzen kann, und so weiter. Und das "Back-End", wo sich ein Supervisor einloggen und verschiedene Aspekte des Front-Ends ändern kann (zB Benutzer, Handybündel).

Ich habe die Aufgabe, einem Benutzer auf dem Back-End die Möglichkeit zu geben, die Farben der wichtigsten Elemente auf dem Front-End zu konfigurieren, so dass ein Benutzerportal mit den Farben des Unternehmens übereinstimmen kann.

Ich habe mit dem Stylesheet herumgespielt, um zu bestimmen, wo die Farben der verschiedenen Elemente gesetzt sind, aber ich bin mir nicht sicher, wie ich Änderungen am Stylesheet für einzelne Benutzer implementieren kann. Irgendwelche Ideen oder Vorschläge werden geschätzt.

Answer 1

Es gibt ein paar verschiedene Möglichkeiten, dies zu tun.

---

Wahrscheinlich ist der einfachste Weg mit Javascript. Wenn ein Benutzer ein Farbschema auswählt und es an das Javascript des Clients sendet (wahrscheinlich über eine AJAX-Anfrage), wendet das Javascript die Stile entweder direkt über ein Inline-Tag style="..." oder durch Anwendung von Klassen an, die direkt in das Stylesheet eingebunden sind - bei dem alle möglichen Farbschemata geladen sind, wo diese Lösung ein wenig nach unten fällt.

Entweder Sie sind inline alle Ihre benutzerdefinierten Stile, die schlechte Praxis ist, oder Ihr Stylesheet ist Weg massiver als es sein sollte. Und von den Klängen wollen sie nicht einfach "Themen", die relativ einfach sind, sie wollen tatsächlich Farben von einem Farbwähler auswählen, um das Ding zu thematisieren.

---

Sie können Stylesheets auch dynamisch erstellen, indem Sie SASS verwenden. Haben Sie einen SASS Variable Blatt (das ist der dynamisch generierte Teil) etwas wie folgt aus:

$color_table_header: [...]; 
$color_table_footer: [...]; 

$color_header_basic: [...]; 

... 

und füllen in diesen Farben dynamisch, über eine Art von leichten Node.js Server von was auch immer sonst funktioniert. Dies würde etwas mehr Speicherplatz erfordern (weil Sie pro Benutzer ein Stylesheet pro Benutzer erstellen müssten, der benutzerdefinierte Farben haben möchte). Allerdings müsste das Stylesheet, das Sie für das benutzerdefinierte Benutzerdesign erstellen, nur das vorhandene primäre Stylesheet überschreiben und nicht ein ganzes Seiten-Stylesheet pro Thema erstellen.

Dann ist es ziemlich einfach: Überprüfen Sie, ob der Benutzer einen benutzerdefinierten Stil hat, und bedienen Sie das Stylesheet zusätzlich zum normalen Stylesheet, indem Sie die Seitenansicht ändern.