In CSS-Regeln können Variablen deklariert werden, deren Werte in anderen Regeln wiederverwendet werden können.

Decker verwendet zur Erhaltung einer einheitlichen Foliengestaltung solche Variablen.

Der Name einer CSS-Variable beginnt immer mit zwei Bindestrichen (-), z.B.:

--foreground-color

Der Wert einer Variablen kann innerhalb einer Regel verwendet werden, indem ihr Name in der CSS-Funktion var() verwendet wird, z.B.:

color: var(--foreground-color);

Im Folgen wird erklärt, wie sie die Werte dieser Variablen anpassen oder sie in ihren eigenen Stilregeln verwenden können.

Sie können die Werte der Variablen anpassen, indem Sie in eigenen eingebundenen CSS-Dateien die Werte der Variablen in einer Regel für das DOM-Element :root anpassen:

:root {
  --foreground-color: #cceecc;
}

Im Folgenden werden die wichtigsten CSS-Variablen erklärt.

Die Variablen --shade0 bis --shade7 repräsentieren die ersten 8 Farben aus der Farbpallette und sind für gewöhnlich Abstufungen zwischen der Vordergrundfarbe für Text und Hintergrundfarbe der Folien.

Die Variablen --accent0 bis --accent7 repräsentieren die hinteren 8 Farben aus der Farbpallette und sind für gewöhnlich dem Regenbogen nach angeordnete Akzentfarben für Hervorhebungen, Menus und Stiftfarben im Whiteboardmodus.

Die Schattierungs- und Akzentfarben bestimmen zudem den Wert folgender Farben mit spezifischer Semantik:

• --foreground-color: var(--shade7) ist die Vordergrundfarbe für Text
• --background-color: var(--shade0) ist die Hintergrundfarbe der Folien

Eine Akzentfarbe aus der Farbpallette wird zudem als Primär- und Sekundärfarbe für einheitliche Farben gewählt:

• --primary-color: var(--accent5)
• --secondary-color: var(--accent1)

Die Werte für diese Primär- und Sekundärfarbe hängt vom gewählten Ressourcenpaket ab.

Die folgenden Farbtöne werden durch die Werte von --accent0 bis --accent7 besimmt und repräsentieren Farbtöne die an die entsprechenden Primärfarben angelehnt sind:

--redish, --orangeish, --yellowish, --greenish, --tealish, --blueish, --violetish, --brownish

Diese semantischen Akzentfarben werden zudem für Elemente verwendet, die Fehler und Hinweise verschiedener Strenge hervorheben:

--color-error, --color-alert, --color-warn, --color-success, --color-info

Die Farben für interaktive Elemente und Menus können Sie mit folgenden Variablen einstellen:

--hover-color, --highlight-color, --flying-focus-color

--icon-active-color, --icon-disabled-color, --icon-inactive-color, --icon-hover-color, --icon-background-color, --icon-border-radius

--menu-background-color, --menu-text-color, --menu-header-background-color, --menu-header-text-color, --menu-border-color

--common-menu-header-height, --common-menu-header-padding

Die folgenden CSS-Variablen werden verwendet, um die Farben im Feedback-Menu anzupassen:

--feedback-element-border-radius

--feedback-input-background-color

--feedback-header-background-color, --feedback-header-text-color

--feedback-list-background-color, --feedback-list-text-color

--feedback-footer-background-color, --feedback-footer-text-color