Theming

Updated on Apr 21, 2023 4 min read John Doe Documentation Features

Color Scheme

If you want to customize the theme’s color scheme to give it your individual touch, you are only a few lines of CSS away. Generally, you need to override the default settings. The easiest way to do this is to create a file named static/custom.css right at the root of your site.

All the necessary CSS customization properties are listed below. If you want to customize elements that don’t use these properties, you can always look up the class name and override it directly. For inspiration, you can also take a look at https://www.color-hex.com. In this simple example, we’ll use the Beach color palette.

Custom CSS:

                                
                                    
                                        
                                              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
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

                                        
                                        
                                            /* Global customization */

:root {
  --code-max-height: 60rem;
}

/* Light mode theming */
:root,
:root[color-theme="light"] {
  --header-background: #4ec58a;
  --header-font-color: #ffffff;

  --body-background: #ffffff;
  --body-font-color: #343a40;

  --mark-color: #ffab00;

  --button-background: #62cb97;
  --button-border-color: #4ec58a;

  --link-color: #518169;
  --link-color-visited: #c54e8a;

  --code-background: #f5f6f8;
  --code-accent-color: #e3e7eb;
  --code-accent-color-lite: #eff1f3;
  --code-font-color: #5f5f5f;

  --code-copy-background: #f8f9fa;
  --code-copy-font-color: #6b7784;
  --code-copy-border-color: #adb4bc;
  --code-copy-success-color: #00c853;

  --accent-color-dark: #868e96;
  --accent-color: #e9ecef;
  --accent-color-lite: #f8f9fa;

  --control-icons: #b2bac1;

  --footer-background: #112b3c;
  --footer-font-color: #ffffff;
  --footer-link-color: #ffcc5c;
  --footer-link-color-visited: #ffcc5c;
}
@media (prefers-color-scheme: light) {
  :root {
    --header-background: #4ec58a;
    --header-font-color: #ffffff;

    --body-background: #ffffff;
    --body-font-color: #343a40;

    --mark-color: #ffab00;

    --button-background: #62cb97;
    --button-border-color: #4ec58a;

    --link-color: #518169;
    --link-color-visited: #c54e8a;

    --code-background: #f5f6f8;
    --code-accent-color: #e3e7eb;
    --code-accent-color-lite: #eff1f3;
    --code-font-color: #5f5f5f;

    --code-copy-background: #f8f9fa;
    --code-copy-font-color: #6b7784;
    --code-copy-border-color: #adb4bc;
    --code-copy-success-color: #00c853;

    --accent-color-dark: #868e96;
    --accent-color: #e9ecef;
    --accent-color-lite: #f8f9fa;

    --control-icons: #b2bac1;

    --footer-background: #112b3c;
    --footer-font-color: #ffffff;
    --footer-link-color: #ffcc5c;
    --footer-link-color-visited: #ffcc5c;
  }
}

/* Dark mode theming */
:root[color-theme="dark"] {
  --header-background: #4ec58a;
  --header-font-color: #ffffff;

  --body-background: #343a40;
  --body-font-color: #ced3d8;

  --mark-color: #ffab00;

  --button-background: #62cb97;
  --button-border-color: #4ec58a;

  --link-color: #7ac29e;
  --link-color-visited: #c27a9e;

  --code-background: #f5f6f8;
  --code-accent-color: #262b2f;
  --code-accent-color-lite: #2b3035;
  --code-font-color: #b9b9b9;

  --code-copy-background: #343a40;
  --code-copy-font-color: #6b7784;
  --code-copy-border-color: #6b7784;
  --code-copy-success-color: #37905c;

  --accent-color-dark: #222629;
  --accent-color: #2b3035;
  --accent-color-lite: #2f353a;

  --control-icons: #b2bac1;

  --footer-background: #112b3c;
  --footer-font-color: #ffffff;
  --footer-link-color: #ffcc5c;
  --footer-link-color-visited: #ffcc5c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --header-background: #4ec58a;
    --header-font-color: #ffffff;

    --body-background: #343a40;
    --body-font-color: #ced3d8;

    --mark-color: #ffab00;

    --button-background: #62cb97;
    --button-border-color: #4ec58a;

    --link-color: #7ac29e;
    --link-color-visited: #c27a9e;

    --code-background: #f5f6f8;
    --code-accent-color: #262b2f;
    --code-accent-color-lite: #2b3035;
    --code-font-color: #b9b9b9;

    --code-copy-background: #343a40;
    --code-copy-font-color: #6b7784;
    --code-copy-border-color: #6b7784;
    --code-copy-success-color: #37905c;

    --accent-color-dark: #222629;
    --accent-color: #2b3035;
    --accent-color-lite: #2f353a;

    --control-icons: #b2bac1;

    --footer-background: #112b3c;
    --footer-font-color: #ffffff;
    --footer-link-color: #ffcc5c;
    --footer-link-color-visited: #ffcc5c;
  }
}

                                        
                                    

                            

Favicons

The Theme is shipped with a set of default Favicons in various formats generated by the Favicon Generator. All files can be found in the static/favicon folder of the release tarball. To make the replacement of the default Favicons as simple as possible, the theme loads only a very small subset of the Favicon formats.

<link rel="icon" type="image/svg+xml" href="{{ "favicon/favicon.svg" | relURL }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon/favicon-32x32.png" | relURL }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon/favicon-16x16.png" | relURL }}">

Simple replacement

The minimal steps to load a custom Favicon is to overwrite the three default Favicon files. Therefor place these files into your projects root folder:

static/favicon/favicon.svg
static/favicon/favicon-32x32.png
static/favicon/favicon-16x16.png

Full replacement

If you want to add more Favicon formats you have to overwrite the default partial that is used to load the files. In the next step you have to place the required files in the static folder of your project as well.

Example:

<!-- layouts/partials/head/favicons.html -->
<link rel="icon" type="image/svg+xml" href="{{ "favicon/favicon.svg" | relURL }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ "favicon/apple-touch-icon.png" | relURL }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon/favicon-32x32.png" | relURL }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon/favicon-16x16.png" | relURL }}">
<link rel="manifest" href="{{ "favicon/site.webmanifest" | relURL }}">
<link rel="mask-icon" href="{{ "favicon/safari-pinned-tab.svg" | relURL }}" color="#efefef">
<meta name="msapplication-TileColor" content="#efefef">
<meta name="theme-color" content="#efefef">

Happy customizing!