Theming

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/color-palettes/. In this simple example, we’ll use the Beach color palette.

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
/* Light mode theming */
:root,
:root[color-mode="light"] {
  --header-background: #4ec58a;
  --header-font-color: #ffffff;

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

  --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;

  --accent-color: #e9ecef;
  --accent-color-lite: #f8f9fa;

  --control-icons: #b2bac1;

  --footer-background: #2f333e;
  --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;

    --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;

    --accent-color: #e9ecef;
    --accent-color-lite: #f8f9fa;

    --control-icons: #b2bac1;

    --footer-background: #2f333e;
    --footer-font-color: #ffffff;
    --footer-link-color: #ffcc5c;
    --footer-link-color-visited: #ffcc5c;
  }
}

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

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

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

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

  --code-background: #2f353a;
  --code-accent-color: #262b2f;
  --code-accent-color-lite: #2b3035;

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

  --control-icons: #b2bac1;

  --footer-background: #2f333e;
  --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;

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

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

    --code-background: #2f353a;
    --code-accent-color: #262b2f;
    --code-accent-color-lite: #2b3035;

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

    --control-icons: #b2bac1;

    --footer-background: #2f333e;
    --footer-font-color: #ffffff;
    --footer-link-color: #ffcc5c;
    --footer-link-color-visited: #ffcc5c;
  }
}

Happy customizing!