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