Zenit Design - Themes
Theme kaufenThemesSupport
DE
DE
  • Erste Schritte
  • Start Guides
    • Atmos - Demo 1
    • Atmos - Demo 2
    • Atmos - Demo 3
    • Atmos - Demo 4
    • Gravity - Demo 1
    • Gravity - Demo 2
    • Horizon - Demo 1
    • Horizon - Demo 2
    • Sphere - Demo 1
    • Sphere - Demo 2
    • Stratus - Demo 1
    • Stratus - Demo 2
    • Stratus - Demo 3
    • Stratus - Demo 4
  • Tipps
    • Dashboard
    • Theme Konfiguration
    • Lexikon
    • Mehrere Verkaufskanäle
  • Vorlagen
  • Support
    • Error auslesen
    • Ursache finden
  • 🎨Styling
    • Allgemein
      • Grundlayout
      • Produktbilder
      • Produkt Layout-Typ
      • Globales Hintergrundbild
      • Preloader
      • Akzentlinie
      • Scroll Animation
    • Typografie & Farben
      • Theme-Farben
      • Status-Ausgaben
      • Schriftarten
      • Typografie
      • E-Commerce
      • Buttons
    • Logos
    • Header
      • Header
      • Suche
      • Top Bar
      • Shop Navigation
      • Main Navigation
      • Flyout Navigation
      • Dropdown Navigation
    • Footer
      • Footer
      • Inhalte
      • Spalten
      • Spalten Styling
      • Unterer Footer
    • Elemente
      • Sidebar
      • Sidebar Navigation
      • Formulare
      • Bild- & Galerie-Slider
      • Produkt Slider
      • Kategorie Listing Slider
      • Paginierung
      • Breadcrumbs
      • Cookie Banner
      • Offcanvas
      • Backdrop
      • Scroll-Up Button
    • Kategorie
      • Kategorie-Header
      • Hero Sektion
      • Filter
      • Listing Actions
      • Produkt-Boxen
      • Quickview
    • Produkt
      • Details
      • Galerie
      • Beschreibung
      • Beschreibung Navigation
      • Beschreibung Inhalt
    • Kasse
      • Warenkorb
      • Kasse
  • ⚙️Einstellungen
    • Grundeinstellungen
    • Zusatzfeld Zuweisung
      • Zusatzfelder für Details auf der Produktseite
      • Zusatzfelder für Produkt-Datenblätter
    • Social Media Icons
    • Marketing Text Slider
    • Custom Tab Detailseite
    • Custom Spalten (Footer)
    • Eigener Code
  • 📂Inhalte
    • Erlebniswelten
      • Sektionen
      • Blöcke
        • Elemente
          • Bild Text Slider
          • Suche Banner
          • Text Banner
          • Teaser
          • Features
          • Breadcrumbs
          • Code
          • Trenner
          • Kategorie-Navigation
          • Footer-Navigation
          • Platzhalter
        • Commerce
          • Galerie und Buybox mit Produktname & Hersteller-Logo
          • Galerie und Buybox mit Produktname & Hersteller-Logo & Beschreibung
          • Galerie und Buybox mit Beschreibung
          • Galerie mit Beschreibung und Buybox mit Produktname & Hersteller-Logo
        • Kategorie
          • Kategorie Listing
        • Spalten
        • Layouts
      • Block Innen-Abstände
      • Block Außen-Abstände
      • Animation
      • Erlebniswelt Beispiel
      • CSS-Variablen
    • Kategorieseite
      • Hero Sektion
      • Kategorie Header
      • CSS-Klassen
      • Kategorie Labels
      • Kategorie Icons
      • Produkte pro Zeile
    • Produktseite
      • Layouts
      • Standardlayout
      • Galerie Modus
      • Custom Tabs
      • Videos Tab
      • Datenblätter
    • Produktbilder
      • Bildgrößen
      • Bildformat
      • Dateiformat
      • Produktbilder Hintergrund
    • Layout-Typ
    • Responsive Tabellen
    • Mehrsprachigkeit
  • 🎓Tutorials
    • Demodaten importieren
    • Demo-Themekonfiguration importieren
    • Child-Theme duplizieren
    • Individuelle Anpassungen
    • Konfiguration export/import
    • Zusatzfelder export/import
    • Schriften lokal einbinden
    • Schriften lokal einbinden mit Child-Theme
  • 🛠️Update Guides
    • Child-Theme Update
    • Shopware 6.7.0.0
    • Shopware 6.6.9.0
    • Shopware 6.6.0.0
    • Shopware 6.5.0.0
    • Shopware 6.4.8.0
    • Theme 3.5.3
    • Theme 2.11.0
  • ❓FAQ
    • Übersicht
    • Barrierefreiheit
      • Typografie
      • Farben
      • Bilder
      • Video
      • Checker-Tools und Ressourcen
    • Allgemein
      • Copyright-Hinweis
      • Merkzettel
    • Produkt Layout
    • Lizenzen
      • Testversion vs Vollversion
      • Lizenzdomain ändern
    • Ableitungen
      • Child-Theme
      • Theme-Duplikat
      • Child-Theme vs Theme-Duplikat
    • Updates
      • Theme wird als inkompatibel angezeigt
      • Update wird nicht angezeigt
    • Fehler
      • Child-Theme kann nicht zugewiesen werden
      • Textbausteine zeigen technischen Namen
      • Theme Speichern Fehler
      • SVG Logo wird nicht angezeigt
      • Suche / Input mobile Zoom
      • Text ist nicht sichtbar / lesbar
Powered by GitBook
On this page
  • Standardwerte der Theme-Konfiguration
  • Entfernte Theme-Variablen
  • ESI für Header und Footer
  • Allgemeiner Hinweis zu Child-Themes

Was this helpful?

  1. Update Guides

Shopware 6.7.0.0

Leitfaden für das Shopware Major Release von 2025

Wie in jedem jährlichen Major Release von Shopware gibt es auch mit Shopware in Version 6.7 wieder spannende Neuerungen, aber auch sogenannte Breaking Changes – das ist Teil der Update-Strategie von Shopware.


Standardwerte der Theme-Konfiguration

Diese Änderung ist im Zuge der Anpassungen zur Verbesserung der Barrierefreiheit erfolgt.

Zur Einhaltung der Kontrastvorgaben von WCAG 2.1 (Mindestwert 4.5:1) wurden diverse Farb-Variablen im Theme angepasst. Bitte beachte, dass hiervon nur Konfigurationsfelder betroffen sind, deren Wert Du nicht verändert hast. Bereits geänderte Konfogurationsfelder werden nicht überschrieben.

Theme Atmos - Set 1
  • Preloader > Preloader - Seitenladeanimation > Hintergrund (zen-layout-preloader-bg)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)

  • Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (zen-min-contrast-ratio)2 => 4.5

  • Typografie & Farben > Theme-Farben > Farben > Primärfarbe (sw-color-brand-primary)#D9AB98 => #b16141

  • Typografie & Farben > Theme-Farben > Farben > Sekundärfarbe (sw-color-brand-secondary)#333333 => #222222

  • Typografie & Farben > Status-Ausgaben > > Erfolg (sw-color-success)#3cc261 => #007e4e

  • Typografie & Farben > Status-Ausgaben > > Information (sw-color-info)#26b6cf => #005b99

  • Typografie & Farben > Status-Ausgaben > > Hinweis (sw-color-warning)#ffbd5d => #9b6a08

  • Typografie & Farben > Status-Ausgaben > > Fehler (sw-color-danger)#e52427 => #c20017

  • Typografie & Farben > Buttons > Farben > Heller Button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Typografie & Farben > Buttons > Farben > Dunkler Button Text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Header > Top Bar > Farben > Text:hover (zen-top-bar-hover-color)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)

  • Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Farben > Text:hover (zen-shop-navigation-hover-color)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)

  • Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Warenkorb > Text:hover (zen-shop-navigation-cart-hover-color)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)

  • Header > Main Navigation (Kategorien) > Farben > Hintergrund:hover (zen-main-navigation-hover-bg)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)

  • Header > Main Navigation (Kategorien) > Farben > Text:hover (zen-main-navigation-hover-color)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)

  • Footer > Spalten Styling > Newsletter Spalte > Hintergrund (zen-footer-newsletter-column-bg)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)

  • Footer > Spalten Styling > Newsletter Spalte > Form border (zen-footer-newsletter-field-border)$sw-color-brand-primary => darken($sw-color-brand-primary, 5%)

  • Elemente > Sidebar navigation > Farben > Hintergrund:aktiver Pfad (zen-sidebar-navigation-active-bg)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)

  • Elemente > Sidebar navigation > Farben > Text:aktiver Pfad (zen-sidebar-navigation-active-color)#706560 => darken($sw-color-brand-primary, 20%)

  • Elemente > Formulare > Farben > Rahmen (zen-input-border-color)$sw-border-color => darken($sw-border-color, 33%)

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Hintergrund (zen-base-slider-controls-inside-bg)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 30%)

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe (zen-base-slider-controls-inside-color)$sw-color-brand-primary => darken($sw-color-brand-primary, 20%)

  • Kategorie > Filter > Farben > Hintergrund:hover (zen-category-filter-hover-bg)lighten(saturate($sw-color-brand-primary, 7%), 15%) => lighten(saturate($sw-color-brand-primary, 7%), 20%)

Theme Atmos - Set 2
  • Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (zen-min-contrast-ratio)2 => 4.5

  • Typografie & Farben > Theme-Farben > Farben > Primärfarbe (sw-color-brand-primary)#e87d00 => #aa5c00

  • Typografie & Farben > Theme-Farben > Farben > Rahmen (sw-border-color)#e8e7e8 => #8d8d8d

  • Typografie & Farben > Status-Ausgaben > > Erfolg (sw-color-success)#3cc261 => #007e4e

  • Typografie & Farben > Status-Ausgaben > > Information (sw-color-info)#26b6cf => #005b99

  • Typografie & Farben > Status-Ausgaben > > Hinweis (sw-color-warning)#ffbd5d => #9b6a08

  • Typografie & Farben > Status-Ausgaben > > Fehler (sw-color-danger)#e52427 => #c20017

  • Typografie & Farben > Buttons > Farben > Heller Button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Typografie & Farben > Buttons > Farben > Dunkler Button Text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Header > Suche > Farben > [!] Text:focus (zen-search-focus-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 10%)

  • Header > Suche > Farben > Rahmen (zen-search-border)$sw-color-brand-primary => lighten($sw-color-brand-primary, 10%)

  • Header > Suche > Farben > [!] Rahmen:focus (zen-search-focus-border)$sw-color-brand-secondary => lighten($sw-color-brand-primary, 10%)

  • Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Farben > Text:hover (zen-shop-navigation-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 10%)

  • Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Warenkorb > Text:hover (zen-shop-navigation-cart-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 10%)

  • Header > Main Navigation (Kategorien) > Farben > Text:hover (zen-main-navigation-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 10%)

  • Elemente > Sidebar navigation > Farben > Hintergrund (zen-sidebar-navigation-bg)#F3F4F5 => #ffffff

  • Elemente > Sidebar navigation > Farben > Rahmen (zen-sidebar-navigation-border-color)$sw-color-brand-primary => $sw-border-color

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Hintergrund (zen-base-slider-controls-inside-bg)transparent => $sw-color-brand-primary

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Hintergrund:hover (zen-base-slider-controls-inside-hover-bg)transparent => $sw-color-brand-primary

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe (zen-base-slider-controls-inside-color)$sw-text-color => #ffffff

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe:hover (zen-base-slider-controls-inside-hover-color)$sw-color-brand-primary => #ffffff

  • Elemente > Paginierung > Farben > Hintergrund:hover (zen-pagination-hover-bg)hsl(hue($sw-border-color), saturation($sw-border-color), 93%) => $sw-color-brand-primary

  • Elemente > Paginierung > Farben > Text:hover (zen-pagination-hover-color)darken($sw-color-brand-primary, 15%) => #ffffff

  • Produkt > Beschreibung Navigation > Farben > [!] Hintergrund / Unterstrich (zen-product-tabs-bg)$sw-border-color => transparent

  • Produkt > Beschreibung Navigation > Farben > Text (zen-product-tabs-color)$sw-text-color => $sw-color-brand-primary

Theme Atmos - Set 3
  • Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (zen-min-contrast-ratio)3 => 4.5

  • Typografie & Farben > Theme-Farben > Farben > Primärfarbe (sw-color-brand-primary)#e54924 => #d83f1b

  • Typografie & Farben > Theme-Farben > Farben > Rahmen (sw-border-color)#e8e7e8 => #404346

  • Typografie & Farben > Theme-Farben > Farben > [!] Meta Theme-Farbe (zen-meta-theme-color)#ffffff => #161718

  • Typografie & Farben > Theme-Farben > Farben > Link-Farbe (zen-link-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 10%)

  • Typografie & Farben > Status-Ausgaben > > Fehler (sw-color-danger)#e52427 => #f42d30

  • Typografie & Farben > Buttons > Farben > Heller Button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Typografie & Farben > Buttons > Farben > Dunkler Button Text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Header > Top Bar > Farben > Hintergrund:hover (zen-top-bar-hover-bg)lighten($sw-color-brand-secondary, 5%) => darken($sw-color-brand-secondary, 8%)

  • Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Warenkorb > Badge Farbe (zen-shop-navigation-cart-badge-color)$sw-color-brand-primary => #ffffff

  • Footer > Footer > Farben > Hintergrund (zen-footer-bg)darken($sw-background-color, 5%) => darken($sw-background-color, 8%)

  • Footer > Spalten Styling > Newsletter Spalte > [!] Form Hintergrund (zen-footer-newsletter-field-bg)lighten($sw-color-brand-secondary, 5%) => #ffffff

  • Footer > Spalten Styling > Newsletter Spalte > [!] Form Hintergrund:focus (zen-footer-newsletter-field-focus-bg)$sw-color-brand-secondary => #ffffff

  • Footer > Spalten Styling > Newsletter Spalte > Form text (zen-footer-newsletter-field-color)#ffffff => $sw-text-color

  • Footer > Spalten Styling > Newsletter Spalte > Form border (zen-footer-newsletter-field-border)darken($sw-color-brand-secondary, 10%) => #ffffff

  • Footer > Unterer Footer > Farben > Hintergrund (zen-footer-bottom-bg)darken($sw-background-color, 5%) => darken($sw-background-color, 8%)

Theme Atmos - Set 4
  • Akzentlinie > Grundeinstellungen > Akzentlinie oben (zen-layout-border-top-width)5 => 0

  • Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (zen-min-contrast-ratio)1 => 4.5

  • Typografie & Farben > Theme-Farben > Farben > Sekundärfarbe (sw-color-brand-secondary)#676460 => #5d5c57

  • Typografie & Farben > Theme-Farben > Farben > Link-Farbe (zen-link-color)$sw-color-brand-primary => darken($sw-color-brand-primary, 45%)

  • Typografie & Farben > Status-Ausgaben > > Erfolg (sw-color-success)#3cc261 => #007e4e

  • Typografie & Farben > Status-Ausgaben > > Information (sw-color-info)#26b6cf => #005b99

  • Typografie & Farben > Status-Ausgaben > > Hinweis (sw-color-warning)#ffbd5d => #9b6a08

  • Typografie & Farben > Status-Ausgaben > > Fehler (sw-color-danger)#e52427 => #c20017

  • Typografie & Farben > Typografie > Farben > Dunkle Textfarbe (sw-text-color)#6d6d6d => #111111

  • Typografie & Farben > Buttons > Farben > Heller Button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Typografie & Farben > Buttons > Farben > Dunkler Button Text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Typografie & Farben > E-Commerce > > Kaufen-Button Text (sw-color-buy-button-text)#ffffff => #000000

  • Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Farben > Text:hover (zen-shop-navigation-hover-color)$sw-color-brand-primary => darken($sw-color-brand-primary, 45%)

  • Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Warenkorb > Text:hover (zen-shop-navigation-cart-hover-color)$sw-color-brand-primary => darken($sw-color-brand-primary, 45%)

  • Header > Dropdown Navigation > Farben > Text (zen-dropdown-navigation-color)#ffffff => $sw-text-color

  • Header > Dropdown Navigation > Farben > Text:hover (zen-dropdown-navigation-hover-color)#ffffff => $sw-text-color

  • Footer > Footer > Farben > Text (zen-footer-color)#ffffff => $sw-text-color

  • Footer > Spalten Styling > Hotline Spalte > Text (zen-footer-hotline-column-color)#ffffff => $sw-text-color

  • Footer > Spalten Styling > Hotline Spalte > Text:hover (zen-footer-hotline-column-hover-color)$sw-color-brand-primary => $sw-text-color

  • Footer > Spalten Styling > Custom Spalte 1 > Text:hover (zen-footer-custom-column-hover-color)$sw-color-brand-primary => $sw-text-color

  • Footer > Spalten Styling > Custom Spalte 2 > Text:hover (zen-footer-custom-2-column-hover-color)$sw-color-brand-primary => $sw-text-color

  • Footer > Spalten Styling > Custom Spalte 3 > Text:hover (zen-footer-custom-3-column-hover-color)$sw-color-brand-primary => $sw-text-color

  • Footer > Spalten Styling > Zahlungsarten Spalte > Text:hover (zen-footer-payment-logos-column-hover-color)$sw-color-brand-primary => $sw-text-color

  • Footer > Spalten Styling > Versandarten Spalte > Text:hover (zen-footer-shipping-logos-column-hover-color)$sw-color-brand-primary => $sw-text-color

  • Elemente > Sidebar navigation > Farben > Text:hover (zen-sidebar-navigation-hover-color)#ffffff => $sw-text-color

  • Elemente > Sidebar navigation > Farben > Text:aktiver Pfad (zen-sidebar-navigation-active-color)#ffffff => $sw-text-color

  • Elemente > Formulare > Farben > Rahmen (zen-input-border-color)$sw-border-color => darken($sw-border-color, 33%)

  • Elemente > Formulare > Farben > Rahmen:focus (zen-input-focus-border-color)$sw-color-brand-primary => darken($sw-color-brand-primary, 45%)

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Außen) > Pfeile-Navigation Farbe (zen-base-slider-controls-outside-color)#ffffff => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Außen) > Pfeile-Navigation Farbe:hover (zen-base-slider-controls-outside-hover-color)$sw-color-brand-primary => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Außen) > Dots (zen-base-slider-controls-dots-outside-color)$sw-color-brand-primary => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Außen) > Dots:hover (zen-base-slider-controls-dots-outside-hover-color)$sw-color-brand-primary => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe:hover (zen-base-slider-controls-inside-hover-color)$sw-color-brand-primary => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Dots (zen-base-slider-controls-dots-inside-color)$sw-color-brand-primary => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Dots:hover (zen-base-slider-controls-dots-inside-hover-color)$sw-color-brand-primary => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Außen) > Pfeile-Navigation Hintergrund (zen-image-slider-controls-outside-bg)$sw-color-brand-primary => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Außen) > Pfeile-Navigation Farbe:hover (zen-image-slider-controls-outside-hover-color)$sw-color-brand-primary => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Außen) > Dots (zen-image-slider-controls-dots-outside-color)$sw-color-brand-primary => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Außen) > Dots:hover (zen-image-slider-controls-dots-outside-hover-color)$sw-color-brand-primary => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe (zen-image-slider-controls-inside-color)$sw-color-brand-primary => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe:hover (zen-image-slider-controls-inside-hover-color)#ffffff => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Dots (zen-image-slider-controls-dots-inside-color)$sw-color-brand-primary => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Dots:hover (zen-image-slider-controls-dots-inside-hover-color)$sw-color-brand-primary => $sw-text-color

  • Elemente > Produkt Slider > Farben > Pfeile-Navigation Farbe (zen-product-slider-controls-color)#ffffff => $sw-text-color

  • Elemente > Produkt Slider > Farben > Pfeile-Navigation Farbe:hover (zen-product-slider-controls-hover-color)$sw-color-brand-primary => $sw-text-color

  • Elemente > Kategorie Listing Slider > Farben > Pfeile-Navigation Farbe (zen-category-listing-slider-controls-color)#ffffff => $sw-text-color

  • Elemente > Kategorie Listing Slider > Farben > Pfeile-Navigation Farbe:hover (zen-category-listing-slider-controls-hover-color)$sw-color-brand-primary => $sw-text-color

  • Elemente > Paginierung > Farben > Text (zen-pagination-color)$sw-color-brand-primary => $sw-text-color

  • Elemente > Paginierung > Farben > Text:hover (zen-pagination-hover-color)darken($sw-color-brand-primary, 15%) => $sw-text-color

  • Elemente > Paginierung > Farben > Text:active (zen-pagination-active-color)#ffffff => $sw-text-color

  • Elemente > Breadcrumbs > Farben > Text:hover (zen-breadcrumbs-hover-color)$sw-color-brand-primary => darken($sw-color-brand-primary, 45%)

  • Kategorie > Filter > Farben > Text:hover (zen-category-filter-hover-color)#ffffff => $sw-text-color

  • Kategorie > Filter > Farben > Text:active (zen-category-filter-active-color)#ffffff => $sw-text-color

  • Produkt > Details > Produkt Konfigurator > Text:hover (zen-product-configurator-hover-color)#ffffff => $sw-text-color

  • Produkt > Beschreibung Navigation > Farben > Text:hover (zen-product-tabs-hover-color)#ffffff => $sw-text-color

Theme Gravity - Set 1
  • Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (zen-min-contrast-ratio)2 => 4.5

  • Typografie & Farben > Status-Ausgaben > > Erfolg (sw-color-success)#3cc261 => #007e4e

  • Typografie & Farben > Status-Ausgaben > > Information (sw-color-info)#26b6cf => #005b99

  • Typografie & Farben > Status-Ausgaben > > Hinweis (sw-color-warning)#ffbd5d => #9b6a08

  • Typografie & Farben > Status-Ausgaben > > Fehler (sw-color-danger)#e52427 => #c20017

  • Typografie & Farben > Buttons > Farben > Heller Button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Typografie & Farben > Buttons > Farben > Dunkler Button Text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Elemente > Formulare > Farben > Rahmen:focus (zen-input-focus-border-color)$sw-border-color => #818faa

Theme Gravity - Set 2
  • Typografie & Farben > Status-Ausgaben > > Erfolg (sw-color-success)#3cc261 => #007e4e

  • Typografie & Farben > Status-Ausgaben > > Information (sw-color-info)#26b6cf => #005b99

  • Typografie & Farben > Status-Ausgaben > > Hinweis (sw-color-warning)#F2CB05 => #9b6a08

  • Typografie & Farben > Status-Ausgaben > > Fehler (sw-color-danger)#EA003A => #ea003a

  • Typografie & Farben > Buttons > Farben > Dunkler Button Text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Footer > Footer > Farben > Text:hover (zen-footer-hover-color)darken($sw-color-brand-secondary, 20%) => darken($sw-color-brand-secondary, 30%)

  • Footer > Spalten Styling > Hotline Spalte > Text:hover (zen-footer-hotline-column-hover-color)darken($sw-color-brand-secondary, 20%) => darken($sw-color-brand-secondary, 30%)

  • Footer > Spalten Styling > Social-Media Spalte > Text:hover (zen-footer-social-column-hover-color)darken($sw-color-brand-secondary, 20%) => darken($sw-color-brand-secondary, 30%)

  • Footer > Spalten Styling > Custom Spalte 1 > Text:hover (zen-footer-custom-column-hover-color)darken($sw-color-brand-secondary, 20%) => darken($sw-color-brand-secondary, 30%)

  • Elemente > Formulare > Farben > Hintergrund:focus (zen-input-focus-bg)#ffffff => #f6f7f9

  • Elemente > Formulare > Farben > Rahmen (zen-input-border-color)#f6f7f9 => darken($sw-border-color, 32%)

  • Elemente > Formulare > Farben > Rahmen:focus (zen-input-focus-border-color)$sw-border-color => $sw-color-brand-primary

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Außen) > Dots (zen-base-slider-controls-dots-outside-color)$sw-border-color => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Außen) > Dots:hover (zen-base-slider-controls-dots-outside-hover-color)$sw-border-color => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Dots (zen-base-slider-controls-dots-inside-color)$sw-border-color => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Dots:hover (zen-base-slider-controls-dots-inside-hover-color)$sw-border-color => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Außen) > Dots (zen-image-slider-controls-dots-outside-color)$sw-border-color => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Außen) > Dots:hover (zen-image-slider-controls-dots-outside-hover-color)$sw-border-color => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Dots (zen-image-slider-controls-dots-inside-color)$sw-border-color => $sw-text-color

  • Elemente > Bild- & Galerie-Slider > Bild-Slider (Navigation Modus: Innen) > Dots:hover (zen-image-slider-controls-dots-inside-hover-color)$sw-border-color => $sw-text-color

  • Kategorie > Produkt-Boxen > Produktname > Text:hover (zen-product-listing-card-name-hover-color)$sw-color-brand-secondary => $sw-text-color

Theme Horizon - Set 1
  • Typografie & Farben > Theme-Farben > Farben > Rahmen (sw-border-color)#e8e7e8 => #444444

  • Typografie & Farben > Status-Ausgaben > > Erfolg (sw-color-success)#3cc261 => #007e4e

  • Typografie & Farben > Status-Ausgaben > > Information (sw-color-info)#26b6cf => #005b99

  • Typografie & Farben > Status-Ausgaben > > Hinweis (sw-color-warning)#ffbd5d => #9b6a08

  • Typografie & Farben > Status-Ausgaben > > Fehler (sw-color-danger)#e52427 => #c20017

  • Typografie & Farben > Buttons > Farben > Heller Button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Typografie & Farben > Buttons > Farben > Dunkler Button Text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Elemente > Formulare > Farben > Rahmen:focus (zen-input-focus-border-color)$sw-color-brand-primary => lighten($sw-border-color, 35%)

Theme Horizon - Set 2
  • Typografie & Farben > Theme-Farben > Farben > Rahmen (sw-border-color)#dee3e9 => #7e91a9

  • Typografie & Farben > Status-Ausgaben > > Erfolg (sw-color-success)#3cc261 => #007e4e

  • Typografie & Farben > Status-Ausgaben > > Information (sw-color-info)#26b6cf => #005b99

  • Typografie & Farben > Status-Ausgaben > > Hinweis (sw-color-warning)#ffbd5d => #9b6a08

  • Typografie & Farben > Status-Ausgaben > > Fehler (sw-color-danger)#e52427 => #c20017

  • Typografie & Farben > Buttons > Farben > Heller Button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Typografie & Farben > Buttons > Farben > Dunkler Button Text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Elemente > Formulare > Farben > Rahmen:focus (zen-input-focus-border-color)lighten(desaturate($sw-color-brand-primary, 69%), 60%) => darken($sw-border-color, 35%)

Theme Horizon - Set 3
  • Typografie & Farben > Buttons > Farben > Dunkler Button Text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Footer > Spalten Styling > Newsletter Spalte > Form border (zen-footer-newsletter-field-border)lighten($sw-border-color, 4%) => darken($sw-border-color, 33%)

  • Footer > Spalten Styling > Newsletter Spalte > Form border:focus (zen-footer-newsletter-field-focus-border)$sw-border-color => $sw-text-color

  • Elemente > Formulare > Farben > Hintergrund:focus (zen-input-focus-bg)#ffffff => lighten($sw-border-color, 4%)

  • Elemente > Formulare > Farben > Rahmen (zen-input-border-color)$sw-border-color => darken($sw-border-color, 33%)

Theme Sphere - Set 1
  • Typografie & Farben > Theme-Farben > Farben > Sekundärfarbe (sw-color-brand-secondary)#c5ab7e => #90723f

  • Typografie & Farben > Theme-Farben > Farben > Rahmen (sw-border-color)#CED4D9 => #7f8e97

  • Typografie & Farben > Theme-Farben > Farben > Link-Farbe (zen-link-color)$sw-color-brand-primary => $sw-color-brand-secondary

  • Typografie & Farben > Status-Ausgaben > > Erfolg (sw-color-success)#3cc261 => #007e4e

  • Typografie & Farben > Status-Ausgaben > > Information (sw-color-info)#26b6cf => #005b99

  • Typografie & Farben > Status-Ausgaben > > Hinweis (sw-color-warning)#ffbd5d => #9b6a08

  • Typografie & Farben > Status-Ausgaben > > Fehler (sw-color-danger)#e52427 => #c20017

  • Typografie & Farben > Typografie > Farben > Dunkle Textfarbe (sw-text-color)#777777 => #6f6f6f

  • Typografie & Farben > Buttons > Farben > Heller Button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Typografie & Farben > Buttons > Farben > Dunkler Button Text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Header > Top Bar > Farben > Text:hover (zen-top-bar-hover-color)$sw-color-brand-secondary => lighten($sw-color-brand-secondary, 15%)

  • Header > Flyout Navigation > Farben > Hintergrund (zen-flyout-navigation-bg)rgba($sw-color-brand-primary, 90%) => rgba($sw-color-brand-primary, 95%)

  • Header > Flyout Navigation > Farben > Text:hover (zen-flyout-navigation-hover-color)$sw-color-brand-secondary => #ffffff

  • Footer > Footer > Farben > Text:hover (zen-footer-hover-color)$sw-color-brand-secondary => lighten($sw-color-brand-secondary, 15%)

  • Footer > Spalten Styling > Newsletter Spalte > Form border (zen-footer-newsletter-field-border)$sw-color-brand-secondary => lighten($sw-color-brand-primary, 50%)

  • Footer > Spalten Styling > Newsletter Spalte > Form border:focus (zen-footer-newsletter-field-focus-border)$sw-color-brand-primary => #ffffff

  • Footer > Spalten Styling > Custom Spalte 1 > Text:hover (zen-footer-custom-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-secondary, 15%)

  • Footer > Spalten Styling > Custom Spalte 2 > Text:hover (zen-footer-custom-2-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-secondary, 15%)

  • Footer > Spalten Styling > Custom Spalte 3 > Text:hover (zen-footer-custom-3-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-secondary, 15%)

  • Footer > Spalten Styling > Zahlungsarten Spalte > Text:hover (zen-footer-payment-logos-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-secondary, 15%)

  • Footer > Spalten Styling > Versandarten Spalte > Text:hover (zen-footer-shipping-logos-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-secondary, 15%)

  • Footer > Unterer Footer > Farben > Text:hover (zen-footer-bottom-hover-color)$sw-color-brand-secondary => lighten($sw-color-brand-secondary, 15%)

  • Elemente > Sidebar navigation > Farben > Hintergrund (zen-sidebar-navigation-bg)transparent => #ffffff

  • Elemente > Sidebar navigation > Farben > Hintergrund:hover (zen-sidebar-navigation-hover-bg)#ffffff => $sw-color-brand-primary

  • Elemente > Sidebar navigation > Farben > Text:hover (zen-sidebar-navigation-hover-color)$sw-color-brand-secondary => #ffffff

  • Elemente > Sidebar navigation > Farben > Hintergrund:aktiver Pfad (zen-sidebar-navigation-active-bg)#ffffff => lighten($sw-color-brand-primary, 15%)

  • Elemente > Sidebar navigation > Farben > Text:aktiver Pfad (zen-sidebar-navigation-active-color)$sw-headline-color => #ffffff

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Hintergrund (zen-base-slider-controls-inside-bg)transparent => $sw-color-brand-primary

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Hintergrund:hover (zen-base-slider-controls-inside-hover-bg)transparent => $sw-color-brand-secondary

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe (zen-base-slider-controls-inside-color)$sw-border-color => #ffffff

  • Elemente > Bild- & Galerie-Slider > Galerie-Slider (Navigation Modus: Innen) > Pfeile-Navigation Farbe:hover (zen-base-slider-controls-inside-hover-color)$sw-color-brand-secondary => #ffffff

  • Elemente > Paginierung > Farben > Hintergrund:hover (zen-pagination-hover-bg)hsl(hue($sw-border-color), saturation($sw-border-color), 93%) => lighten($sw-color-brand-primary, 10%)

  • Elemente > Paginierung > Farben > Text:hover (zen-pagination-hover-color)darken($sw-color-brand-primary, 15%) => #ffffff

  • Kategorie > Filter > Farben > Hintergrund:hover (zen-category-filter-hover-bg)#ebedef => #ffffff

  • Kategorie > Filter > Farben > Text:hover (zen-category-filter-hover-color)$sw-text-color => $sw-color-brand-secondary

  • Kategorie > Produkt-Boxen > Produktbeschreibung > Text (zen-product-listing-card-description-color)lighten($sw-text-color, 10%) => $sw-text-color

Theme Sphere - Set 2
  • Typografie & Farben > Status-Ausgaben > > Erfolg (sw-color-success)#3cc261 => #007e4e

  • Typografie & Farben > Status-Ausgaben > > Information (sw-color-info)#26b6cf => #005b99

  • Typografie & Farben > Status-Ausgaben > > Hinweis (sw-color-warning)#F2CB05 => #9b6a08

  • Typografie & Farben > Status-Ausgaben > > Fehler (sw-color-danger)#EA003A => #ea003a

  • Typografie & Farben > Buttons > Farben > Dunkler Button Text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Footer > Spalten Styling > Newsletter Spalte > Form border:focus (zen-footer-newsletter-field-focus-border)darken($sw-color-brand-primary, 10%) => $sw-color-brand-secondary

  • Elemente > Formulare > Farben > Rahmen (zen-input-border-color)lighten($sw-border-color, 5%) => darken($sw-border-color, 30%)

Theme Stratus - Set 1
  • Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (zen-min-contrast-ratio)3 => 4.5

  • Typografie & Farben > Theme-Farben > Farben > Primärfarbe (sw-color-brand-primary)#F46036 => #e03403

  • Typografie & Farben > Theme-Farben > Farben > Rahmen (sw-border-color)#e8e7e8 => #958c95

  • Typografie & Farben > Status-Ausgaben > > Erfolg (sw-color-success)#3cc261 => #007e4e

  • Typografie & Farben > Status-Ausgaben > > Information (sw-color-info)#26b6cf => #005b99

  • Typografie & Farben > Status-Ausgaben > > Hinweis (sw-color-warning)#ffbd5d => #9b6a08

  • Typografie & Farben > Status-Ausgaben > > Fehler (sw-color-danger)#e52427 => #c20017

  • Typografie & Farben > Buttons > Farben > Heller Button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Typografie & Farben > Buttons > Farben > Dunkler Button Text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Header > Header > Checkout Minimal Header > Rahmen unten (zen-header-minimal-border-bottom)True => False

  • Footer > Spalten Styling > Newsletter Spalte > Hintergrund (zen-footer-newsletter-column-bg)darken($sw-color-brand-secondary, 10%) => #212121

  • Elemente > Sidebar navigation > Farben > Hintergrund:hover (zen-sidebar-navigation-hover-bg)darken($sw-color-brand-primary, 5%) => darken($sw-border-color, 25%)

  • Elemente > Sidebar navigation > Farben > Hintergrund:aktiver Pfad (zen-sidebar-navigation-active-bg)$sw-color-brand-primary => darken($sw-border-color, 15%)

Theme Stratus - Set 2
  • Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (zen-min-contrast-ratio)3 => 4.5

  • Typografie & Farben > Theme-Farben > Farben > Primärfarbe (sw-color-brand-primary)#FF463D => #e4281f

  • Typografie & Farben > Status-Ausgaben > > Erfolg (sw-color-success)#3cc261 => #007e4e

  • Typografie & Farben > Status-Ausgaben > > Information (sw-color-info)#26b6cf => #005b99

  • Typografie & Farben > Status-Ausgaben > > Hinweis (sw-color-warning)#ffbd5d => #9b6a08

  • Typografie & Farben > Status-Ausgaben > > Fehler (sw-color-danger)#e52427 => #c20017

  • Typografie & Farben > Typografie > Farben > Dunkle Textfarbe (sw-text-color)#6d6d6d => #4a4a4a

  • Typografie & Farben > Buttons > Farben > Heller Button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Typografie & Farben > Buttons > Farben > Dunkler Button Text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Header > Suche > Farben > Rahmen (zen-search-border)darken($sw-color-brand-secondary, 10%) => $sw-border-color

  • Header > Top Bar > Farben > Text:hover (zen-top-bar-hover-color)$sw-text-color => #ffffff

  • Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Farben > Text:hover (zen-shop-navigation-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)

  • Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Warenkorb > Text:hover (zen-shop-navigation-cart-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)

  • Footer > Footer > Farben > Text:hover (zen-footer-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)

  • Footer > Spalten Styling > Hotline Spalte > Text:hover (zen-footer-hotline-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)

  • Footer > Spalten Styling > Social-Media Spalte > Text:hover (zen-footer-social-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)

  • Footer > Spalten Styling > Custom Spalte 1 > Text:hover (zen-footer-custom-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)

  • Footer > Spalten Styling > Custom Spalte 2 > Text:hover (zen-footer-custom-2-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)

  • Footer > Spalten Styling > Custom Spalte 3 > Text:hover (zen-footer-custom-3-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)

  • Footer > Spalten Styling > Zahlungsarten Spalte > Text:hover (zen-footer-payment-logos-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)

  • Footer > Spalten Styling > Versandarten Spalte > Text:hover (zen-footer-shipping-logos-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 12%)

  • Footer > Unterer Footer > Farben > Text:hover (zen-footer-bottom-hover-color)darken($sw-color-brand-primary, 10%) => #ffffff

  • Elemente > Formulare > Farben > Rahmen (zen-input-border-color)$sw-border-color => darken($sw-border-color, 33%)

Theme Stratus - Set 3
  • Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (zen-min-contrast-ratio)2.5 => 4.5

  • Typografie & Farben > Theme-Farben > Farben > Rahmen (sw-border-color)#e8e7e8 => #989398

  • Typografie & Farben > Status-Ausgaben > > Erfolg (sw-color-success)#3cc261 => #007e4e

  • Typografie & Farben > Status-Ausgaben > > Information (sw-color-info)#26b6cf => #005b99

  • Typografie & Farben > Status-Ausgaben > > Hinweis (sw-color-warning)#ffbd5d => #9b6a08

  • Typografie & Farben > Status-Ausgaben > > Fehler (sw-color-danger)#e52427 => #c20017

  • Typografie & Farben > Buttons > Farben > Heller Button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Typografie & Farben > Buttons > Farben > Dunkler Button Text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Farben > Hintergrund (zen-shop-navigation-bg)$sw-color-brand-secondary => $sw-color-brand-primary

  • Header > Shop Navigation (Suche, Merkzettel, Konto, Warenkorb) > Farben > Hintergrund:hover (zen-shop-navigation-hover-bg)$sw-color-brand-primary => darken($sw-color-brand-primary, 5%)

  • Header > Flyout Navigation > Farben > Hintergrund (zen-flyout-navigation-bg)rgba($sw-color-brand-secondary, 90%) => rgba($sw-color-brand-secondary, 95%)

  • Header > Flyout Navigation > Farben > Text:hover (zen-flyout-navigation-hover-color)$sw-color-brand-primary => $zen-light-text-color

  • Footer > Spalten Styling > Hotline Spalte > Text:hover (zen-footer-hotline-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 15%)

  • Footer > Spalten Styling > Social-Media Spalte > Text:hover (zen-footer-social-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 15%)

  • Footer > Spalten Styling > Newsletter Spalte > Form border (zen-footer-newsletter-field-border)$sw-color-brand-primary => lighten($sw-color-brand-primary, 15%)

  • Footer > Spalten Styling > Custom Spalte 1 > Text:hover (zen-footer-custom-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 15%)

  • Footer > Spalten Styling > Custom Spalte 2 > Text:hover (zen-footer-custom-2-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 15%)

  • Footer > Spalten Styling > Custom Spalte 3 > Text:hover (zen-footer-custom-3-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 15%)

  • Footer > Spalten Styling > Zahlungsarten Spalte > Text:hover (zen-footer-payment-logos-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 15%)

  • Footer > Spalten Styling > Versandarten Spalte > Text:hover (zen-footer-shipping-logos-column-hover-color)$sw-color-brand-primary => lighten($sw-color-brand-primary, 15%)

  • Footer > Unterer Footer > Farben > Text:hover (zen-footer-bottom-hover-color)darken($sw-color-brand-primary, 10%) => lighten($sw-color-brand-primary, 15%)

  • Kategorie > Produkt-Boxen > Produktbeschreibung > Text (zen-product-listing-card-description-color)lighten($sw-color-price, 20%) => $sw-text-color

  • Produkt > Beschreibung Navigation > Farben > [!] Hintergrund / Unterstrich:hover (zen-product-tabs-hover-bg)$sw-color-brand-primary => darken($sw-color-brand-primary, 50%)

Theme Stratus - Set 4
  • Typografie & Farben > Theme-Farben > Grundeinstellungen > Kontrast Schwellenwert (zen-min-contrast-ratio)2.5 => 4.5

  • Typografie & Farben > Theme-Farben > Farben > Primärfarbe (sw-color-brand-primary)#909986 => #67705d

  • Typografie & Farben > Status-Ausgaben > > Erfolg (sw-color-success)#3cc261 => #007e4e

  • Typografie & Farben > Status-Ausgaben > > Information (sw-color-info)#26b6cf => #005b99

  • Typografie & Farben > Status-Ausgaben > > Hinweis (sw-color-warning)#ffbd5d => #9b6a08

  • Typografie & Farben > Status-Ausgaben > > Fehler (sw-color-danger)#e52427 => #c20017

  • Typografie & Farben > Typografie > Farben > Dunkle Textfarbe (sw-text-color)#6d6d6d => #4a4a4a

  • Typografie & Farben > Typografie > Farben > Dunkle Überschriftfarbe (sw-headline-color)#bab4ab => $sw-color-brand-secondary

  • Typografie & Farben > Buttons > Farben > Heller Button (zen-color-light-button)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Typografie & Farben > Buttons > Farben > Dunkler Button Text (zen-color-dark-button-text)hsl(hue($sw-border-color), saturation($sw-border-color), 98%) => hsl(hue($sw-border-color), saturation($sw-border-color), 94%)

  • Header > Suche > Farben > Rahmen (zen-search-border)$sw-border-color => darken($sw-border-color, 30%)

  • Header > Suche > Farben > [!] Rahmen:focus (zen-search-focus-border)$sw-border-color => darken($sw-border-color, 30%)

  • Header > Flyout Navigation > Farben > Hintergrund (zen-flyout-navigation-bg)rgba($sw-color-brand-primary, 90%) => rgba(darken($sw-color-brand-primary, 5%), 90%)

  • Header > Flyout Navigation > Farben > Text:hover (zen-flyout-navigation-hover-color)$sw-color-brand-secondary => #ffffff

  • Footer > Footer > Farben > Text:hover (zen-footer-hover-color)$sw-color-brand-primary => #ffffff

  • Footer > Spalten Styling > Hotline Spalte > Text:hover (zen-footer-hotline-column-hover-color)$sw-color-brand-primary => #ffffff

  • Footer > Spalten Styling > Social-Media Spalte > Text:hover (zen-footer-social-column-hover-color)$sw-color-brand-primary => #ffffff

  • Footer > Spalten Styling > Newsletter Spalte > Form border (zen-footer-newsletter-field-border)$sw-color-brand-primary => lighten($sw-color-brand-primary, 17%)

  • Footer > Spalten Styling > Custom Spalte 1 > Text:hover (zen-footer-custom-column-hover-color)$sw-color-brand-primary => #ffffff

  • Elemente > Formulare > Farben > Rahmen (zen-input-border-color)#f2efeb => darken($sw-border-color, 33%)

  • Kategorie > Produkt-Boxen > Produktbeschreibung > Text (zen-product-listing-card-description-color)lighten($sw-color-price, 20%) => $sw-text-color


Entfernte Theme-Variablen

Im Zuge der Barrierefreiheitsmaßnahmen wurden folgende Theme-Variablen entfernt:

  • zen-checkout-confirm-payment-shipping-description-length Gibt an, wie viele Zeichen bei den Beschreibungen der Zahlungs- und Versandarten angezeigt werden.

  • zen-checkout-confirm-visible-payment-methods-limit Gibt an, wie viele Zahlungsmethoden sichtbar sind. Weitere sind über „Mehr anzeigen“ erreichbar.

  • zen-checkout-confirm-visible-shipping-methods-limit Gibt an, wie viele Versandarten sichtbar sind. Weitere sind über „Mehr anzeigen“ erreichbar.

Weitere:

Die Einstellung zum Dropdown-Auslöser zen-dropdown-navigation-trigger wurde entfernt, da sie im neuen Header-Konzept nicht mehr benötigt wird.


ESI für Header und Footer

Mit Shopware 6.7 wurde ESI (Edge Side Includes) für Header und Footer eingeführt. Dadurch werden Header und Footer deines Shops nun schneller geladen und effizienter im Cache gespeichert. Beide Bereiche wurden vollständig überarbeitet:

  • Neuer Header-Aufbau (Storefront - Header/Navbar Refactoring)

  • Neuer Footer-Aufbau (Storefront - Footer Refactoring)


Allgemeiner Hinweis zu Child-Themes

Wenn du ein Child-Theme nutzt, liegt es in deiner Verantwortung, eigene Code-Anpassungen zu überprüfen und ggf. zu überarbeiten.

Last updated 6 hours ago

Was this helpful?

👉 Detaillierte Informationen zur Barrierefreiheit in unserem Theme findest du in unserem .

Weitere Infos dazu findest du im offiziellen Shopware Upgrade Guide:

📘 Offizieller Shopware Upgrade Guide:

🛠️
Beitrag zur Barrierefreiheit
Link zur Doku
https://github.com/shopware/shopware/blob/trunk/UPGRADE-6.7.md