Was ist der einfachste Weg, ein helles Theme mit einem stark anpassbaren dunklen Theme zu erstellen?

[hipp0]

Ich verwende das Foundation-Theme mit einer dunklen Farbpalette, die ich stark mit CSS angepasst habe.

Ich frage mich, was die einfachste Methode wäre, um eine helle Version zu erstellen, die allen gleichen CSS-Regeln folgt.

[Moin]

Sie können Ihrem Theme eine helle Farbpalette hinzufügen

Sie können Farben aktualisieren, je nachdem, ob das helle oder dunkle Theme verwendet wird:

@awesomerobot

In color_definitions.scss können Sie Folgendes tun:

$my-theme-color: dark-light-choose($primary, red);

:root {
  --my-theme-color: #{$my-theme-color};
}

und dann würden Sie die neue, dunkel/hell wechselnde benutzerdefinierte Eigenschaft in Ihrem Theme verwenden:

body {
  color: var(--my-theme-color);
}

[hipp0]

Okay, ich muss jede einzelne Änderung mit dem dunklen oder hellen Modus (ich verwende den standardmäßigen dunklen/hellen Modus) anpassen.

[Moin]

Das kommt darauf an. Sie müssen das nur tun, wenn Sie hartcodierte Farben verwendet haben. Solange Sie auf Farben wie var(--primary-300) oder var(--danger) verweisen, ändern sie sich automatisch basierend auf der Farbpalette.