hugo-typo/wiki/features/appearance.md

title	date	summary	description	toc	readTime	autonumber	math	showTags
Appearance	2024-10-12	Appearance parameters	Appearance parameters	false	false	true	false	false

Typo has a built-in dark and light mode, you can decide the default one and control images on both modes.

Choosing a Theme

By default the mode in use is auto, if you want, you can hard-code a color scheme.

[params]
theme = 'auto | light | dark'

Choosing a Color Palette

Typo has the possibility to specify the color palette to use in the theme. The default one is black and white, but they can easily be added.

The color palettes are stored under assets/css/colors/* and the one in use can be specified with the following parameter:

[params]
colorPalette = 'default'

Note that omitting the parameter implies using the default palette.

This is the complete list of palettes available:

• default;
• catpuccin;
• gruvebox;
• eink;
• base16-default;
• base16-eighties;
• base16-ocean;
• base16-mocha;
• base16-cupcake.

More are to come.

Adding a Custom Color Palette

You can add a custom color palette by creating a new file under assets/css/colors/* named after your wanted palette name. Use another one as base and define the required parameters.

You can then use your new palette, by using its file name in the colorPalette site param.

Hide Header Mode

You can choose to hide the header on every page apart from the homepage with this parameter.

[params]
hideHeader = true

I strongly recommend enabling breadcrumbs if you do so.

Note on Syntax Highlighting

The theme supports syntax highlighting, and you can specify the theme as follows:

[markup]
[markup.highlight]
style = 'algol'

algol is the recommended theme, and for it to work, the background-color of the code elements is enforced. This has the side effect of breaking other color schemes, e.g. Monokai.

You can make them work by removing !important from the background color of the code pre elements.

I suggest trying color schemes and see what can work for you.

Footer Customization

One can decide to hide the footer completely or to change it's content by specifying the following parameters. Note that if you don't include the following parameters (or leave footerContent empty) the default footer is shown.

[params]
showFooter = true
footerContent = "Your **custom** md `footer`"