blob: 4baebf8b40bafd216f1af90417b0cb9b40e7759c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
---
title: "Appearance"
date: "2024-10-12"
summary: "Appearance parameters"
description: "Appearance parameters"
toc: false
readTime: false
autonumber: true
math: false
showTags: 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.
```toml
[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:
```toml
[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.
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.
```toml
[params]
hideHeader = true
```
I strongly recommend enabling [breadcrumbs](#72-breadcrumbs) if you do so.
## Note on Syntax Highlighting
Some color schemes seems to be broken using this theme, for instance, the default one, Monokai, is not well displayed, as pointed out in [this issue](https://github.com/tomfran/typo/issues/17).
I suggest to try [color schemes](https://xyproto.github.io/splash/docs/all.html) and see what can work for you.
```toml
[markup]
[markup.highlight]
style = 'algol'
```
## 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.
```toml
[params]
showFooter = true
footerContent = "Your **custom** md `footer`"
```
|
