Catppuccin Theme for Homer

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.

Activating theme

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'

Colors used

	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é

Colors used

	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

Colors used

	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

Colors used

	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 flavours over to www/assets/...
• Copy romb.png to www/assets/images/romb.png.
• Put these lines into www/assets/config.yml and 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.png

Favicons

I 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