├── .editorconfig ├── LICENSE ├── README.md └── assets ├── .gitkeep ├── background.jpg ├── frappe.png ├── latte.png ├── macchiato.png ├── mocha.png ├── preview.png └── themes ├── bento.css ├── catppuccin_colours.css ├── latte-frappe.css ├── latte-macchiato.css └── latte-mocha.css /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # EditorConfig is awesome: https://EditorConfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | charset = utf-8 9 | indent_size = 2 10 | indent_style = space 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | 15 | # go 16 | [*.go] 17 | indent_style = tab 18 | indent_size = 4 19 | 20 | # python 21 | [*.{ini,py,py.tpl,rst}] 22 | indent_size = 4 23 | 24 | # rust 25 | [*.rs] 26 | indent_size = 4 27 | 28 | # documentation, utils 29 | [*.{md,mdx,diff}] 30 | trim_trailing_whitespace = false 31 | 32 | # windows shell scripts 33 | [*.{cmd,bat,ps1}] 34 | end_of_line = crlf 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Catppuccin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Logo
3 | 4 | Catppuccin for Bento 5 | 6 |

7 | 8 |

9 | 10 | 11 | 12 |

13 | 14 |

15 | 16 |

17 | 18 | > **Note**: A live demo can be found [here.](https://bluefalconhd.github.io/ctp-bento-demo/) 19 | 20 |   21 | 22 | ## ⚙️ Usage 23 | 24 | 1. Clone [lewisdoesstuff's Bento Fork](https://github.com/lewisdoesstuff/Bento) with `git clone https://github.com/lewisdoesstuff/Bento.git` 25 | 2. Clone this repository with `git clone https://github.com/catppuccin/bento BentoCatppuccin` 26 | 3. Copy the assets directory from `BentoCatppuccin` to `Bento` with `cp BentoCatppuccin/assets/themes/* Bento/assets/themes/` 27 | 4. CD into Bento with `cd Bento` 28 | 5. Change to any catppuccin theme in `config.js` 29 | * Set `theme` to `latte-frappe`, `latte-macchiato`, or `latte-mocha` depending on your preference. 30 | 6. Configure Bento normally 31 | 32 | An alternative to the process above you can also use [Bento Next](https://github.com/lewisdoesstuff/Bento-next) – a Fork of Bento based on Vue3 with additional features. Bento Next ships all Catppuccin Flavours by default. 33 | 34 |   35 | 36 | ## 💝 Thanks to 37 | 38 | - [BlueFalconHD](https://github.com/bluefalconhd) 39 | - [Andreas Grafen](https://github.com/andreasgrafen) 40 | - [migueravila](https://github.com/migueravila) for [Bento](https://github.com/migueravila/Bento) itself 41 | - [lewisdoesstuff](https://github.com/lewisdoesstuff) for the [Bento theme system](https://github.com/lewisdoesstuff/Bento/tree/themes) 42 | 43 |   44 | 45 |

46 | 47 |

48 | 49 |

50 | Copyright © 2021-present Catppuccin Org 51 |

52 | 53 |

54 | 55 |

56 | -------------------------------------------------------------------------------- /assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/bento/89ab6d0bbd32922cea2cb930ab94a5dd2cc1de7e/assets/.gitkeep -------------------------------------------------------------------------------- /assets/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/bento/89ab6d0bbd32922cea2cb930ab94a5dd2cc1de7e/assets/background.jpg -------------------------------------------------------------------------------- /assets/frappe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/bento/89ab6d0bbd32922cea2cb930ab94a5dd2cc1de7e/assets/frappe.png -------------------------------------------------------------------------------- /assets/latte.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/bento/89ab6d0bbd32922cea2cb930ab94a5dd2cc1de7e/assets/latte.png -------------------------------------------------------------------------------- /assets/macchiato.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/bento/89ab6d0bbd32922cea2cb930ab94a5dd2cc1de7e/assets/macchiato.png -------------------------------------------------------------------------------- /assets/mocha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/bento/89ab6d0bbd32922cea2cb930ab94a5dd2cc1de7e/assets/mocha.png -------------------------------------------------------------------------------- /assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/bento/89ab6d0bbd32922cea2cb930ab94a5dd2cc1de7e/assets/preview.png -------------------------------------------------------------------------------- /assets/themes/bento.css: -------------------------------------------------------------------------------- 1 | :root { 2 | 3 | /* Light Colors */ 4 | 5 | --background: #f5f5f5; /* Background color */ 6 | --accent: #57a0d9; /* Hover color */ 7 | --cards: #e4e6e6; /* Cards color */ 8 | 9 | /* Fonts Color */ 10 | --fg: #3a3a3a; /* Foreground color */ 11 | --sfg: #494949; /* Sceondary Foreground color */ 12 | 13 | /* Image background */ 14 | --imgcol: linear-gradient( 15 | rgba(255, 255, 255, 0.7), 16 | rgba(255, 255, 255, 0.7) 17 | ); /* Filter color */ 18 | } 19 | 20 | .darktheme { 21 | /* Dark Colors */ 22 | 23 | --background: #19171a; /* Background color */ 24 | --accent: #57a0d9; /* Hover color */ 25 | --cards: #201e21; /* Cards color */ 26 | 27 | /* Fonts Color */ 28 | --fg: #d8dee9; /* Foreground color */ 29 | --sfg: #2c292e; /* Secondary Foreground color */ 30 | 31 | /* Image background */ 32 | --imgcol: linear-gradient( 33 | rgba(0, 0, 0, 0.85), 34 | rgba(0, 0, 0, 0.85) 35 | ); /* Filter color */ 36 | } 37 | -------------------------------------------------------------------------------- /assets/themes/catppuccin_colours.css: -------------------------------------------------------------------------------- 1 | :root { 2 | 3 | --latte-rosewater-h: 11; 4 | --latte-rosewater-s: 59; 5 | --latte-rosewater-l: 67; 6 | --latte-rosewater: hsl(var(--latte-rosewater-h), calc(var(--latte-rosewater-s) * 1%), calc((var(--latte-rosewater-l) + 0) * 1%)); 7 | 8 | --latte-text-h: 234; 9 | --latte-text-s: 16; 10 | --latte-text-l: 35; 11 | --latte-text: hsl(var(--latte-text-h), calc(var(--latte-text-s) * 1%), calc((var(--latte-text-l) + 0) * 1%)); 12 | 13 | --latte-surface0-h: 223; 14 | --latte-surface0-s: 16; 15 | --latte-surface0-l: 83; 16 | --latte-surface0: hsl(var(--latte-surface0-h), calc(var(--latte-surface0-s) * 1%), calc((var(--latte-surface0-l) + 0) * 1%)); 17 | 18 | --latte-base-h: 220; 19 | --latte-base-s: 23; 20 | --latte-base-l: 95; 21 | --latte-base: hsl(var(--latte-base-h), calc(var(--latte-base-s) * 1%), calc((var(--latte-base-l) + 0) * 1%)); 22 | 23 | --latte-mantle-h: 220; 24 | --latte-mantle-s: 22; 25 | --latte-mantle-l: 92; 26 | --latte-mantle: hsl(var(--latte-mantle-h), calc(var(--latte-mantle-s) * 1%), calc((var(--latte-mantle-l) + 0) * 1%)); 27 | 28 | 29 | 30 | --frappe-rosewater-h: 10; 31 | --frappe-rosewater-s: 57; 32 | --frappe-rosewater-l: 88; 33 | --frappe-rosewater: hsl(var(--frappe-rosewater-h), calc(var(--frappe-rosewater-s) * 1%), calc((var(--frappe-rosewater-l) + 0) * 1%)); 34 | 35 | --frappe-text-h: 227; 36 | --frappe-text-s: 70; 37 | --frappe-text-l: 87; 38 | --frappe-text: hsl(var(--frappe-text-h), calc(var(--frappe-text-s) * 1%), calc((var(--frappe-text-l) + 0) * 1%)); 39 | 40 | --frappe-surface0-h: 230; 41 | --frappe-surface0-s: 16; 42 | --frappe-surface0-l: 30; 43 | --frappe-surface0: hsl(var(--frappe-surface0-h), calc(var(--frappe-surface0-s) * 1%), calc((var(--frappe-surface0-l) + 0) * 1%)); 44 | 45 | --frappe-base-h: 229; 46 | --frappe-base-s: 19; 47 | --frappe-base-l: 23; 48 | --frappe-base: hsl(var(--frappe-base-h), calc(var(--frappe-base-s) * 1%), calc((var(--frappe-base-l) + 0) * 1%)); 49 | 50 | --frappe-mantle-h: 231; 51 | --frappe-mantle-s: 19; 52 | --frappe-mantle-l: 20; 53 | --frappe-mantle: hsl(var(--frappe-mantle-h), calc(var(--frappe-mantle-s) * 1%), calc((var(--frappe-mantle-l) + 0) * 1%)); 54 | 55 | 56 | 57 | --macchiato-rosewater-h: 10; 58 | --macchiato-rosewater-s: 58; 59 | --macchiato-rosewater-l: 90; 60 | --macchiato-rosewater: hsl(var(--macchiato-rosewater-h), calc(var(--macchiato-rosewater-s) * 1%), calc((var(--macchiato-rosewater-l) + 0) * 1%)); 61 | 62 | --macchiato-text-h: 227; 63 | --macchiato-text-s: 68; 64 | --macchiato-text-l: 88; 65 | --macchiato-text: hsl(var(--macchiato-text-h), calc(var(--macchiato-text-s) * 1%), calc((var(--macchiato-text-l) + 0) * 1%)); 66 | 67 | --macchiato-surface0-h: 230; 68 | --macchiato-surface0-s: 19; 69 | --macchiato-surface0-l: 26; 70 | --macchiato-surface0: hsl(var(--macchiato-surface0-h), calc(var(--macchiato-surface0-s) * 1%), calc((var(--macchiato-surface0-l) + 0) * 1%)); 71 | 72 | --macchiato-base-h: 232; 73 | --macchiato-base-s: 23; 74 | --macchiato-base-l: 18; 75 | --macchiato-base: hsl(var(--macchiato-base-h), calc(var(--macchiato-base-s) * 1%), calc((var(--macchiato-base-l) + 0) * 1%)); 76 | 77 | --macchiato-mantle-h: 233; 78 | --macchiato-mantle-s: 23; 79 | --macchiato-mantle-l: 15; 80 | --macchiato-mantle: hsl(var(--macchiato-mantle-h), calc(var(--macchiato-mantle-s) * 1%), calc((var(--macchiato-mantle-l) + 0) * 1%)); 81 | 82 | 83 | 84 | --mocha-rosewater-h: 10; 85 | --mocha-rosewater-s: 56; 86 | --mocha-rosewater-l: 91; 87 | --mocha-rosewater: hsl(var(--mocha-rosewater-h), calc(var(--mocha-rosewater-s) * 1%), calc((var(--mocha-rosewater-l) + 0) * 1%)); 88 | 89 | --mocha-text-h: 226; 90 | --mocha-text-s: 64; 91 | --mocha-text-l: 88; 92 | --mocha-text: hsl(var(--mocha-text-h), calc(var(--mocha-text-s) * 1%), calc((var(--mocha-text-l) + 0) * 1%)); 93 | 94 | --mocha-surface0-h: 237; 95 | --mocha-surface0-s: 16; 96 | --mocha-surface0-l: 23; 97 | --mocha-surface0: hsl(var(--mocha-surface0-h), calc(var(--mocha-surface0-s) * 1%), calc((var(--mocha-surface0-l) + 0) * 1%)); 98 | 99 | --mocha-base-h: 240; 100 | --mocha-base-s: 21; 101 | --mocha-base-l: 15; 102 | --mocha-base: hsl(var(--mocha-base-h), calc(var(--mocha-base-s) * 1%), calc((var(--mocha-base-l) + 0) * 1%)); 103 | 104 | --mocha-mantle-h: 240; 105 | --mocha-mantle-s: 21; 106 | --mocha-mantle-l: 12; 107 | --mocha-mantle: hsl(var(--mocha-mantle-h), calc(var(--mocha-mantle-s) * 1%), calc((var(--mocha-mantle-l) + 0) * 1%)); 108 | 109 | } 110 | -------------------------------------------------------------------------------- /assets/themes/latte-frappe.css: -------------------------------------------------------------------------------- 1 | @import url(catppuccin_colours.css); 2 | 3 | 4 | :root { 5 | 6 | /* Light Colors */ 7 | --background: var(--latte-base); /* Background color */ 8 | --accent: var(--latte-surface0); /* Hover color */ 9 | --cards: var(--latte-mantle); /* Cards color */ 10 | 11 | /* Fonts Color */ 12 | --fg: var(--latte-text); /* Foreground color */ 13 | --sfg: var(--latte-rosewater); /* Secondary Foreground color */ 14 | 15 | /* Image background */ 16 | --imgbg: url(assets/background.jpg); 17 | --imgcol: linear-gradient( 18 | hsla(var(--latte-base-h) calc(var(--latte-base-s) * 1%) calc((var(--latte-base-l) + 0) * 1%) / 70%), 19 | hsla(var(--latte-base-h) calc(var(--latte-base-s) * 1%) calc((var(--latte-base-l) + 0) * 1%) / 90%) 20 | ); 21 | 22 | } 23 | 24 | 25 | .darktheme { 26 | 27 | /* Dark Colors */ 28 | --background: var(--frappe-base); /* Background color */ 29 | --accent: var(--frappe-surface0); /* Hover color */ 30 | --cards: var(--frappe-mantle); /* Cards color */ 31 | 32 | /* Fonts Color */ 33 | --fg: var(--frappe-text); /* Foreground color */ 34 | --sfg: var(--frappe-rosewater); /* Secondary Foreground color */ 35 | 36 | /* Image background */ 37 | --imgcol: linear-gradient( 38 | hsla(var(--frappe-base-h) calc(var(--frappe-base-s) * 1%) calc((var(--frappe-base-l) + 0) * 1%) / 70%), 39 | hsla(var(--frappe-base-h) calc(var(--frappe-base-s) * 1%) calc((var(--frappe-base-l) + 0) * 1%) / 90%) 40 | ); 41 | 42 | } 43 | -------------------------------------------------------------------------------- /assets/themes/latte-macchiato.css: -------------------------------------------------------------------------------- 1 | @import url(catppuccin_colours.css); 2 | 3 | 4 | :root { 5 | 6 | /* Light Colors */ 7 | --background: var(--latte-base); /* Background color */ 8 | --accent: var(--latte-surface0); /* Hover color */ 9 | --cards: var(--latte-mantle); /* Cards color */ 10 | 11 | /* Fonts Color */ 12 | --fg: var(--latte-text); /* Foreground color */ 13 | --sfg: var(--latte-rosewater); /* Secondary Foreground color */ 14 | 15 | /* Image background */ 16 | --imgbg: url(assets/background.jpg); 17 | --imgcol: linear-gradient( 18 | hsla(var(--latte-base-h) calc(var(--latte-base-s) * 1%) calc((var(--latte-base-l) + 0) * 1%) / 70%), 19 | hsla(var(--latte-base-h) calc(var(--latte-base-s) * 1%) calc((var(--latte-base-l) + 0) * 1%) / 90%) 20 | ); 21 | 22 | } 23 | 24 | 25 | .darktheme { 26 | 27 | /* Dark Colors */ 28 | --background: var(--macchiato-base); /* Background color */ 29 | --accent: var(--macchiato-surface0); /* Hover color */ 30 | --cards: var(--macchiato-mantle); /* Cards color */ 31 | 32 | /* Fonts Color */ 33 | --fg: var(--macchiato-text); /* Foreground color */ 34 | --sfg: var(--macchiato-rosewater); /* Secondary Foreground color */ 35 | 36 | /* Image background */ 37 | --imgcol: linear-gradient( 38 | hsla(var(--macchiato-base-h) calc(var(--macchiato-base-s) * 1%) calc((var(--macchiato-base-l) + 0) * 1%) / 70%), 39 | hsla(var(--macchiato-base-h) calc(var(--macchiato-base-s) * 1%) calc((var(--macchiato-base-l) + 0) * 1%) / 90%) 40 | ); 41 | 42 | } 43 | -------------------------------------------------------------------------------- /assets/themes/latte-mocha.css: -------------------------------------------------------------------------------- 1 | @import url(catppuccin_colours.css); 2 | 3 | 4 | :root { 5 | 6 | /* Light Colors */ 7 | --background: var(--latte-base); /* Background color */ 8 | --accent: var(--latte-surface0); /* Hover color */ 9 | --cards: var(--latte-mantle); /* Cards color */ 10 | 11 | /* Fonts Color */ 12 | --fg: var(--latte-text); /* Foreground color */ 13 | --sfg: var(--latte-rosewater); /* Secondary Foreground color */ 14 | 15 | /* Image background */ 16 | --imgbg: url(assets/background.jpg); 17 | --imgcol: linear-gradient( 18 | hsla(var(--latte-base-h) calc(var(--latte-base-s) * 1%) calc((var(--latte-base-l) + 0) * 1%) / 70%), 19 | hsla(var(--latte-base-h) calc(var(--latte-base-s) * 1%) calc((var(--latte-base-l) + 0) * 1%) / 90%) 20 | ); 21 | 22 | } 23 | 24 | 25 | .darktheme { 26 | 27 | /* Dark Colors */ 28 | --background: var(--mocha-base); /* Background color */ 29 | --accent: var(--mocha-surface0); /* Hover color */ 30 | --cards: var(--mocha-mantle); /* Cards color */ 31 | 32 | /* Fonts Color */ 33 | --fg: var(--mocha-text); /* Foreground color */ 34 | --sfg: var(--mocha-rosewater); /* Secondary Foreground color */ 35 | 36 | /* Image background */ 37 | --imgcol: linear-gradient( 38 | hsla(var(--mocha-base-h) calc(var(--mocha-base-s) * 1%) calc((var(--mocha-base-l) + 0) * 1%) / 70%), 39 | hsla(var(--mocha-base-h) calc(var(--mocha-base-s) * 1%) calc((var(--mocha-base-l) + 0) * 1%) / 90%) 40 | ); 41 | 42 | } 43 | --------------------------------------------------------------------------------