theme color palette

Ändern des Farbschemas in Droopler mithilfe von SCSS

Konfigurationshandbuch
Volodymyr Umanets
Volodymyr Umanets
22.06.2020

Mit Droopler haben Sie bereits die volle Kontrolle über Ihre Website. Dennoch könnten Sie in Zukunft in Betracht ziehen, die Theme-Elemente anzupassen.

Dank modularer Gestaltung und hoch parametrischem SCSS können Sie dies problemlos erreichen. Sehen wir uns an, wie einfach Sie das Farbschema Ihrer Website ändern können.

Um unsere Ziele zu erreichen, benötigen wir:

  • Installierte Droopler-Distribution (sehen Sie sich unsere Tutorials an, wie man Droopler auf Cyberfolks, Linode-Server oder Platform.sh installiert)
  • Installiertes Gulp - ein Toolkit zur Automatisierung und Verbesserung des Workflows,
  • Grundkenntnisse in SASS - dem professionellsten CSS-Präprozessor.

Wie arbeitet man mit dem Subtheme?

SCSS-Struktur

Werfen wir einen Blick auf die SCSS-Struktur, die Droopler bietet:

Droopler SCSS Struktur

  • style.scss - kombiniert alle SCSS-Codes vom Basistheme und Subtheme,
  • print.scss - kombiniert alle SCSS-Codes für den Druck vom Basistheme und Subtheme,
  • config/ - das wichtigste Verzeichnis, das die Subtheme-Konfiguration enthält,
  • libraries/ - zusätzliche Dateien, die von Drupal benötigt werden.

Sie können jede Struktur verwenden, die Ihnen gefällt. Wir empfehlen, Dateien in die Verzeichnisse layout/ und components/ aufzuteilen. Denken Sie daran, Ihre Dateien in style.scss einzubinden.

SCSS-Konfiguration

Droopler ist darauf ausgelegt, Ihre Arbeit zu erleichtern. Sie müssen keinen SCSS- oder CSS-Code überschreiben, um Anpassungen vorzunehmen. In den meisten Fällen reicht es aus, die Konfigurationsdatei scss/config/_base_theme_overrides.scss zu modifizieren.

Es gibt viele Ebenen von Variablen:

• Einfache Farben
$color-agamemnon: #196dba;
$color-menelaus: #5d98ce;
• Allgemeine Variablen (anwendbar auf globale HTML-Elemente)
$link-color: $color-agamemnon; 
$footer-text-color: $color-thersites;
• Paragraphen (mit $d-p- Präfix)
$d-p-subscribe-color: $color-odysseus; 
$d-p-subscribe-header-color: $color-odysseus;
• Blog & Bloglisten (mit $d-blog- Präfix)
$d-blog-font-color: $color-odysseus; 
$d-blog-font-bold-color: $color-troilus;

Gulp

Um Ihren Code zu kompilieren und die CSS-Ausgabe zu generieren, die ein Browser verstehen kann, benötigen wir Gulp. Die Konfigurationsdatei gulpfile.js ist bereits im Projekt enthalten.

Führen Sie einfach gulp watch in Ihrem Subtheme-Verzeichnis aus (denken Sie daran, zuerst droopler_theme zu kompilieren), und es wird alle Änderungen in den Quelldateien des Themes verarbeiten und die Assets schnell kompilieren.

$ cd web/themes/custom/droopler_subtheme
$ gulp watch

Weitere Gulp-Befehle für Themes-Entwickler:

  • gulp watch - überwacht Änderungen in SCSS und JS und verarbeitet sie schnell,
  • gulp compile - kompiliert alle SCSS/JS im Subtheme für die DEV-Umgebung,
  • gulp dist - ebenso wie der vorherige, jedoch für die PROD-Umgebung,
  • gulp clean - bereinigt abgeleitete Dateien,
  • gulp debug - gibt Gulp-Debug-Informationen aus. 

Aktion

Lassen Sie uns nun so tun, als ob wir das Farbschema des Footers ändern möchten.

Das ursprüngliche Aussehen:

ursprüngliches Footer-Schema

Schritt 1: Führen Sie gulp watch aus.

start gulp

Schritt 2: Finden Sie im Konfigurationsdatei scss/config/_base_theme_overrides.scss den kommentierten Footer-Abschnitt.
// Footer
// $footer-background: $color-cassandra;
// $footer-text-color: $color-thersites;
// $footer-header-color: $color-odysseus;

Um die Farben zu ändern, kommentieren Sie die Zeilen aus und/oder fügen Sie andere verwandte Variablen hinzu und ändern Sie den Wert. Wir ermutigen Sie, unseren Ideen zu folgen und einfache Farbvariablen basierend auf der römischen Mythologie zu erstellen (sehen Sie sich die Erklärungen in der Datei an).  

Für das Tutorial können wir jedoch diese Regel umgehen und mit unserem eigenen Dummy-Benennungskonvention arbeiten.

Schritt 3: Definieren Sie die benutzerdefinierten einfachen Farben.
$color-tutorial-1: #fff;
$color-tutorial-2: #fff;
$color-tutorial-3: #cf4647;
$color-tutorial-4: #2a3f6d;
$color-tutorial-5: #fff;
$color-tutorial-6: rgba(#cf4647, .3);
$color-tutorial-7: #fff;
$color-tutorial-8: #cf4647;
$color-tutorial-9: #2a3f6d;
Schritt 4.1: Überschreiben Sie die Komponentenvariablen.
$footer-header-color: $color-tutorial-1;
$footer-text-color: $color-tutorial-2;
$footer-background: $color-tutorial-3;
$bottom-footer-background-color: $color-tutorial-4;
$bottom-footer-text-color: $color-tutorial-5;
$headings-color: $color-tutorial-9;
$stripe-background-color: $color-tutorial-6;
Schritt 4.2: Überschreiben Sie die Farbvariablen.
$color-agamemnon: $color-tutorial-8;
Schritt 4.3: Überschreiben Sie den benutzerdefinierten Selektor.
.site-footer .social-media-wrapper a {
 color: $color-tutorial-7;
}
Schritt 5: Nachdem Sie die Datei gespeichert haben, wird gulp watch alle SCSS mit Ihrer geänderten Konfiguration neu kompilieren.

gulp watch

Das Ergebnis:

Standard-Theme

Alternativ-Theme 1:

$color-tutorial-1: #cf4647;
$color-tutorial-2: #20232a;
$color-tutorial-3: #fff;
$color-tutorial-4: #20232a;
$color-tutorial-5: #fff;
$color-tutorial-6: rgba(#5d5d5d, .3);
$color-tutorial-7: #5d5d5d;
$color-tutorial-8: #cf4647;
$color-tutorial-9: #0f1831;

alternatives Theme 1

Alternativ-Theme 2:

$color-tutorial-1: #6aeae1;
$color-tutorial-2: #c4cdd6;
$color-tutorial-3: #0f1831;
$color-tutorial-4: #0c152e;
$color-tutorial-5: #c4cdd6,
$color-tutorial-6: rgba(#0f1831, .3);
$color-tutorial-7: #c4cdd6;
$color-tutorial-8: #0f1831;
$color-tutorial-9: #0f1831;

alternatives Theme 2

Protip

Tauchen wir in die Verbesserungen ein, die Sie sofort vornehmen können. Wir können eine Palettenfunktion erstellen, die es uns ermöglicht, zwischen verschiedenen Palettensätzen zu wechseln.

1. Erstellen Sie zuerst die Datei config/_helpers.scss.
2. Fügen Sie die folgende Funktionalität hinzu.
@function val($map, $keys...) {
 @each $key in $keys {
   $map: map-get($map, $key);
 }

 @return $map;
}

@function palette($keys...) {
 @return val($palettes, $keys...);
}

Die palette Funktion wird durch die Variable $paletten, die wir erstellen werden, die Farbschemata-Schleife durchlaufen.

3. Sammeln Sie die Datei in config/_all.scss.
@import "helpers";
@import "base_theme_overrides";
@import "base_theme_overrides";
4. Passen Sie dann die Datei scss/config/_base_theme_overrides.scss an.
$paletten: (
 default: (
   color-tutorial-1: #fff,
   color-tutorial-2: #fff,
   color-tutorial-3: #cf4647,
   color-tutorial-4: #2a3f6d,
   color-tutorial-5: #fff,
   color-tutorial-6: rgba(#cf4647, .3),
   color-tutorial-7: #fff,
   color-tutorial-8: #cf4647,
   color-tutorial-9: #2a3f6d,
 ),

 alt-1: (
   color-tutorial-1: #cf4647,
   color-tutorial-2: #20232a,
   color-tutorial-3: #fff,
   color-tutorial-4: #20232a,
   color-tutorial-5: #fff,
   color-tutorial-6: rgba(#5d5d5d, .3),
   color-tutorial-7: #5d5d5d,
   color-tutorial-8: #cf4647,
   color-tutorial-9: #0f1831,
 ),

 alt-2: (
   color-tutorial-1: #6aeae1,
   color-tutorial-2: #c4cdd6,
   color-tutorial-3: #0f1831,
   color-tutorial-4: #0c152e,
   color-tutorial-5: #c4cdd6,
   color-tutorial-6: rgba(#0f1831, .3),
   color-tutorial-7: #c4cdd6,
   color-tutorial-8: #0f1831,
   color-tutorial-9: #0f1831,
 ),
);
5. Überschreiben Sie die Variablen.
$headings-color: palette($p, color-tutorial-9);
$stripe-background-color: palette($p, color-tutorial-6);
$footer-background: palette($p, color-tutorial-3);
$footer-text-color: palette($p, color-tutorial-2);
$footer-header-color: palette($p, color-tutorial-1);
$bottom-footer-background-color: palette($p, color-tutorial-4);
$bottom-footer-text-color: palette($p, color-tutorial-5);
$color-agamemnon: $color-tutorial-8;
.site-footer .social-media-wrapper a {
 color: palette($p, color-tutorial-7);
}

Um die gleichen Ergebnisse wie zuvor zu erzielen, setzen Sie den richtigen $p Wert.

  • $p: default; für Standard-Theme,
  • $p: alt-1; für alternatives Theme 1,
  • $p: alt-2; für alternatives Theme 2.  

Durch die Definition des $p Wertes können wir das Farbpaletten wesentlich leichter ändern. Dies ist sehr hilfreich, wenn Sie verschiedene Abschnitte mit einer identischen Liste von Elementen haben, aber der erste Abschnitt eine helle Farbpalette aufweist und der andere eine dunkle. Durch die Kombination der Paletten-Helferfunktion mit benutzerdefinierten Mixins können wir einfach die Elemente im Lichtmodus (ein Farbschema, das, auf hellen Hintergründen dunkle Typografie, UI-Elemente und Ikonografie nutzt) und die dunklen festlegen.

// _buttons.scss
@mixin color-button($p: light) {
 background-color: palette($p, $color-tutorial-2);
 color: palette($p, $color-tutorial-1);
}

// _sections.scss
.section-light {
 @include color-text();

 @include color-button();
}

.section-dark {
 @include color-text(dark);
 @include color-button(dark);
}

Zusammenfassung

Wie Sie oben sehen können, ist Droopler ein leistungsfähiges Tool nicht nur für Inhalts-Editoren, sondern auch für Designer und Frontend-Entwickler.

Wir haben die besten Technologien verwendet und konfiguriert, um Ihnen den Bau eigener hochwertiger Websites zu erleichtern. Dieses Tutorial zeigt, wie einfach Sie dieses bereits elegante und leistungsfähige System anpassen können, um beliebige Farbschemata zu ergänzen.

 

As part of Drupal support, we maintain existing websites and expand them with new functionalities
Check related tutorials