[{"data":1,"prerenderedAt":27},["ShallowReactive",2],{"clay-page:\u002F4.x\u002Fde\u002Ffeatures\u002Fthemes-and-icons":3},{"html":4,"toc":5,"description":23,"hero":24,"list":25,"socialImage":26},"\u003Ch1 id=\"designs--icons\">Designs & Icons\u003C\u002Fh1>\n\u003Ch2 id=\"hell-und-dunkel\">\u003Ca class=\"heading-anchor\" href=\"#hell-und-dunkel\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#hell-und-dunkel\">#\u003C\u002Fa>Hell und dunkel\u003C\u002Fh2>\n\u003Cp>Clay hat ein helles und ein dunkles Design. Es startet mit der Systemeinstellung der Leser und wechselt mit, wenn das System wechselt. Der Sonnen- oder Mond-Button in der Navigationsleiste wechselt von Hand; die Wahl merkt sich der Browser und wendet sie an, bevor die Seite gezeichnet wird. Seiten blitzen also nie im falschen Design auf.\u003C\u002Fp>\n\u003Cp>Codeblöcke werden in zwei Farbschemata hervorgehoben und wechseln zusammen mit der Seite.\u003C\u002Fp>\n\u003Ch2 id=\"eigene-farben-und-schriften\">\u003Ca class=\"heading-anchor\" href=\"#eigene-farben-und-schriften\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#eigene-farben-und-schriften\">#\u003C\u002Fa>Eigene Farben und Schriften \u003Cspan class=\"badge badge-sm badge-soft badge-success clay-badge\">Neu in Clay 4\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>theme\u003C\u002Fcode> in der \u003Ccode>clay.yaml\u003C\u002Fcode> gibt der Seite dein eigenes Aussehen. Alles, was du weglässt, bleibt wie bei Clay:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">theme\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">  primary\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"#2563eb\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#006400;--shiki-dark:#6A9955\">          # Links, Buttons, die Markierungen in der Navigation\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">  radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"0.25rem\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#006400;--shiki-dark:#6A9955\">           # Ecken von Kästen; Felder bekommen die Hälfte\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"Lora, serif\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#006400;--shiki-dark:#6A9955\">         # der Text\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">  codeFont\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"JetBrains Mono, monospace\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">  dark\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">    primary\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"#60a5fa\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#006400;--shiki-dark:#6A9955\">        # hell und dunkel können sich unterscheiden\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">    background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"#0b1120\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">    text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"#e2e8f0\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Einstellung\u003C\u002Fth>\n\u003Cth>Was sie ändert\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>primary\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Links, Buttons, der aktive Eintrag in der Seitenleiste und im Inhaltsverzeichnis\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>background\u003C\u002Fcode>, \u003Ccode>text\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Die Seite und ihr Text; Kästen und Rahmen leiten sich vom Hintergrund ab\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>radius\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Die Ecken von Kästen, Codeblöcken und Buttons, etwa \u003Ccode>0\u003C\u002Fcode> für eckig\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>font\u003C\u002Fcode>, \u003Ccode>codeFont\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Die Schriften des Texts und des Codes\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>light\u003C\u002Fcode>, \u003Ccode>dark\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>primary\u003C\u002Fcode>, \u003Ccode>background\u003C\u002Fcode> und \u003Ccode>text\u003C\u002Fcode> nur für einen Modus\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>Farben schreibst du als \u003Ccode>#rrggbb\u003C\u002Fcode> oder \u003Ccode>#rgb\u003C\u002Fcode>. Text auf der Hauptfarbe wird schwarz oder weiß, je nachdem, was besser lesbar ist. \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Ffeatures\u002Fseo#vorschaubilder\" data-route=\"\u002F4.x\u002Fde\u002Ffeatures\u002Fseo#vorschaubilder\">Vorschaubilder\u003C\u002Fa> nehmen die Farben des dunklen Modus und die Schrift.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Schriften von \u003Ca href=\"https:\u002F\u002Ffonts.google.com\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Google Fonts\u003C\u002Fa>\u003C\u002Fstrong> werden beim Bauen heruntergeladen und mit der Seite veröffentlicht: Leser bekommen sie, ohne sie installiert zu haben, und ihre Browser kontaktieren Google nie. Andere Schriften, etwa Georgia oder Helvetica, werden genutzt, wenn der Leser sie hat, sonst die nächste Schrift der Liste.\u003C\u002Fp>\n\u003Cdiv class=\"markdown-alert markdown-alert-tip\">\n\u003Cp class=\"markdown-alert-title text-primary\">\u003Ci class=\"fa-solid fa-lightbulb mr-2\">\u003C\u002Fi>Tipp\u003C\u002Fp>\n\u003Cp>Halte genug Kontrast zwischen Text und Hintergrund, mindestens 4,5 zu 1, damit alle deine Dokumentation lesen können. Prüf deine Farben mit einem \u003Ca href=\"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Kontrast-Prüfer\u003C\u002Fa>.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"icons\">\u003Ca class=\"heading-anchor\" href=\"#icons\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#icons\">#\u003C\u002Fa>Icons\u003C\u002Fh2>\n\u003Cp>Clay nutzt \u003Ca href=\"https:\u002F\u002Ffontawesome.com\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Font Awesome\u003C\u002Fa> für Icons: bei Seiten, Ordnern, der Startseite und Links in der Navigationsleiste. Schreib die Klassen des Icons, wie sie auf seiner Seite bei fontawesome.com stehen:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">fa-solid fa-rocket\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Stil\u003C\u002Fth>\n\u003Cth>Beispiel\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Solid\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>fa-solid fa-rocket\u003C\u002Fcode> \u003Ci class=\"fa-solid fa-rocket\">\u003C\u002Fi>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Regular\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>fa-regular fa-file\u003C\u002Fcode> \u003Ci class=\"fa-regular fa-file\">\u003C\u002Fi>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Brands\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>fa-brands fa-github\u003C\u002Fcode> \u003Ci class=\"fa-brands fa-github\">\u003C\u002Fi>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>Icons funktionieren auch in Markdown, als HTML: \u003Ccode><i class=\"fa-solid fa-star\"><\u002Fi>\u003C\u002Fcode> ergibt \u003Ci class=\"fa-solid fa-star\">\u003C\u002Fi>.\u003C\u002Fp>\n\u003Ch3 id=\"kostenlose-icons\">\u003Ca class=\"heading-anchor\" href=\"#kostenlose-icons\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#kostenlose-icons\">#\u003C\u002Fa>Kostenlose Icons\u003C\u002Fh3>\n\u003Cp>Ohne weitere Einrichtung lädt Clay die kostenlosen Icons von Font Awesome 6. Sie umfassen die Stile Solid, Regular und Brands, genug für die meisten Dokumentationen.\u003C\u002Fp>\n\u003Ch3 id=\"font-awesome-kits\">\u003Ca class=\"heading-anchor\" href=\"#font-awesome-kits\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#font-awesome-kits\">#\u003C\u002Fa>Font-Awesome-Kits\u003C\u002Fh3>\n\u003Cp>Mit einem Font-Awesome-Konto kannst du ein \u003Ca href=\"https:\u002F\u002Fdocs.fontawesome.com\u002Fweb\u002Fsetup\u002Fuse-kit\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Kit\u003C\u002Fa> anlegen: eine Sammlung von Icons, die Pro-Icons, neuere Versionen oder eigene Uploads enthalten kann. Mit einem Kit lädt Clay das Kit statt der kostenlosen Icons.\u003C\u002Fp>\n\u003Cdiv class=\"clay-steps\">\u003Col>\n\u003Cli>\u003Cp>\u003Cstrong>Leg ein Kit an\u003C\u002Fstrong> auf fontawesome.com und stell seine Technologie auf \u003Cstrong>Web Fonts\u003C\u002Fstrong>. Auf SVG gestellte Kits ersetzen jedes Icon in der Seite durch eine Zeichnung, was sich mit der Art stört, wie Clay Seiten beim Navigieren aktualisiert.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Erlaube die Domain deiner Seite\u003C\u002Fstrong> in den Einstellungen des Kits.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Trag die ID des Kits\u003C\u002Fstrong> in die \u003Ccode>clay.yaml\u003C\u002Fcode> ein. Die ID ist der Code in der Einbettungs-URL des Kits, \u003Ccode>https:\u002F\u002Fkit.fontawesome.com\u002Fabc123def4.js\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cdiv class=\"code-block has-title\">\u003Cdiv class=\"code-title\">\u003Ci class=\"fa-regular fa-file-lines\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan>clay.yaml\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">fontawesomeKit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"abc123def4\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"markdown-alert markdown-alert-tip\">\n\u003Cp class=\"markdown-alert-title text-primary\">\u003Ci class=\"fa-solid fa-lightbulb mr-2\">\u003C\u002Fi>Tipp\u003C\u002Fp>\n\u003Cp>Kits hängen an deinem Konto. Halte die ID aus einem öffentlichen Repository heraus, indem du sie in der CI mit \u003Ccode>CLAY_FONTAWESOME_KIT\u003C\u002Fcode> setzt, wie diese Seite es tut; siehe \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fde\u002Fconfiguration\u002Fenvironment-variables\" data-route=\"\u002F4.x\u002Fde\u002Fconfiguration\u002Fenvironment-variables\">Umgebungsvariablen\u003C\u002Fa>. Ein Wert, der keine Kit-ID ist, fällt auf die kostenlosen Icons zurück.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[6,10,13,16,20],{"id":7,"text":8,"level":9},"hell-und-dunkel","Hell und dunkel",2,{"id":11,"text":12,"level":9},"eigene-farben-und-schriften","Eigene Farben und Schriften Neu in Clay 4",{"id":14,"text":15,"level":9},"icons","Icons",{"id":17,"text":18,"level":19},"kostenlose-icons","Kostenlose Icons",3,{"id":21,"text":22,"level":19},"font-awesome-kits","Font-Awesome-Kits","Helles und dunkles Design, eigene Farben und Schriften, und wie du Font-Awesome-Icons und -Kits in Clay nutzt.",null,false,"\u002F_clay\u002Fsocial\u002F4.x\u002Fde\u002Ffeatures\u002Fthemes-and-icons.png",1792666372728]