catppuccin_mocha.css
· 1.4 KiB · CSS
Raw
:root {
/* Catppuccin Mocha Palette */
--rosewater: #f5e0dc; /* Rosewater */
--flamingo: #f2cdcd; /* Flamingo */
--pink: #f5c2e7; /* Pink */
--mauve: #cba6f7; /* Mauve */
--red: #f38ba8; /* Red */
--maroon: #eba0ac; /* Maroon */
--peach: #fab387; /* Peach */
--yellow: #f9e2af; /* Yellow */
--green: #a6e3a1; /* Green */
--teal: #94e2d5; /* Teal */
--sky: #89dceb; /* Sky */
--sapphire: #74c7ec; /* Sapphire */
--blue: #89b4fa; /* Blue */
--lavender: #b4befe; /* Lavender */
/* Text and Subtext Colors */
--text: #cdd6f4; /* Text Color */
--subtext1: #bac2de; /* Subtext1 */
--subtext0: #a6adc8; /* Subtext0 */
/* Overlay Colors */
--overlay2: #9399b2; /* Overlay2 */
--overlay1: #7f849c; /* Overlay1 */
--overlay0: #6c7086; /* Overlay0 */
/* Surface Colors */
--surface2: #585b70; /* Surface2 */
--surface1: #45475a; /* Surface1 */
--surface0: #313244; /* Surface0 */
/* Base Colors */
--base: #1e1e2e; /* Base Color */
--mantle: #181825; /* Mantle Color */
--crust: #11111b; /* Crust Color */
/* Interactive Elements */
--accent: #f5c2e7; /* Accent or highlights */
--button-bg: #f28fad; /* Button background */
--button-hover-bg: #b4befe; /* Button hover background */
--input-bg: #313244; /* Input background */
--input-placeholder: #8caaee; /* Input placeholder color */
/* Border Color */
--border: #585b70;
}
| 1 | :root { |
| 2 | /* Catppuccin Mocha Palette */ |
| 3 | --rosewater: #f5e0dc; /* Rosewater */ |
| 4 | --flamingo: #f2cdcd; /* Flamingo */ |
| 5 | --pink: #f5c2e7; /* Pink */ |
| 6 | --mauve: #cba6f7; /* Mauve */ |
| 7 | --red: #f38ba8; /* Red */ |
| 8 | --maroon: #eba0ac; /* Maroon */ |
| 9 | --peach: #fab387; /* Peach */ |
| 10 | --yellow: #f9e2af; /* Yellow */ |
| 11 | --green: #a6e3a1; /* Green */ |
| 12 | --teal: #94e2d5; /* Teal */ |
| 13 | --sky: #89dceb; /* Sky */ |
| 14 | --sapphire: #74c7ec; /* Sapphire */ |
| 15 | --blue: #89b4fa; /* Blue */ |
| 16 | --lavender: #b4befe; /* Lavender */ |
| 17 | |
| 18 | /* Text and Subtext Colors */ |
| 19 | --text: #cdd6f4; /* Text Color */ |
| 20 | --subtext1: #bac2de; /* Subtext1 */ |
| 21 | --subtext0: #a6adc8; /* Subtext0 */ |
| 22 | |
| 23 | /* Overlay Colors */ |
| 24 | --overlay2: #9399b2; /* Overlay2 */ |
| 25 | --overlay1: #7f849c; /* Overlay1 */ |
| 26 | --overlay0: #6c7086; /* Overlay0 */ |
| 27 | |
| 28 | /* Surface Colors */ |
| 29 | --surface2: #585b70; /* Surface2 */ |
| 30 | --surface1: #45475a; /* Surface1 */ |
| 31 | --surface0: #313244; /* Surface0 */ |
| 32 | |
| 33 | /* Base Colors */ |
| 34 | --base: #1e1e2e; /* Base Color */ |
| 35 | --mantle: #181825; /* Mantle Color */ |
| 36 | --crust: #11111b; /* Crust Color */ |
| 37 | |
| 38 | /* Interactive Elements */ |
| 39 | --accent: #f5c2e7; /* Accent or highlights */ |
| 40 | --button-bg: #f28fad; /* Button background */ |
| 41 | --button-hover-bg: #b4befe; /* Button hover background */ |
| 42 | --input-bg: #313244; /* Input background */ |
| 43 | --input-placeholder: #8caaee; /* Input placeholder color */ |
| 44 | |
| 45 | /* Border Color */ |
| 46 | --border: #585b70; |
| 47 | } |