Change The Site Title and Logo In The Keystatic Admin UI

[00:00] Let's make our key static admin UI feed a little bit more custom and bespoke by changing the site title and the logo. In the UI options of the key static config, we will add a new brand key and the name to key static mini course. And here it is. And a really nice little detail here is that if [00:19] your title is too long the site title will automatically be truncated depending on what space is available to display it. So let's go back to key static mini course. And next, we're going to change this key static logo with the mark option. And so you can specify the path to an image, but [00:39] you can also use an inline SVG, which is what I will do here. In my clipboard, I have a filmstrip icon from Heroi Cons. I will just remove the Tailwind class names since we're not using Tailwind here. I know. Simon not using Tailwind. What? And it's obviously way too big and this is what the Tailwind classes were doing. Let's [00:59] use a height and width property instead. And now look at this, we have a custom logo and custom title for our site. And because our SVG uses current color for the stroke, the logo or icon will automatically adapt to the dark mode. Check this out. And by the way, I just realized I have not shown you dark mode yet. This is a [01:19] thing that Key Static lets you choose based on the system, OS settings, or have dark or light. And it's a pretty nice touch that our custom SVG logo is inheriting the correct stroke color based on light or dark modes.