Skip to content

mrpbennett/catppuccin-homer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

catppuccin

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'

catppuccin

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é

catppuccin

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

catppuccin

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

catppuccin

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