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, TailwindCSS, 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 Scheme

Analog's style is managed by TailwindCSS, which is configured by /tailwind.config.ts.

In this file, you can see that Analog provides two color themes - light and dark - through const pluginTwColors.

import colors from 'tailwindcss/colors'
const pluginTwColors = {
  light: {
    background: colors.white,
    foreground: colors.slate['950'],
    ...
  },
  dark: {
    background: colors.slate['950'],
    foreground: colors.slate['50'],
    ...
  },
};

Each theme defines several functional colors such as background, foreground, primary, muted, etc. You can freely modify them, and you can copy some ready-made themes on the website Shadcn/UI Themes.

By default, I use the Tailwind color system, provided by the imported package tailwindcss/colors. You can also change the colors to hexadecimal RGB colors (such as #123456). In the following code example, the background and foreground colors are changed to a light blue and a dark blue, respectively.

import colors from 'tailwindcss/colors'
const pluginTwColors = {
  light: {
    background: colors.blue[100],
    foreground: '#123456',
    ...
  },
  ...
};

Fonts

Analog provides Space Grotesk and Noto Sans SC as the default English and Chinese fonts. The default monospace font is JetBrains 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:

import { Inter } from 'next/font/google'
const fontInter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter', // set a CSS variable name
})

const customFontFamily = {
  sans: [fontInter],
  ...
}

Then you should add the CSS variable --font-inter to the Tailwind configuration file /tailwind.config.ts:

fontFamily: {
  sans: [
    'var(--font-inter)',
    ...defaultTheme.fontFamily.sans,
  ],
  ...
},

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 rehype-highlight to highlight code blocks in MDX-based posts. It is based on lowlight.

Highlighting Theme

The highlighted theme is defined in the /src/styles/highlight.css file. Feel free to modify it.

Rehype-highlight and highlighting.js have the same class names, so you can find a highlighting.js theme on the Internet and then paste the corresponding CSS code into the above file. The default theme is atom-dark-pro. You can find it and many other themes here.

Supported Programming Languages

Lowlight supports a huge number of languages, however by default it only enables a subset. You can find a full list of supported languages and enabled ones on its README.

To enable one of these languages, you can import the corresponding syntax support in /content-collections.ts and add it to the rephye-highlight plugin configuration. Here is an example of enabling the scala language:

import scala from 'highlight.js/lib/languages/scala'
import { common as commonLanguages } from 'lowlight'

const mdx = await compileMdx(content, {
  ...
  rehypePlugins: [
    [rehypeHighlight, { detect: true, languages: { ...commonLanguages, scala } }],
    ...
  ],
})

You can also enable all supported programming languages directly, but it may cause performance loss on the visitor side.

import { all as allLanguages } from 'lowlight'

const mdx = await compileMdx(content, {
  ...
  rehypePlugins: [
    [rehypeHighlight, { detect: true, languages: allLanguages }],
    ...
  ],
})

If you need to add a new programming language syntax, please refer to the related lightnight documentation.