Decker Anleitung

Technische Details - Farbpalette

Sebastian Lukas Hauer

Lehrstuhl für Computergraphik, TU Dortmund

🚀 by Decker

Was ist eine Farbpalette?

Zur farblichen Gestaltung der Benutzeroberfläche von Foliensätzen und der Menus verwendet Decker eine Farbpalette aus 16 Farben:

8 Schattierungsfarben

Die ersten acht Farben der Farbpalette bestimmen die Abstufungen der Farben zwischen Hintergrund (dem Papier, auf dem geschrieben wird) und Vordergrund (der Standardtextfarbe).

8 Akzentfarben

Die letzten acht Farben der Farbpalette bestimmen die Akzentfarben der Benutzeroberfläche. Die Farbe von Links, der Hintergrundfarbe von Menuüberschriften und andere Akzente werden so bestimmt.

Verwendung der Farbpalette

Die Farbpalette findet in den Stilregeln der Folien überall Verwendung. Dafür existieren die CSS-Variablen shade0 bis shade7 bzw. accent0 bis accent7 und können in CSS-Regeln für Ihre eigenen Stile verwendet werden.

Für die einfache Verwendung im Fließtext besitzen die Akzentfarben ihre eigenen Klassen .accent0 bis .accent7, mit denen der Text schnell und einfach hervorgehoben werden kann:

Ein Teil dieses [Textes]{.accent1} hat eine Akzentfarbe.

Verwendung der Akzentfarbklassen.

Ein Teil dieses Textes hat eine Akzentfarbe.

Tabellarische Darstellung der verfügbaren Farben

Schattierungen	Akzente
`shade0`	`accent0`
`shade1`	`accent1`
`shade2`	`accent2`
`shade3`	`accent3`
`shade4`	`accent4`
`shade5`	`accent5`
`shade6`	`accent6`
`shade7`	`accent7`

Aus der Farbpalette abgeleitete Farben

Mit accentX-bg, -bbg, -fg und -ffg existieren für die Akzentfarben zusätzliche abgeleitete Farben, die um einen konfigurierbaren Kontrastwert in den Vorder- bzw. Hintergrund verschoben werden.

`-ffg`	`-fg`	original	`-bg`	`-bbg`
shade0	shade0	shade0
		shade7	shade7	shade7
accent0	accent0	accent0	accent0	accent0
accent1	accent1	accent1	accent1	accent1
accent2	accent2	accent2	accent2	accent2
accent3	accent3	accent3	accent3	accent3
accent4	accent4	accent4	accent4	accent4
accent5	accent5	accent5	accent5	accent5
accent6	accent6	accent6	accent6	accent6
accent7	accent7	accent7	accent7	accent7

Anpassung der Farbpalette

Sie können die Farbpalette in der decker.yaml oder im Frontmatter einer Folie mithilfe folgender Konfigurationseinstellung manipulieren:

palette:
  contrast: number # [0.0 - 0.5]
  light:
    - shade0
    - shade1
    - ...
    - shade6
    - shade7
    - accent0
    - accent1
    - ...
    - accent6
    - accent7
  dark:
    - shade0
    - shade1
    - ...
    - shade6
    - shade7
    - accent0
    - accent1
    - ...
    - accent6
    - accent7

Kontrast und Farbschema

Wie Sie auf der vorherigen Folie sehen konnten, besitzt die Farbpalette zwei Unterkategorien und einen Kontraswert: contrast, light und dark.

Der Kontrastwert sagt, wie sehr die Akzentfarben in den Vorder- bzw. Hintergrund verschoben werden, wenn sie mit -bg, -bbg, -fg und --ffg versehen werden. Werte zwischen 0 und 0.5 ergeben hier Sinn, jedoch bedeutet ein Wert von 0.5 eine Verschiebung von 1 im Falle von -bbg bzw. -ffg, was der Vorder- bzw. Hintergrundfarbe selbst entspricht.

Für den dunklen und hellen Farbmodus der Präsentation können unabhängig voneinander Farben in light bzw. dark bestimmt werden.

Die Farben selbst sollten in der Form #RRGGBB in Hexadezimalschreibweise angegeben werden.

In der folgenden Folie ist das exe:tudo-Farbschema zu sehen.

Beispielfarbschema

palette:
  contrast: 0.40
  colors:
    light:
      - "#ffffff"
      - "#eeeeee"
      - "#d6d6d6"
      - "#8e908c"
      - "#969896"
      - "#4d4d4c"
      - "#282a2e"
      - "#1d1f21"
      - "#c82829"
      - "#f5871f"
      - "#eab700"
      - "#84B819"
      - "#3e999f"
      - "#2a9ddf"
      - "#8959a8"
      - "#a3685a"
    dark:
      - "#1d1f21"
      - "#282a2e"
      - "#373b41"
      - "#969896"
      - "#b4b7b4"
      - "#c5c8c6"
      - "#e0e0e0"
      - "#ffffff"
      - "#cc6666"
      - "#de935f"
      - "#f0c674"
      - "#7da72a"
      - "#8abeb7"
      - "#81a2be"
      - "#b294bb"
      - "#a3685a"