[{"data":1,"prerenderedAt":24},["ShallowReactive",2],{"clay-page:\u002F3.x\u002Ffeatures\u002Fthemes-and-icons":3},{"html":4,"toc":5,"description":20,"hero":21,"list":22,"socialImage":23},"\u003Ch1 id=\"themes--icons\">Themes & Icons\u003C\u002Fh1>\n\u003Ch2 id=\"light-and-dark\">\u003Ca class=\"heading-anchor\" href=\"#light-and-dark\" aria-label=\"Link to this section\" data-route=\"#light-and-dark\">#\u003C\u002Fa>Light and dark\u003C\u002Fh2>\n\u003Cp>Clay has a light and a dark theme. It starts with the reader’s system setting and switches along when the system does. The sun or moon button in the navbar switches by hand; the choice is remembered in the browser and applied before the page is drawn, so pages never flash in the wrong theme.\u003C\u002Fp>\n\u003Cp>Code blocks are highlighted in two color schemes and switch together with the site.\u003C\u002Fp>\n\u003Ch2 id=\"icons\">\u003Ca class=\"heading-anchor\" href=\"#icons\" aria-label=\"Link to this section\" data-route=\"#icons\">#\u003C\u002Fa>Icons\u003C\u002Fh2>\n\u003Cp>Clay uses \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> for icons: pages, folders, the start page and navbar links. Write the icon’s classes, as shown on the icon’s page on fontawesome.com:\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=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Style\u003C\u002Fth>\n\u003Cth>Example\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 work in Markdown too, as HTML: \u003Ccode><i class=\"fa-solid fa-star\"><\u002Fi>\u003C\u002Fcode> gives \u003Ci class=\"fa-solid fa-star\">\u003C\u002Fi>.\u003C\u002Fp>\n\u003Ch3 id=\"free-icons\">\u003Ca class=\"heading-anchor\" href=\"#free-icons\" aria-label=\"Link to this section\" data-route=\"#free-icons\">#\u003C\u002Fa>Free icons\u003C\u002Fh3>\n\u003Cp>Without further setup, Clay loads the free icons of Font Awesome 6. They cover the solid, regular and brands styles, enough for most docs.\u003C\u002Fp>\n\u003Ch3 id=\"font-awesome-kits\">\u003Ca class=\"heading-anchor\" href=\"#font-awesome-kits\" aria-label=\"Link to this section\" data-route=\"#font-awesome-kits\">#\u003C\u002Fa>Font Awesome kits\u003C\u002Fh3>\n\u003Cp>With a Font Awesome account, you can create a \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>: a set of icons that can include Pro icons, newer versions or your own uploads. Set the kit’s ID in \u003Ccode>clay.yaml\u003C\u002Fcode>:\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\">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=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cp>The ID is the code in the kit’s embed URL, \u003Ccode>https:\u002F\u002Fkit.fontawesome.com\u002Fabc123def4.js\u003C\u002Fcode>. With a kit, Clay loads the kit instead of the free icons.\u003C\u002Fp>\n\u003Cp>Set the kit’s technology to \u003Cstrong>Web Fonts\u003C\u002Fstrong> in its settings on fontawesome.com. Kits set to SVG replace each icon in the page with a drawing, which interferes with how Clay updates pages while readers navigate.\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>Tip\u003C\u002Fp>\n\u003Cp>Kits are tied to your account. Keep the ID out of a public repository by setting it in CI with \u003Ccode>CLAY_FONTAWESOME_KIT\u003C\u002Fcode>, as this site does; see \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fconfiguration\u002Fenvironment-variables\" data-route=\"\u002F3.x\u002Fconfiguration\u002Fenvironment-variables\">environment variables\u003C\u002Fa>. A value that is not a kit ID falls back to the free icons.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[6,10,13,17],{"id":7,"text":8,"level":9},"light-and-dark","Light and dark",2,{"id":11,"text":12,"level":9},"icons","Icons",{"id":14,"text":15,"level":16},"free-icons","Free icons",3,{"id":18,"text":19,"level":16},"font-awesome-kits","Font Awesome kits","Light and dark mode, and how to use Font Awesome icons and kits in Clay.",null,false,"\u002F_clay\u002Fsocial\u002F3.x\u002Ffeatures\u002Fthemes-and-icons.png",1792666368991]