[{"data":1,"prerenderedAt":27},["ShallowReactive",2],{"clay-page:\u002Ffeatures\u002Fthemes-and-icons":3},{"html":4,"toc":5,"description":23,"hero":24,"list":25,"socialImage":26},"\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=\"your-own-colors-and-fonts\">\u003Ca class=\"heading-anchor\" href=\"#your-own-colors-and-fonts\" aria-label=\"Link to this section\" data-route=\"#your-own-colors-and-fonts\">#\u003C\u002Fa>Your own colors and fonts\u003C\u002Fh2>\n\u003Cp>\u003Ccode>theme\u003C\u002Fcode> in \u003Ccode>clay.yaml\u003C\u002Fcode> gives the site your own look. Everything you leave out keeps Clay’s:\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, the marks in the 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\">           # corners of boxes; fields get half of it\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\">         # the 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\">        # light and dark can differ\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=\"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>Setting\u003C\u002Fth>\n\u003Cth>What it changes\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>primary\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Links, buttons, the active entry in the sidebar and the contents\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>background\u003C\u002Fcode>, \u003Ccode>text\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>The page and its text; boxes and borders are derived from the background\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>radius\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>The corners of boxes, code blocks and buttons, e.g. \u003Ccode>0\u003C\u002Fcode> for square\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>font\u003C\u002Fcode>, \u003Ccode>codeFont\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>The fonts of the text and of code\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>windowDots\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>false\u003C\u002Fcode> takes the window’s three buttons off \u003Ca href=\"\u002Fclay-example-repo\u002Fwriting\u002Fcode-blocks#terminal\" data-route=\"\u002Fwriting\u002Fcode-blocks#terminal\">shell code\u003C\u002Fa>, also in \u003Ca href=\"\u002Fclay-example-repo\u002Fwriting\u002Fcomponents\u002Ftabs#code-groups\" data-route=\"\u002Fwriting\u002Fcomponents\u002Ftabs#code-groups\">code groups\u003C\u002Fa>\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> and \u003Ccode>text\u003C\u002Fcode> for one mode only\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>Colors are written as \u003Ccode>#rrggbb\u003C\u002Fcode> or \u003Ccode>#rgb\u003C\u002Fcode>. Text on the primary color turns black or white, whichever reads better. \u003Ca href=\"\u002Fclay-example-repo\u002Ffeatures\u002Fseo#social-images\" data-route=\"\u002Ffeatures\u002Fseo#social-images\">Social images\u003C\u002Fa> take the colors of the dark mode and the font.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Fonts from \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> are downloaded when the site is built and published with it: readers get them without having them installed, and their browsers never contact Google. Other fonts, like Georgia or Helvetica, are used when the reader has them, otherwise the next font in the list.\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>Keep enough contrast between text and background, at least 4.5 to 1, so everyone can read your docs. Check your colors with a \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>contrast checker\u003C\u002Fa>.\u003C\u002Fp>\n\u003C\u002Fdiv>\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. With a kit, Clay loads the kit instead of the free icons.\u003C\u002Fp>\n\u003Cdiv class=\"clay-steps\">\u003Col>\n\u003Cli>\u003Cp>\u003Cstrong>Create a kit\u003C\u002Fstrong> on fontawesome.com and set its technology to \u003Cstrong>Web Fonts\u003C\u002Fstrong>. 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\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Allow your site’s domain\u003C\u002Fstrong> in the kit’s settings.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Set the kit’s ID\u003C\u002Fstrong> in \u003Ccode>clay.yaml\u003C\u002Fcode>. The ID is the code in the kit’s embed URL, \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=\"Copy code\" aria-label=\"Copy code\">\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>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\u002Fconfiguration\u002Fenvironment-variables\" data-route=\"\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,16,20],{"id":7,"text":8,"level":9},"light-and-dark","Light and dark",2,{"id":11,"text":12,"level":9},"your-own-colors-and-fonts","Your own colors and fonts",{"id":14,"text":15,"level":9},"icons","Icons",{"id":17,"text":18,"level":19},"free-icons","Free icons",3,{"id":21,"text":22,"level":19},"font-awesome-kits","Font Awesome kits","Light and dark mode, your own colors and fonts, and how to use Font Awesome icons and kits in Clay.",null,false,"\u002F_clay\u002Fsocial\u002Ffeatures\u002Fthemes-and-icons.png",1792666370216]