Analog User Guide - Restyling It

This article will introduce how to make some simple customizations to Analog, such as its color scheme, fonts, etc.

This article will not cover the complex web front-end technology stack. Analog is based on Next.js, Chakra UI, and React, and is mainly written in TypeScript. If you need to customize it in depth, you may need to master these open source tools and some necessary web front-end skills. If you have a need for this, you can read Analog's Technology Stack first.

Favicons and Site Logo

Analog includes a default site logo and favicons. You can replace them with your own logo and favicons. Here are their locations:

• /src/app/favicon.ico
• /src/app/icon.svg
• /src/app/iconXXX.png
• /src/app/apple-icon.png
• /public/favicons/web-app-manifest-XXXxXXX.png, referenced by /src/app/manifest.ts.

Among them, logo.svg is also used as the logo on the site header.

You can visit Favicon Generator to generate favicons of different sizes.

Color Schemes

Analog's style is managed by Chakra UI, which is configured by /src/app/theme.ts.

In this file, you can add new color tokens (theme.tokens.colors) or modify existing ones. Please refer to the Chakra UI Colors documentation for more built-in colors.

In Analog, a brand color token is defined to teal and used as the primary color of the site. You can modify it to change the overall color tone of the site.

Fonts

Analog provides Space Grotesk and Noto Sans SC as the default English and Chinese fonts. The default monospace font is Geist Mono. Their declarations are in the file /src/lib/fonts.ts.

To change the font, you can modify the exported customFontFamily variable. For example, to change the English font to Inter, you can modify the following code:

Then you should add the font name to the Chakra UI configuration file /src/app/theme.ts:

For some advanced font settings (such as using local fonts instead of Google fonts), you can refer to the Next.js Font Optimization.

Code Syntax Highlighting

Analog uses Shiki to highlight code blocks in MDX-based posts. The relevant configuration is in the /src/components/mdx/shiki-adapter.tsx file.

By default, Shiki with fully bundled languages is used, which may increase the size of the client-side JavaScript bundle. If you want to reduce the bundle size, you can view the Fine Grained Bundle.

Shiki also supports many themes. You can find the complete list of its built-in themes on its official website.