Inspired by the catppuccin themes, which is a community-driven pastel theme that aims to be the middle ground between low and high contrast themes. I wanted to bring catppuccin to the homer dashboard.
I have included the standard docker compose file under the new docker directory. You will need to map this to the assets folder in the volume. When running the docker image like so:
volumes:
- <your-path>/docker:/www/assetsWhen running this will produce the needed files including the config.yaml this is where you can add the stylesheet:.
Pick your flavour
🌻 Latte
To use the latte theme you will need to change the default theme to light like
so:
defaults:
colorTheme: light # One of 'auto', 'light', or 'dark'
| Labels | Hex | RGB | HSL | |
|---|---|---|---|---|
 |
Pink | #ea76cb |
rgb(234, 118, 203) |
hsl(316, 73%, 69%) |
 |
Mauve | #8839ef |
rgb(136, 57, 239) |
hsl(266, 85%, 58%) |
 |
Red | #d20f39 |
rgb(210, 15, 57) |
hsl(347, 87%, 44%) |
 |
Peach | #fe640b |
rgb(254, 100, 11) |
hsl(22, 99%, 52%) |
 |
Yellow | #df8e1d |
rgb(223, 142, 29) |
hsl(35, 77%, 49%) |
 |
Green | #40a02b |
rgb(64, 160, 43) |
hsl(109, 58%, 40%) |
 |
Teal | #179299 |
rgb(23, 146, 153) |
hsl(183, 74%, 35%) |
 |
Text | #4c4f69 |
rgb(76, 79, 105) |
hsl(234, 16%, 35%) |
 |
Surface2 | #acb0be |
rgb(172, 176, 190) |
hsl(227, 12%, 71%) |
 |
Surface0 | #ccd0da |
rgb(204, 208, 218) |
hsl(223, 16%, 83%) |
 |
Base | #eff1f5 |
rgb(239, 241, 245) |
hsl(220, 23%, 95%) |
🪴 Frappé
| Labels | Hex | RGB | HSL | |
|---|---|---|---|---|
 |
Pink | #f4b8e4 |
rgb(244, 184, 228) |
hsl(316, 73%, 84%) |
 |
Mauve | #ca9ee6 |
rgb(202, 158, 230) |
hsl(277, 59%, 76%) |
 |
Red | #e78284 |
rgb(231, 130, 132) |
hsl(359, 68%, 71%) |
 |
Peach | #ef9f76 |
rgb(239, 159, 118) |
hsl(20, 79%, 70%) |
 |
Yellow | #e5c890 |
rgb(229, 200, 144) |
hsl(40, 62%, 73%) |
 |
Green | #a6d189 |
rgb(166, 209, 137) |
hsl(96, 44%, 68%) |
 |
Teal | #81c8be |
rgb(129, 200, 190) |
hsl(172, 39%, 65%) |
 |
Text | #c6d0f5 |
rgb(198, 208, 245) |
hsl(227, 70%, 87%) |
 |
Surface2 | #626880 |
rgb(98, 104, 128) |
hsl(228, 13%, 44%) |
 |
Surface0 | #414559 |
rgb(65, 69, 89) |
hsl(230, 16%, 30%) |
 |
Base | #303446 |
rgb(48, 52, 70) |
hsl(229, 19%, 23%) |
🌺 Macchiato
| Labels | Hex | RGB | HSL | |
|---|---|---|---|---|
 |
Pink | #f5bde6 |
rgb(245, 189, 230) |
hsl(316, 74%, 85%) |
 |
Mauve | #c6a0f6 |
rgb(198, 160, 246) |
hsl(267, 83%, 80%) |
 |
Red | #ed8796 |
rgb(237, 135, 150) |
hsl(351, 74%, 73%) |
 |
Peach | #f5a97f |
rgb(245, 169, 127) |
hsl(21, 86%, 73%) |
 |
Yellow | #eed49f |
rgb(238, 212, 159) |
hsl(40, 70%, 78%) |
 |
Green | #a6da95 |
rgb(166, 218, 149) |
hsl(105, 48%, 72%) |
 |
Teal | #8bd5ca |
rgb(139, 213, 202) |
hsl(171, 47%, 69%) |
 |
Text | #cad3f5 |
rgb(202, 211, 245) |
hsl(227, 68%, 88%) |
 |
Surface2 | #5b6078 |
rgb(91, 96, 120) |
hsl(230, 14%, 41%) |
 |
Surface0 | #363a4f |
rgb(54, 58, 79) |
hsl(230, 19%, 26%) |
 |
Base | #24273a |
rgb(36, 39, 58) |
hsl(232, 23%, 18%) |
🌿 Mocha
| Labels | Hex | RGB | HSL | |
|---|---|---|---|---|
 |
Pink | #f5c2e7 |
rgb(245, 194, 231) |
hsl(316, 72%, 86%) |
 |
Mauve | #cba6f7 |
rgb(203, 166, 247) |
hsl(267, 84%, 81%) |
 |
Red | #f38ba8 |
rgb(243, 139, 168) |
hsl(343, 81%, 75%) |
 |
Peach | #fab387 |
rgb(250, 179, 135) |
hsl(23, 92%, 75%) |
 |
Yellow | #f9e2af |
rgb(249, 226, 175) |
hsl(41, 86%, 83%) |
 |
Green | #a6e3a1 |
rgb(166, 227, 161) |
hsl(115, 54%, 76%) |
 |
Teal | #94e2d5 |
rgb(148, 226, 213) |
hsl(170, 57%, 73%) |
 |
Text | #cdd6f4 |
rgb(205, 214, 244) |
hsl(226, 64%, 88%) |
 |
Surface2 | #585b70 |
rgb(88, 91, 112) |
hsl(233, 12%, 39%) |
 |
Surface0 | #313244 |
rgb(49, 50, 68) |
hsl(237, 16%, 23%) |
 |
Base | #1e1e2e |
rgb(30, 30, 46) |
hsl(240, 21%, 15%) |
- Copy the file of your chosen flavour from
flavoursover towww/assets/... - Put these lines into
www/assets/config.ymland save the file:
stylesheet:
- 'assets/catppuccin-macchiato.css'For the header logo you can choose either from dark_circle.png for use in the
frappe, macchiato and mocha themes. Or if you prefer a light them you can pick
the light_circle.png for the latte theme. All that you need to do is edit this
line in your config.yml
logo: '<location of img>' # example: assets/logo/dark_circle.pngI have also included a .zip file of required Favicons for light or dark
themes. These are located in /favicons. Unzip this file and
place the extracted contents into www/assets/icons
Copyright © 2021-present Catppuccin Org
