├── justfile ├── assets └── cat-mailspring.png ├── renovate.json ├── src ├── Catppuccin-Latte │ ├── package.json │ └── styles │ │ ├── email-frame.less │ │ └── ui-variables.less ├── Catppuccin-Mocha │ ├── package.json │ └── styles │ │ ├── email-frame.less │ │ └── ui-variables.less ├── Catppuccin-Frappe │ ├── package.json │ └── styles │ │ ├── email-frame.less │ │ └── ui-variables.less └── Catppuccin-Macchiato │ ├── package.json │ └── styles │ ├── email-frame.less │ └── ui-variables.less ├── .editorconfig ├── LICENSE ├── README.md └── mailspring.tera /justfile: -------------------------------------------------------------------------------- 1 | _default: 2 | @just --list 3 | 4 | build: 5 | whiskers mailspring.tera 6 | -------------------------------------------------------------------------------- /assets/cat-mailspring.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/mailspring/HEAD/assets/cat-mailspring.png -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "local>catppuccin/renovate-config" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /src/Catppuccin-Latte/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Catppuccin-Latte", 3 | "title": "Catppuccin Latte Mailspring Theme", 4 | "displayName": "Catppuccin-Latte", 5 | "theme": "ui", 6 | "version": "1.1.1", 7 | "description": "Catppuccin theme - Latte flavour", 8 | "license": "MIT", 9 | "engines": { 10 | "mailspring": "*" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/Catppuccin-Mocha/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Catppuccin-Mocha", 3 | "title": "Catppuccin Mocha Mailspring Theme", 4 | "displayName": "Catppuccin-Mocha", 5 | "theme": "ui", 6 | "version": "1.1.1", 7 | "description": "Catppuccin theme - Mocha flavour", 8 | "license": "MIT", 9 | "engines": { 10 | "mailspring": "*" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/Catppuccin-Frappe/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Catppuccin-Frappe", 3 | "title": "Catppuccin Frappe Mailspring Theme", 4 | "displayName": "Catppuccin-Frappe", 5 | "theme": "ui", 6 | "version": "1.1.1", 7 | "description": "Catppuccin theme - Frappe flavour", 8 | "license": "MIT", 9 | "engines": { 10 | "mailspring": "*" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/Catppuccin-Macchiato/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Catppuccin-Macchiato", 3 | "title": "Catppuccin Macchiato Mailspring Theme", 4 | "displayName": "Catppuccin-Macchiato", 5 | "theme": "ui", 6 | "version": "1.1.1", 7 | "description": "Catppuccin theme - Macchiato flavour", 8 | "license": "MIT", 9 | "engines": { 10 | "mailspring": "*" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.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 Mailspring 5 | 6 |

7 |

8 | Stargazers 9 | 10 | 11 |

12 | 13 |

14 | 15 |

16 | 17 | ## Usage 18 | 19 | 1. Clone this repository. 20 | 2. Open Mailspring, go to `Edit > Install Theme` and select theme You wish to install from downloaded `src` folder: 21 | - 🌻 Catppuccin-Latte 22 | - 🪴 Catppuccin-Frappe 23 | - 🌺 Catppuccin-Macchiato 24 | - 🌿 Catppuccin-Mocha 25 | 3. Change the current theme in `Edit > Change Theme`. 26 | 27 | ## 🙋 FAQ 28 | 29 | - Q: **_"I don't like lavender accent colour that is used in theme"_** 30 | 31 | A: After installing theme You can edit colour by modifying the 3rd line in the following file (change word "flavour" for theme name, i.e. Mocha): 32 | 33 | ```shell 34 | .config/Mailspring/packages/Catppuccin-"flavour"/styles/ui-variables.less 35 | ``` 36 | 37 | ## 💝 Thanks to 38 | 39 | - [elkrien](https://github.com/elkrien) 40 | 41 |   42 | 43 |

44 |

Copyright © 2021-present Catppuccin Org 45 |

46 | -------------------------------------------------------------------------------- /src/Catppuccin-Frappe/styles/email-frame.less: -------------------------------------------------------------------------------- 1 | // This file, with the hardcoded name 'email-frame.less', 2 | // can be used to modify the style of email messages in the 3 | // message list, i.e. the style of the contents of the 4 | // html iframe elements within the mailspring message list. 5 | // There are three requirements for doing so: 6 | // 1) The name of this file must be 'email-frame.less'. 7 | // 2) There cannot be an 'index.less' (which would otherwise 8 | // organizes the import order of the .less files). 9 | // 3) Style properties have to be placed inside a 10 | // '.ignore-in-parent-frame' parent selector. 11 | // The third requirement is actually more a best practice, 12 | // than a hard requirement. 13 | // These three requirements are a bit odd, but they are 14 | // an unavoidable consequence of the current implementation 15 | // of Mailspring. 16 | 17 | @import 'ui-variables'; 18 | 19 | // Display messages as dark as possible, without 20 | // sacrificing their design or readibility. 21 | // To this end, invert the colors of everyting that is not an image 22 | // or inside an html table. This makes content that was originally 23 | // meant to be read on a white background readible on a dark 24 | // background. At the same time, emails with a custom HTML formatting 25 | // are kept intact. 26 | // The broadly valid assumption is made here that in html table 27 | // emails the table is not nested deeper than 4 levels below the 28 | // inbox-html-wrapper. The only case I found so far where this 29 | // assumption is violated, is when tables become deeply nested 30 | // because of blockquotes in repleated forwards/replies. 31 | .ignore-in-parent-frame { 32 | #inbox-html-wrapper, #inbox-plain-wrapper { 33 | 34 | // Invert the color of everything in the message. 35 | color: @text-color-prefilter !important; 36 | blockquote { 37 | border-color: @text-color-prefilter; 38 | } 39 | filter: @message-filter; 40 | 41 | // Undo the color inversion for html tables, while 42 | // adding/restoring color elements for emails that 43 | // implicitly assume a white background. 44 | > table, 45 | > :not(table) > table, 46 | > :not(table) > :not(table) > table, 47 | > :not(table) > :not(table) > :not(table) > table { 48 | padding: 10px; 49 | color: black; 50 | background: white !important; 51 | a, a:hover, a:active { 52 | color: unset; 53 | } 54 | filter: @message-filter-undo; 55 | } 56 | 57 | // Undo the color inversion for all images that are not 58 | // part of html tables. 59 | > img, 60 | > :not(table) > img, 61 | > :not(table) > :not(table) > img, 62 | > :not(table) > :not(table) > :not(table) > img, 63 | > :not(table) > :not(table) > :not(table) > :not(table) img { 64 | filter: @message-filter-undo; 65 | } 66 | 67 | // Force a transparent background for emails that 68 | // are not based on html tables. 69 | > :not(table), 70 | > :not(table) > :not(table), 71 | > :not(table) > :not(table) > :not(table), 72 | > :not(table) > :not(table) > :not(table) > :not(table) { 73 | background: transparent !important; // e.g. sidebars in Stack Overflow emails 74 | } 75 | } 76 | } 77 | // see also composer.less! 78 | 79 | // The print version of the message requires the message 80 | // content to be black. The below selects the content that 81 | // needs to be converted to black in such a way that it only 82 | // applies to the print version. 83 | #print-header, 84 | h1.print-subject, 85 | .print-participants, 86 | #message-list #inbox-html-wrapper { 87 | color: black; 88 | a, a:hover, a:active { 89 | color: unset; 90 | } 91 | } 92 | 93 | // overwrite all color inversion filters with null operation 94 | // filters of a higher css specificity 95 | #message-list #inbox-html-wrapper { 96 | filter: unset; 97 | 98 | > table, 99 | > :not(table) > table, 100 | > :not(table) > :not(table) > table, 101 | > :not(table) > :not(table) > :not(table) > table { 102 | filter: unset; 103 | } 104 | 105 | > img, 106 | > :not(table) > img, 107 | > :not(table) > :not(table) > img, 108 | > :not(table) > :not(table) > :not(table) > img, 109 | > :not(table) > :not(table) > :not(table) > :not(table) img { 110 | filter: unset; 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/Catppuccin-Latte/styles/email-frame.less: -------------------------------------------------------------------------------- 1 | // This file, with the hardcoded name 'email-frame.less', 2 | // can be used to modify the style of email messages in the 3 | // message list, i.e. the style of the contents of the 4 | // html iframe elements within the mailspring message list. 5 | // There are three requirements for doing so: 6 | // 1) The name of this file must be 'email-frame.less'. 7 | // 2) There cannot be an 'index.less' (which would otherwise 8 | // organizes the import order of the .less files). 9 | // 3) Style properties have to be placed inside a 10 | // '.ignore-in-parent-frame' parent selector. 11 | // The third requirement is actually more a best practice, 12 | // than a hard requirement. 13 | // These three requirements are a bit odd, but they are 14 | // an unavoidable consequence of the current implementation 15 | // of Mailspring. 16 | 17 | @import 'ui-variables'; 18 | 19 | // Display messages as dark as possible, without 20 | // sacrificing their design or readibility. 21 | // To this end, invert the colors of everyting that is not an image 22 | // or inside an html table. This makes content that was originally 23 | // meant to be read on a white background readible on a dark 24 | // background. At the same time, emails with a custom HTML formatting 25 | // are kept intact. 26 | // The broadly valid assumption is made here that in html table 27 | // emails the table is not nested deeper than 4 levels below the 28 | // inbox-html-wrapper. The only case I found so far where this 29 | // assumption is violated, is when tables become deeply nested 30 | // because of blockquotes in repleated forwards/replies. 31 | .ignore-in-parent-frame { 32 | #inbox-html-wrapper, #inbox-plain-wrapper { 33 | 34 | // Invert the color of everything in the message. 35 | color: @text-color-prefilter !important; 36 | blockquote { 37 | border-color: @text-color-prefilter; 38 | } 39 | filter: @message-filter; 40 | 41 | // Undo the color inversion for html tables, while 42 | // adding/restoring color elements for emails that 43 | // implicitly assume a white background. 44 | > table, 45 | > :not(table) > table, 46 | > :not(table) > :not(table) > table, 47 | > :not(table) > :not(table) > :not(table) > table { 48 | padding: 10px; 49 | color: black; 50 | background: white !important; 51 | a, a:hover, a:active { 52 | color: unset; 53 | } 54 | filter: @message-filter-undo; 55 | } 56 | 57 | // Undo the color inversion for all images that are not 58 | // part of html tables. 59 | > img, 60 | > :not(table) > img, 61 | > :not(table) > :not(table) > img, 62 | > :not(table) > :not(table) > :not(table) > img, 63 | > :not(table) > :not(table) > :not(table) > :not(table) img { 64 | filter: @message-filter-undo; 65 | } 66 | 67 | // Force a transparent background for emails that 68 | // are not based on html tables. 69 | > :not(table), 70 | > :not(table) > :not(table), 71 | > :not(table) > :not(table) > :not(table), 72 | > :not(table) > :not(table) > :not(table) > :not(table) { 73 | background: transparent !important; // e.g. sidebars in Stack Overflow emails 74 | } 75 | } 76 | } 77 | // see also composer.less! 78 | 79 | // The print version of the message requires the message 80 | // content to be black. The below selects the content that 81 | // needs to be converted to black in such a way that it only 82 | // applies to the print version. 83 | #print-header, 84 | h1.print-subject, 85 | .print-participants, 86 | #message-list #inbox-html-wrapper { 87 | color: black; 88 | a, a:hover, a:active { 89 | color: unset; 90 | } 91 | } 92 | 93 | // overwrite all color inversion filters with null operation 94 | // filters of a higher css specificity 95 | #message-list #inbox-html-wrapper { 96 | filter: unset; 97 | 98 | > table, 99 | > :not(table) > table, 100 | > :not(table) > :not(table) > table, 101 | > :not(table) > :not(table) > :not(table) > table { 102 | filter: unset; 103 | } 104 | 105 | > img, 106 | > :not(table) > img, 107 | > :not(table) > :not(table) > img, 108 | > :not(table) > :not(table) > :not(table) > img, 109 | > :not(table) > :not(table) > :not(table) > :not(table) img { 110 | filter: unset; 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/Catppuccin-Mocha/styles/email-frame.less: -------------------------------------------------------------------------------- 1 | // This file, with the hardcoded name 'email-frame.less', 2 | // can be used to modify the style of email messages in the 3 | // message list, i.e. the style of the contents of the 4 | // html iframe elements within the mailspring message list. 5 | // There are three requirements for doing so: 6 | // 1) The name of this file must be 'email-frame.less'. 7 | // 2) There cannot be an 'index.less' (which would otherwise 8 | // organizes the import order of the .less files). 9 | // 3) Style properties have to be placed inside a 10 | // '.ignore-in-parent-frame' parent selector. 11 | // The third requirement is actually more a best practice, 12 | // than a hard requirement. 13 | // These three requirements are a bit odd, but they are 14 | // an unavoidable consequence of the current implementation 15 | // of Mailspring. 16 | 17 | @import 'ui-variables'; 18 | 19 | // Display messages as dark as possible, without 20 | // sacrificing their design or readibility. 21 | // To this end, invert the colors of everyting that is not an image 22 | // or inside an html table. This makes content that was originally 23 | // meant to be read on a white background readible on a dark 24 | // background. At the same time, emails with a custom HTML formatting 25 | // are kept intact. 26 | // The broadly valid assumption is made here that in html table 27 | // emails the table is not nested deeper than 4 levels below the 28 | // inbox-html-wrapper. The only case I found so far where this 29 | // assumption is violated, is when tables become deeply nested 30 | // because of blockquotes in repleated forwards/replies. 31 | .ignore-in-parent-frame { 32 | #inbox-html-wrapper, #inbox-plain-wrapper { 33 | 34 | // Invert the color of everything in the message. 35 | color: @text-color-prefilter !important; 36 | blockquote { 37 | border-color: @text-color-prefilter; 38 | } 39 | filter: @message-filter; 40 | 41 | // Undo the color inversion for html tables, while 42 | // adding/restoring color elements for emails that 43 | // implicitly assume a white background. 44 | > table, 45 | > :not(table) > table, 46 | > :not(table) > :not(table) > table, 47 | > :not(table) > :not(table) > :not(table) > table { 48 | padding: 10px; 49 | color: black; 50 | background: white !important; 51 | a, a:hover, a:active { 52 | color: unset; 53 | } 54 | filter: @message-filter-undo; 55 | } 56 | 57 | // Undo the color inversion for all images that are not 58 | // part of html tables. 59 | > img, 60 | > :not(table) > img, 61 | > :not(table) > :not(table) > img, 62 | > :not(table) > :not(table) > :not(table) > img, 63 | > :not(table) > :not(table) > :not(table) > :not(table) img { 64 | filter: @message-filter-undo; 65 | } 66 | 67 | // Force a transparent background for emails that 68 | // are not based on html tables. 69 | > :not(table), 70 | > :not(table) > :not(table), 71 | > :not(table) > :not(table) > :not(table), 72 | > :not(table) > :not(table) > :not(table) > :not(table) { 73 | background: transparent !important; // e.g. sidebars in Stack Overflow emails 74 | } 75 | } 76 | } 77 | // see also composer.less! 78 | 79 | // The print version of the message requires the message 80 | // content to be black. The below selects the content that 81 | // needs to be converted to black in such a way that it only 82 | // applies to the print version. 83 | #print-header, 84 | h1.print-subject, 85 | .print-participants, 86 | #message-list #inbox-html-wrapper { 87 | color: black; 88 | a, a:hover, a:active { 89 | color: unset; 90 | } 91 | } 92 | 93 | // overwrite all color inversion filters with null operation 94 | // filters of a higher css specificity 95 | #message-list #inbox-html-wrapper { 96 | filter: unset; 97 | 98 | > table, 99 | > :not(table) > table, 100 | > :not(table) > :not(table) > table, 101 | > :not(table) > :not(table) > :not(table) > table { 102 | filter: unset; 103 | } 104 | 105 | > img, 106 | > :not(table) > img, 107 | > :not(table) > :not(table) > img, 108 | > :not(table) > :not(table) > :not(table) > img, 109 | > :not(table) > :not(table) > :not(table) > :not(table) img { 110 | filter: unset; 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/Catppuccin-Macchiato/styles/email-frame.less: -------------------------------------------------------------------------------- 1 | // This file, with the hardcoded name 'email-frame.less', 2 | // can be used to modify the style of email messages in the 3 | // message list, i.e. the style of the contents of the 4 | // html iframe elements within the mailspring message list. 5 | // There are three requirements for doing so: 6 | // 1) The name of this file must be 'email-frame.less'. 7 | // 2) There cannot be an 'index.less' (which would otherwise 8 | // organizes the import order of the .less files). 9 | // 3) Style properties have to be placed inside a 10 | // '.ignore-in-parent-frame' parent selector. 11 | // The third requirement is actually more a best practice, 12 | // than a hard requirement. 13 | // These three requirements are a bit odd, but they are 14 | // an unavoidable consequence of the current implementation 15 | // of Mailspring. 16 | 17 | @import 'ui-variables'; 18 | 19 | // Display messages as dark as possible, without 20 | // sacrificing their design or readibility. 21 | // To this end, invert the colors of everyting that is not an image 22 | // or inside an html table. This makes content that was originally 23 | // meant to be read on a white background readible on a dark 24 | // background. At the same time, emails with a custom HTML formatting 25 | // are kept intact. 26 | // The broadly valid assumption is made here that in html table 27 | // emails the table is not nested deeper than 4 levels below the 28 | // inbox-html-wrapper. The only case I found so far where this 29 | // assumption is violated, is when tables become deeply nested 30 | // because of blockquotes in repleated forwards/replies. 31 | .ignore-in-parent-frame { 32 | #inbox-html-wrapper, #inbox-plain-wrapper { 33 | 34 | // Invert the color of everything in the message. 35 | color: @text-color-prefilter !important; 36 | blockquote { 37 | border-color: @text-color-prefilter; 38 | } 39 | filter: @message-filter; 40 | 41 | // Undo the color inversion for html tables, while 42 | // adding/restoring color elements for emails that 43 | // implicitly assume a white background. 44 | > table, 45 | > :not(table) > table, 46 | > :not(table) > :not(table) > table, 47 | > :not(table) > :not(table) > :not(table) > table { 48 | padding: 10px; 49 | color: black; 50 | background: white !important; 51 | a, a:hover, a:active { 52 | color: unset; 53 | } 54 | filter: @message-filter-undo; 55 | } 56 | 57 | // Undo the color inversion for all images that are not 58 | // part of html tables. 59 | > img, 60 | > :not(table) > img, 61 | > :not(table) > :not(table) > img, 62 | > :not(table) > :not(table) > :not(table) > img, 63 | > :not(table) > :not(table) > :not(table) > :not(table) img { 64 | filter: @message-filter-undo; 65 | } 66 | 67 | // Force a transparent background for emails that 68 | // are not based on html tables. 69 | > :not(table), 70 | > :not(table) > :not(table), 71 | > :not(table) > :not(table) > :not(table), 72 | > :not(table) > :not(table) > :not(table) > :not(table) { 73 | background: transparent !important; // e.g. sidebars in Stack Overflow emails 74 | } 75 | } 76 | } 77 | // see also composer.less! 78 | 79 | // The print version of the message requires the message 80 | // content to be black. The below selects the content that 81 | // needs to be converted to black in such a way that it only 82 | // applies to the print version. 83 | #print-header, 84 | h1.print-subject, 85 | .print-participants, 86 | #message-list #inbox-html-wrapper { 87 | color: black; 88 | a, a:hover, a:active { 89 | color: unset; 90 | } 91 | } 92 | 93 | // overwrite all color inversion filters with null operation 94 | // filters of a higher css specificity 95 | #message-list #inbox-html-wrapper { 96 | filter: unset; 97 | 98 | > table, 99 | > :not(table) > table, 100 | > :not(table) > :not(table) > table, 101 | > :not(table) > :not(table) > :not(table) > table { 102 | filter: unset; 103 | } 104 | 105 | > img, 106 | > :not(table) > img, 107 | > :not(table) > :not(table) > img, 108 | > :not(table) > :not(table) > :not(table) > img, 109 | > :not(table) > :not(table) > :not(table) > :not(table) img { 110 | filter: unset; 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/Catppuccin-Frappe/styles/ui-variables.less: -------------------------------------------------------------------------------- 1 | @import "base/ui-variables"; 2 | 3 | @accent-primary: #BABBF1; 4 | @accent-primary-dark: @accent-primary; 5 | 6 | @background-primary: #303446; 7 | @background-off-primary: #303446; 8 | @background-secondary: #414559; 9 | @background-tertiary: #414559; 10 | 11 | @border-color-primary: #292C3C; 12 | @border-color-secondary: #292C3C; 13 | @border-color-tertiary: @accent-primary; 14 | @border-color-divider: #292C3C; 15 | 16 | @text-color: #C6D0F5; 17 | @text-color-subtle: #A5ADCE; 18 | @text-color-very-subtle: #838BA7; 19 | @text-color-inverse: #C6D0F5; 20 | @text-color-inverse-subtle: #B5BFE2; 21 | @text-color-inverse-very-subtle: #B5BFE2; 22 | @text-color-heading: #B5BFE2; 23 | 24 | @text-color-link: @accent-primary; 25 | @text-color-link-hover: #F2D5CF; 26 | @text-color-link-active: @accent-primary; 27 | 28 | @btn-default-bg-color: #414559; 29 | @dropdown-default-bg-color: #414559; 30 | 31 | @input-bg: #414559; 32 | @input-border: #414559; 33 | 34 | @list-bg: #414559; 35 | @list-border: #414559; 36 | @list-selected-color: @text-color-inverse; 37 | @list-focused-color: #303446; 38 | 39 | @toolbar-background-color: #292C3C; 40 | @panel-background-color: #292C3C; 41 | 42 | @text-color-prefilter: @text-base-prefilter; 43 | @text-base-prefilter: spin(#fff - @text-color, 180); 44 | 45 | //Line below the toolbar 46 | .sheet-toolbar { 47 | position: relative; 48 | -webkit-app-region: drag; 49 | border-bottom: 1px solid #303446; 50 | } 51 | 52 | //Right panel, left border 53 | .column-MessageListSidebar { 54 | border-left: transparent; 55 | } 56 | 57 | //Message panel, right border 58 | .flexbox-handle-horizontal div { 59 | height: 100%; 60 | box-shadow: transparent; 61 | } 62 | 63 | // Message filter 64 | @message-filter: invert(100%) hue-rotate(180deg); 65 | @message-filter-undo: hue-rotate(-180deg) invert(120%); // white will be a bit fainter 66 | 67 | @text-base-prefilter: spin(#fff - @text-color, 180); 68 | //@orange-prefilter: @accent-primary; // set manually, as hue-rotate is only an approximation of spin 69 | //@orange-prefilter: spin(#fff - @accent-primary, 180); // set automatically, but suboptimally 70 | 71 | //to correct the colour of the links inside the mail body after applying the prefilter 72 | #inbox-html-wrapper > :not(table), #inbox-plain-wrapper > :not(table), #inbox-html-wrapper > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table), #inbox-html-wrapper > :not(table) > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table) > :not(table), #inbox-html-wrapper > :not(table) > :not(table) > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table) > :not(table) > :not(table) { 73 | a { 74 | color: #414559; 75 | } 76 | } 77 | 78 | /* Badge with counter, secondary */ 79 | .item-count-box:not(.selected):not(.focused) { 80 | color: #303446; 81 | box-shadow: 0 0.5px 0 rgba(24, 24, 37, 1), 0 -0.5px 0 rgba(24, 24, 37, 1), 0.5px 0 0 rgba(24, 24, 37, 1), -0.5px 0 0 rgba(24, 24, 37, 1); 82 | background: @accent-primary 83 | } 84 | 85 | /* Badge with counter, primary, selected */ 86 | .outline-view .item .item-count-box.alt-count { 87 | color: @accent-primary; 88 | background: #303446; 89 | box-shadow: none; 90 | } 91 | 92 | /* Badge with counter, primary, not selected */ 93 | .outline-view .item .item-count-box.alt-count:not(.selected):not(.focused) { 94 | color: #303446; 95 | background: @accent-primary; 96 | box-shadow: none; 97 | } 98 | 99 | /* tracking icon, unopened, unfocused */ 100 | .open-tracking-icon img.content-mask.unopened { 101 | background-color: #51576D; 102 | } 103 | 104 | /* tracking icon, mail list, unopened, focused */ 105 | .list-item.focused .open-tracking-icon img.content-mask.unopened, .list-item.selected .open-tracking-icon img.content-mask.unopened { 106 | background-color: #51576D; 107 | } 108 | 109 | /* tracking icon, mail list, opened, unfocused */ 110 | .open-tracking-icon img.content-mask.opened { 111 | background-color: #C6D0F5; 112 | } 113 | 114 | /* tracking icon, opened, focused */ 115 | .list-item.focused .open-tracking-icon img.content-mask.opened, .list-item.selected .open-tracking-icon img.content-mask.opened { 116 | background-color: #C6D0F5; 117 | } 118 | 119 | /* tracking icon, message list, opened */ 120 | .open-tracking-message-status.opened img.content-mask { 121 | background-color: #C6D0F5; 122 | } 123 | 124 | /* tracking icon, message list, focused, more than one selected */ 125 | .thread-list.handler-split .list-item.selected { 126 | color: #303446; 127 | } 128 | 129 | /* tracking icon, mail list, unopened, unfocused */ 130 | .open-tracking-icon img.content-mask.unopened { 131 | background-color: #51576D; 132 | } 133 | 134 | //Tracking icon, toolbar activity 135 | .toolbar-activity .unread-count.active { 136 | background: @accent-primary; 137 | color: #303446; 138 | } 139 | 140 | //Tracking message status opened 141 | .open-tracking-message-status.opened { 142 | color: #C6D0F5; 143 | } 144 | 145 | //Tracking message status unopened 146 | .open-tracking-message-status.unopened { 147 | color: #838BA7; 148 | } 149 | 150 | // Account switching icon 151 | .account-switcher img { 152 | zoom: 1 !important; 153 | max-width: 10px; 154 | max-height: 6px; 155 | transform: none; 156 | background-image: none; 157 | background-color: @text-color-very-subtle; 158 | -webkit-mask-repeat: no-repeat; 159 | -webkit-mask-image: url('data:image/svg+xml;utf8,'); 160 | } 161 | 162 | //Activity icon colour (without accent)// 163 | .toolbar-activity .activity-toolbar-icon { 164 | background: #A5ADCE; 165 | } 166 | 167 | //Search bar// 168 | .div.suggestions { 169 | &:hover { 170 | color:@accent-primary 171 | } 172 | } 173 | 174 | //Composer button // 175 | .button-dropdown.btn-emphasis .primary-item, .button-dropdown.btn-emphasis .secondary-picker, .button-dropdown.btn-emphasis .only-item { 176 | position: relative; 177 | color: #303446; 178 | font-weight: 500; 179 | background: @accent-primary; 180 | box-shadow: none; 181 | border: 0px solid @accent-primary; 182 | } 183 | 184 | .button-dropdown.btn-emphasis .primary-item img.content-mask, .button-dropdown.btn-emphasis .secondary-picker img.content-mask, .button-dropdown.btn-emphasis .only-item img.content-mask { 185 | background-color: #303446; 186 | } 187 | 188 | .button-dropdown.btn-emphasis .primary-item:active, .button-dropdown.btn-emphasis .secondary-picker:active, .button-dropdown.btn-emphasis .only-item:active { 189 | background: @accent-primary; 190 | } 191 | 192 | //Composer name// 193 | .tokenizing-field .token { 194 | background: linear-gradient(to bottom, #414559 0%, #51576D 100%); 195 | } 196 | 197 | .tokenizing-field .token.selected, .tokenizing-field .token.dragging { 198 | color: #303446; 199 | } 200 | 201 | .tokenizing-field .token.selected .action img, .tokenizing-field .token.dragging .action img { 202 | background-color: #303446; 203 | } 204 | 205 | //Composer dropdown list// 206 | .menu .item.selected, .menu .item:active { 207 | background-color: #4e4947; 208 | color: #C6D0F5; 209 | } 210 | 211 | .div.button-dropdown.open.open-down { 212 | background-color: #C6D0F5; 213 | color: #C6D0F5; 214 | } 215 | 216 | .menu .item.selected, .menu .item:active { 217 | background-color: @accent-primary; 218 | color: #303446; 219 | } 220 | 221 | .menu .item.selected .primary, .menu .item:active .primary { 222 | color: #303446; 223 | } 224 | 225 | .menu .item.selected .secondary, .menu .item:active .secondary { 226 | color: #414559; 227 | } 228 | 229 | //Reply button 230 | .button-dropdown .primary-item, .button-dropdown .only-item { 231 | background: -webkit-gradient(linear, left top, left bottom, from(#414559), to(#51576D)); 232 | } 233 | 234 | .button-dropdown .secondary-picker { 235 | background: -webkit-gradient(linear, left top, left bottom, from(#414559), to(#51576D)); 236 | } 237 | 238 | .button-dropdown.open.open-down .secondary-items { 239 | background: #414559 240 | } 241 | 242 | //Composer unfocused 243 | #message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap { 244 | background: #414559 245 | } 246 | 247 | //Composer focused, borders 248 | #message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap.focused { 249 | box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 1.5px rgba(0, 0, 0, 0.08), 0 0 3px @accent-primary; 250 | } 251 | 252 | .composer-inner-wrap .composer-action-bar-wrap .composer-action-bar-content.unfocused { 253 | background-color: #414559; 254 | } 255 | 256 | //Unsubscribe action 257 | .unsubscribe-action { 258 | color: @accent-primary; 259 | text-decoration: underline; 260 | } 261 | 262 | //Undo/redo floating message 263 | .undo-redo-toast .content { 264 | background: @accent-primary; 265 | } 266 | 267 | //Preferences, accounts details, background colour 268 | .preferences-wrap .container-accounts .accounts-content .account-details { 269 | background-color: #303446; 270 | } 271 | 272 | //Preferences, account lists, background colour 273 | .nylas-editable-list .items-wrapper { 274 | background-color: #414559; 275 | } 276 | 277 | 278 | // Remove box-shadow on thread list quick action buttons 279 | .thread-injected-quick-actions .btn { 280 | box-shadow: none; 281 | } 282 | 283 | // Remove gradients quick action buttons 284 | .thread-list .list-item .list-column-HoverActions .action.action-trash { 285 | background: url('../static/images/thread-list-quick-actions/ic-quick-button-trash@2x.png') center 286 | no-repeat, 287 | @accent-primary; 288 | } 289 | 290 | // Remove gradients quick action buttons 291 | .thread-list .list-item .list-column-HoverActions .action.action-archive { 292 | background: url('../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png') 293 | center no-repeat, 294 | @accent-primary; 295 | } 296 | 297 | // Remove gradients quick action buttons 298 | .thread-list .list-item .list-column-HoverActions .action.action-snooze { 299 | background: url('../static/images/thread-list-quick-actions/ic-quickaction-snooze@2x.png') center 300 | no-repeat, 301 | @accent-primary; 302 | } 303 | 304 | // Change default color of star to gray 305 | .thread-list .thread-icon.thread-icon-star, 306 | .draft-list .thread-icon.thread-icon-star { 307 | filter: grayscale(100%); 308 | } 309 | 310 | // Change color on message button 311 | #message-list { 312 | // Labels 313 | .mail-label.removable { 314 | color: #303446 !important; 315 | background: @accent-primary !important; 316 | box-shadow: none !important; 317 | } 318 | } 319 | 320 | // Change color of unread mail dot 321 | .thread-list, .draft-list { 322 | .thread-icon { 323 | &.thread-icon-unread { 324 | filter: grayscale(100%); 325 | } 326 | } 327 | } 328 | 329 | //Changing the colour of the attachment icon 330 | .thread-icon:not(.thread-icon-unread):not(.thread-icon-star) { 331 | -webkit-filter: invert(100%); 332 | } 333 | img.content-dark { 334 | -webkit-filter: invert(100%); 335 | } 336 | img.content-light { 337 | -webkit-filter: invert(100%); 338 | } 339 | 340 | .mail-label { 341 | -webkit-filter: contrast(110%) brightness(85%); 342 | } 343 | -------------------------------------------------------------------------------- /src/Catppuccin-Latte/styles/ui-variables.less: -------------------------------------------------------------------------------- 1 | @import "base/ui-variables"; 2 | 3 | @accent-primary: #7287FD; 4 | @accent-primary-dark: @accent-primary; 5 | 6 | @background-primary: #EFF1F5; 7 | @background-off-primary: #EFF1F5; 8 | @background-secondary: #CCD0DA; 9 | @background-tertiary: #CCD0DA; 10 | 11 | @border-color-primary: #E6E9EF; 12 | @border-color-secondary: #E6E9EF; 13 | @border-color-tertiary: @accent-primary; 14 | @border-color-divider: #E6E9EF; 15 | 16 | @text-color: #4C4F69; 17 | @text-color-subtle: #6C6F85; 18 | @text-color-very-subtle: #8C8FA1; 19 | @text-color-inverse: #4C4F69; 20 | @text-color-inverse-subtle: #5C5F77; 21 | @text-color-inverse-very-subtle: #5C5F77; 22 | @text-color-heading: #5C5F77; 23 | 24 | @text-color-link: @accent-primary; 25 | @text-color-link-hover: #DC8A78; 26 | @text-color-link-active: @accent-primary; 27 | 28 | @btn-default-bg-color: #CCD0DA; 29 | @dropdown-default-bg-color: #CCD0DA; 30 | 31 | @input-bg: #CCD0DA; 32 | @input-border: #CCD0DA; 33 | 34 | @list-bg: #CCD0DA; 35 | @list-border: #CCD0DA; 36 | @list-selected-color: @text-color-inverse; 37 | @list-focused-color: #EFF1F5; 38 | 39 | @toolbar-background-color: #E6E9EF; 40 | @panel-background-color: #E6E9EF; 41 | 42 | @text-color-prefilter: @text-base-prefilter; 43 | @text-base-prefilter: spin(#fff - @text-color, 180); 44 | 45 | //Line below the toolbar 46 | .sheet-toolbar { 47 | position: relative; 48 | -webkit-app-region: drag; 49 | border-bottom: 1px solid #EFF1F5; 50 | } 51 | 52 | //Right panel, left border 53 | .column-MessageListSidebar { 54 | border-left: transparent; 55 | } 56 | 57 | //Message panel, right border 58 | .flexbox-handle-horizontal div { 59 | height: 100%; 60 | box-shadow: transparent; 61 | } 62 | 63 | // Message filter 64 | @message-filter: invert(100%) hue-rotate(180deg); 65 | @message-filter-undo: hue-rotate(-180deg) invert(120%); // white will be a bit fainter 66 | 67 | @text-base-prefilter: spin(#fff - @text-color, 180); 68 | //@orange-prefilter: @accent-primary; // set manually, as hue-rotate is only an approximation of spin 69 | //@orange-prefilter: spin(#fff - @accent-primary, 180); // set automatically, but suboptimally 70 | 71 | //to correct the colour of the links inside the mail body after applying the prefilter 72 | #inbox-html-wrapper > :not(table), #inbox-plain-wrapper > :not(table), #inbox-html-wrapper > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table), #inbox-html-wrapper > :not(table) > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table) > :not(table), #inbox-html-wrapper > :not(table) > :not(table) > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table) > :not(table) > :not(table) { 73 | a { 74 | color: #CCD0DA; 75 | } 76 | } 77 | 78 | /* Badge with counter, secondary */ 79 | .item-count-box:not(.selected):not(.focused) { 80 | color: #EFF1F5; 81 | box-shadow: 0 0.5px 0 rgba(24, 24, 37, 1), 0 -0.5px 0 rgba(24, 24, 37, 1), 0.5px 0 0 rgba(24, 24, 37, 1), -0.5px 0 0 rgba(24, 24, 37, 1); 82 | background: @accent-primary 83 | } 84 | 85 | /* Badge with counter, primary, selected */ 86 | .outline-view .item .item-count-box.alt-count { 87 | color: @accent-primary; 88 | background: #EFF1F5; 89 | box-shadow: none; 90 | } 91 | 92 | /* Badge with counter, primary, not selected */ 93 | .outline-view .item .item-count-box.alt-count:not(.selected):not(.focused) { 94 | color: #EFF1F5; 95 | background: @accent-primary; 96 | box-shadow: none; 97 | } 98 | 99 | /* tracking icon, unopened, unfocused */ 100 | .open-tracking-icon img.content-mask.unopened { 101 | background-color: #BCC0CC; 102 | } 103 | 104 | /* tracking icon, mail list, unopened, focused */ 105 | .list-item.focused .open-tracking-icon img.content-mask.unopened, .list-item.selected .open-tracking-icon img.content-mask.unopened { 106 | background-color: #BCC0CC; 107 | } 108 | 109 | /* tracking icon, mail list, opened, unfocused */ 110 | .open-tracking-icon img.content-mask.opened { 111 | background-color: #4C4F69; 112 | } 113 | 114 | /* tracking icon, opened, focused */ 115 | .list-item.focused .open-tracking-icon img.content-mask.opened, .list-item.selected .open-tracking-icon img.content-mask.opened { 116 | background-color: #4C4F69; 117 | } 118 | 119 | /* tracking icon, message list, opened */ 120 | .open-tracking-message-status.opened img.content-mask { 121 | background-color: #4C4F69; 122 | } 123 | 124 | /* tracking icon, message list, focused, more than one selected */ 125 | .thread-list.handler-split .list-item.selected { 126 | color: #EFF1F5; 127 | } 128 | 129 | /* tracking icon, mail list, unopened, unfocused */ 130 | .open-tracking-icon img.content-mask.unopened { 131 | background-color: #BCC0CC; 132 | } 133 | 134 | //Tracking icon, toolbar activity 135 | .toolbar-activity .unread-count.active { 136 | background: @accent-primary; 137 | color: #EFF1F5; 138 | } 139 | 140 | //Tracking message status opened 141 | .open-tracking-message-status.opened { 142 | color: #4C4F69; 143 | } 144 | 145 | //Tracking message status unopened 146 | .open-tracking-message-status.unopened { 147 | color: #8C8FA1; 148 | } 149 | 150 | // Account switching icon 151 | .account-switcher img { 152 | zoom: 1 !important; 153 | max-width: 10px; 154 | max-height: 6px; 155 | transform: none; 156 | background-image: none; 157 | background-color: @text-color-very-subtle; 158 | -webkit-mask-repeat: no-repeat; 159 | -webkit-mask-image: url('data:image/svg+xml;utf8,'); 160 | } 161 | 162 | //Activity icon colour (without accent)// 163 | .toolbar-activity .activity-toolbar-icon { 164 | background: #6C6F85; 165 | } 166 | 167 | //Search bar// 168 | .div.suggestions { 169 | &:hover { 170 | color:@accent-primary 171 | } 172 | } 173 | 174 | //Composer button // 175 | .button-dropdown.btn-emphasis .primary-item, .button-dropdown.btn-emphasis .secondary-picker, .button-dropdown.btn-emphasis .only-item { 176 | position: relative; 177 | color: #EFF1F5; 178 | font-weight: 500; 179 | background: @accent-primary; 180 | box-shadow: none; 181 | border: 0px solid @accent-primary; 182 | } 183 | 184 | .button-dropdown.btn-emphasis .primary-item img.content-mask, .button-dropdown.btn-emphasis .secondary-picker img.content-mask, .button-dropdown.btn-emphasis .only-item img.content-mask { 185 | background-color: #EFF1F5; 186 | } 187 | 188 | .button-dropdown.btn-emphasis .primary-item:active, .button-dropdown.btn-emphasis .secondary-picker:active, .button-dropdown.btn-emphasis .only-item:active { 189 | background: @accent-primary; 190 | } 191 | 192 | //Composer name// 193 | .tokenizing-field .token { 194 | background: linear-gradient(to bottom, #CCD0DA 0%, #BCC0CC 100%); 195 | } 196 | 197 | .tokenizing-field .token.selected, .tokenizing-field .token.dragging { 198 | color: #EFF1F5; 199 | } 200 | 201 | .tokenizing-field .token.selected .action img, .tokenizing-field .token.dragging .action img { 202 | background-color: #EFF1F5; 203 | } 204 | 205 | //Composer dropdown list// 206 | .menu .item.selected, .menu .item:active { 207 | background-color: #4e4947; 208 | color: #4C4F69; 209 | } 210 | 211 | .div.button-dropdown.open.open-down { 212 | background-color: #4C4F69; 213 | color: #4C4F69; 214 | } 215 | 216 | .menu .item.selected, .menu .item:active { 217 | background-color: @accent-primary; 218 | color: #EFF1F5; 219 | } 220 | 221 | .menu .item.selected .primary, .menu .item:active .primary { 222 | color: #EFF1F5; 223 | } 224 | 225 | .menu .item.selected .secondary, .menu .item:active .secondary { 226 | color: #CCD0DA; 227 | } 228 | 229 | //Reply button 230 | .button-dropdown .primary-item, .button-dropdown .only-item { 231 | background: -webkit-gradient(linear, left top, left bottom, from(#CCD0DA), to(#BCC0CC)); 232 | } 233 | 234 | .button-dropdown .secondary-picker { 235 | background: -webkit-gradient(linear, left top, left bottom, from(#CCD0DA), to(#BCC0CC)); 236 | } 237 | 238 | .button-dropdown.open.open-down .secondary-items { 239 | background: #CCD0DA 240 | } 241 | 242 | //Composer unfocused 243 | #message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap { 244 | background: #CCD0DA 245 | } 246 | 247 | //Composer focused, borders 248 | #message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap.focused { 249 | box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 1.5px rgba(0, 0, 0, 0.08), 0 0 3px @accent-primary; 250 | } 251 | 252 | .composer-inner-wrap .composer-action-bar-wrap .composer-action-bar-content.unfocused { 253 | background-color: #CCD0DA; 254 | } 255 | 256 | //Unsubscribe action 257 | .unsubscribe-action { 258 | color: @accent-primary; 259 | text-decoration: underline; 260 | } 261 | 262 | //Undo/redo floating message 263 | .undo-redo-toast .content { 264 | background: @accent-primary; 265 | } 266 | 267 | //Preferences, accounts details, background colour 268 | .preferences-wrap .container-accounts .accounts-content .account-details { 269 | background-color: #EFF1F5; 270 | } 271 | 272 | //Preferences, account lists, background colour 273 | .nylas-editable-list .items-wrapper { 274 | background-color: #CCD0DA; 275 | } 276 | 277 | 278 | // Remove box-shadow on thread list quick action buttons 279 | .thread-injected-quick-actions .btn { 280 | box-shadow: none; 281 | } 282 | 283 | // Remove gradients quick action buttons 284 | .thread-list .list-item .list-column-HoverActions .action.action-trash { 285 | background: url('../static/images/thread-list-quick-actions/ic-quick-button-trash@2x.png') center 286 | no-repeat, 287 | @accent-primary; 288 | } 289 | 290 | // Remove gradients quick action buttons 291 | .thread-list .list-item .list-column-HoverActions .action.action-archive { 292 | background: url('../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png') 293 | center no-repeat, 294 | @accent-primary; 295 | } 296 | 297 | // Remove gradients quick action buttons 298 | .thread-list .list-item .list-column-HoverActions .action.action-snooze { 299 | background: url('../static/images/thread-list-quick-actions/ic-quickaction-snooze@2x.png') center 300 | no-repeat, 301 | @accent-primary; 302 | } 303 | 304 | // Change default color of star to gray 305 | .thread-list .thread-icon.thread-icon-star, 306 | .draft-list .thread-icon.thread-icon-star { 307 | filter: grayscale(100%); 308 | } 309 | 310 | // Change color on message button 311 | #message-list { 312 | // Labels 313 | .mail-label.removable { 314 | color: #EFF1F5 !important; 315 | background: @accent-primary !important; 316 | box-shadow: none !important; 317 | } 318 | } 319 | 320 | // Change color of unread mail dot 321 | .thread-list, .draft-list { 322 | .thread-icon { 323 | &.thread-icon-unread { 324 | filter: grayscale(100%); 325 | } 326 | } 327 | } 328 | 329 | //Changing the colour of the attachment icon 330 | .thread-icon:not(.thread-icon-unread):not(.thread-icon-star) { 331 | -webkit-filter: invert(100%); 332 | } 333 | img.content-dark { 334 | -webkit-filter: invert(100%); 335 | } 336 | img.content-light { 337 | -webkit-filter: invert(100%); 338 | } 339 | 340 | .mail-label { 341 | -webkit-filter: contrast(110%) brightness(85%); 342 | } 343 | -------------------------------------------------------------------------------- /src/Catppuccin-Mocha/styles/ui-variables.less: -------------------------------------------------------------------------------- 1 | @import "base/ui-variables"; 2 | 3 | @accent-primary: #B4BEFE; 4 | @accent-primary-dark: @accent-primary; 5 | 6 | @background-primary: #1E1E2E; 7 | @background-off-primary: #1E1E2E; 8 | @background-secondary: #313244; 9 | @background-tertiary: #313244; 10 | 11 | @border-color-primary: #181825; 12 | @border-color-secondary: #181825; 13 | @border-color-tertiary: @accent-primary; 14 | @border-color-divider: #181825; 15 | 16 | @text-color: #CDD6F4; 17 | @text-color-subtle: #A6ADC8; 18 | @text-color-very-subtle: #7F849C; 19 | @text-color-inverse: #CDD6F4; 20 | @text-color-inverse-subtle: #BAC2DE; 21 | @text-color-inverse-very-subtle: #BAC2DE; 22 | @text-color-heading: #BAC2DE; 23 | 24 | @text-color-link: @accent-primary; 25 | @text-color-link-hover: #F5E0DC; 26 | @text-color-link-active: @accent-primary; 27 | 28 | @btn-default-bg-color: #313244; 29 | @dropdown-default-bg-color: #313244; 30 | 31 | @input-bg: #313244; 32 | @input-border: #313244; 33 | 34 | @list-bg: #313244; 35 | @list-border: #313244; 36 | @list-selected-color: @text-color-inverse; 37 | @list-focused-color: #1E1E2E; 38 | 39 | @toolbar-background-color: #181825; 40 | @panel-background-color: #181825; 41 | 42 | @text-color-prefilter: @text-base-prefilter; 43 | @text-base-prefilter: spin(#fff - @text-color, 180); 44 | 45 | //Line below the toolbar 46 | .sheet-toolbar { 47 | position: relative; 48 | -webkit-app-region: drag; 49 | border-bottom: 1px solid #1E1E2E; 50 | } 51 | 52 | //Right panel, left border 53 | .column-MessageListSidebar { 54 | border-left: transparent; 55 | } 56 | 57 | //Message panel, right border 58 | .flexbox-handle-horizontal div { 59 | height: 100%; 60 | box-shadow: transparent; 61 | } 62 | 63 | // Message filter 64 | @message-filter: invert(100%) hue-rotate(180deg); 65 | @message-filter-undo: hue-rotate(-180deg) invert(120%); // white will be a bit fainter 66 | 67 | @text-base-prefilter: spin(#fff - @text-color, 180); 68 | //@orange-prefilter: @accent-primary; // set manually, as hue-rotate is only an approximation of spin 69 | //@orange-prefilter: spin(#fff - @accent-primary, 180); // set automatically, but suboptimally 70 | 71 | //to correct the colour of the links inside the mail body after applying the prefilter 72 | #inbox-html-wrapper > :not(table), #inbox-plain-wrapper > :not(table), #inbox-html-wrapper > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table), #inbox-html-wrapper > :not(table) > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table) > :not(table), #inbox-html-wrapper > :not(table) > :not(table) > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table) > :not(table) > :not(table) { 73 | a { 74 | color: #313244; 75 | } 76 | } 77 | 78 | /* Badge with counter, secondary */ 79 | .item-count-box:not(.selected):not(.focused) { 80 | color: #1E1E2E; 81 | box-shadow: 0 0.5px 0 rgba(24, 24, 37, 1), 0 -0.5px 0 rgba(24, 24, 37, 1), 0.5px 0 0 rgba(24, 24, 37, 1), -0.5px 0 0 rgba(24, 24, 37, 1); 82 | background: @accent-primary 83 | } 84 | 85 | /* Badge with counter, primary, selected */ 86 | .outline-view .item .item-count-box.alt-count { 87 | color: @accent-primary; 88 | background: #1E1E2E; 89 | box-shadow: none; 90 | } 91 | 92 | /* Badge with counter, primary, not selected */ 93 | .outline-view .item .item-count-box.alt-count:not(.selected):not(.focused) { 94 | color: #1E1E2E; 95 | background: @accent-primary; 96 | box-shadow: none; 97 | } 98 | 99 | /* tracking icon, unopened, unfocused */ 100 | .open-tracking-icon img.content-mask.unopened { 101 | background-color: #45475A; 102 | } 103 | 104 | /* tracking icon, mail list, unopened, focused */ 105 | .list-item.focused .open-tracking-icon img.content-mask.unopened, .list-item.selected .open-tracking-icon img.content-mask.unopened { 106 | background-color: #45475A; 107 | } 108 | 109 | /* tracking icon, mail list, opened, unfocused */ 110 | .open-tracking-icon img.content-mask.opened { 111 | background-color: #CDD6F4; 112 | } 113 | 114 | /* tracking icon, opened, focused */ 115 | .list-item.focused .open-tracking-icon img.content-mask.opened, .list-item.selected .open-tracking-icon img.content-mask.opened { 116 | background-color: #CDD6F4; 117 | } 118 | 119 | /* tracking icon, message list, opened */ 120 | .open-tracking-message-status.opened img.content-mask { 121 | background-color: #CDD6F4; 122 | } 123 | 124 | /* tracking icon, message list, focused, more than one selected */ 125 | .thread-list.handler-split .list-item.selected { 126 | color: #1E1E2E; 127 | } 128 | 129 | /* tracking icon, mail list, unopened, unfocused */ 130 | .open-tracking-icon img.content-mask.unopened { 131 | background-color: #45475A; 132 | } 133 | 134 | //Tracking icon, toolbar activity 135 | .toolbar-activity .unread-count.active { 136 | background: @accent-primary; 137 | color: #1E1E2E; 138 | } 139 | 140 | //Tracking message status opened 141 | .open-tracking-message-status.opened { 142 | color: #CDD6F4; 143 | } 144 | 145 | //Tracking message status unopened 146 | .open-tracking-message-status.unopened { 147 | color: #7F849C; 148 | } 149 | 150 | // Account switching icon 151 | .account-switcher img { 152 | zoom: 1 !important; 153 | max-width: 10px; 154 | max-height: 6px; 155 | transform: none; 156 | background-image: none; 157 | background-color: @text-color-very-subtle; 158 | -webkit-mask-repeat: no-repeat; 159 | -webkit-mask-image: url('data:image/svg+xml;utf8,'); 160 | } 161 | 162 | //Activity icon colour (without accent)// 163 | .toolbar-activity .activity-toolbar-icon { 164 | background: #A6ADC8; 165 | } 166 | 167 | //Search bar// 168 | .div.suggestions { 169 | &:hover { 170 | color:@accent-primary 171 | } 172 | } 173 | 174 | //Composer button // 175 | .button-dropdown.btn-emphasis .primary-item, .button-dropdown.btn-emphasis .secondary-picker, .button-dropdown.btn-emphasis .only-item { 176 | position: relative; 177 | color: #1E1E2E; 178 | font-weight: 500; 179 | background: @accent-primary; 180 | box-shadow: none; 181 | border: 0px solid @accent-primary; 182 | } 183 | 184 | .button-dropdown.btn-emphasis .primary-item img.content-mask, .button-dropdown.btn-emphasis .secondary-picker img.content-mask, .button-dropdown.btn-emphasis .only-item img.content-mask { 185 | background-color: #1E1E2E; 186 | } 187 | 188 | .button-dropdown.btn-emphasis .primary-item:active, .button-dropdown.btn-emphasis .secondary-picker:active, .button-dropdown.btn-emphasis .only-item:active { 189 | background: @accent-primary; 190 | } 191 | 192 | //Composer name// 193 | .tokenizing-field .token { 194 | background: linear-gradient(to bottom, #313244 0%, #45475A 100%); 195 | } 196 | 197 | .tokenizing-field .token.selected, .tokenizing-field .token.dragging { 198 | color: #1E1E2E; 199 | } 200 | 201 | .tokenizing-field .token.selected .action img, .tokenizing-field .token.dragging .action img { 202 | background-color: #1E1E2E; 203 | } 204 | 205 | //Composer dropdown list// 206 | .menu .item.selected, .menu .item:active { 207 | background-color: #4e4947; 208 | color: #CDD6F4; 209 | } 210 | 211 | .div.button-dropdown.open.open-down { 212 | background-color: #CDD6F4; 213 | color: #CDD6F4; 214 | } 215 | 216 | .menu .item.selected, .menu .item:active { 217 | background-color: @accent-primary; 218 | color: #1E1E2E; 219 | } 220 | 221 | .menu .item.selected .primary, .menu .item:active .primary { 222 | color: #1E1E2E; 223 | } 224 | 225 | .menu .item.selected .secondary, .menu .item:active .secondary { 226 | color: #313244; 227 | } 228 | 229 | //Reply button 230 | .button-dropdown .primary-item, .button-dropdown .only-item { 231 | background: -webkit-gradient(linear, left top, left bottom, from(#313244), to(#45475A)); 232 | } 233 | 234 | .button-dropdown .secondary-picker { 235 | background: -webkit-gradient(linear, left top, left bottom, from(#313244), to(#45475A)); 236 | } 237 | 238 | .button-dropdown.open.open-down .secondary-items { 239 | background: #313244 240 | } 241 | 242 | //Composer unfocused 243 | #message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap { 244 | background: #313244 245 | } 246 | 247 | //Composer focused, borders 248 | #message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap.focused { 249 | box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 1.5px rgba(0, 0, 0, 0.08), 0 0 3px @accent-primary; 250 | } 251 | 252 | .composer-inner-wrap .composer-action-bar-wrap .composer-action-bar-content.unfocused { 253 | background-color: #313244; 254 | } 255 | 256 | //Unsubscribe action 257 | .unsubscribe-action { 258 | color: @accent-primary; 259 | text-decoration: underline; 260 | } 261 | 262 | //Undo/redo floating message 263 | .undo-redo-toast .content { 264 | background: @accent-primary; 265 | } 266 | 267 | //Preferences, accounts details, background colour 268 | .preferences-wrap .container-accounts .accounts-content .account-details { 269 | background-color: #1E1E2E; 270 | } 271 | 272 | //Preferences, account lists, background colour 273 | .nylas-editable-list .items-wrapper { 274 | background-color: #313244; 275 | } 276 | 277 | 278 | // Remove box-shadow on thread list quick action buttons 279 | .thread-injected-quick-actions .btn { 280 | box-shadow: none; 281 | } 282 | 283 | // Remove gradients quick action buttons 284 | .thread-list .list-item .list-column-HoverActions .action.action-trash { 285 | background: url('../static/images/thread-list-quick-actions/ic-quick-button-trash@2x.png') center 286 | no-repeat, 287 | @accent-primary; 288 | } 289 | 290 | // Remove gradients quick action buttons 291 | .thread-list .list-item .list-column-HoverActions .action.action-archive { 292 | background: url('../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png') 293 | center no-repeat, 294 | @accent-primary; 295 | } 296 | 297 | // Remove gradients quick action buttons 298 | .thread-list .list-item .list-column-HoverActions .action.action-snooze { 299 | background: url('../static/images/thread-list-quick-actions/ic-quickaction-snooze@2x.png') center 300 | no-repeat, 301 | @accent-primary; 302 | } 303 | 304 | // Change default color of star to gray 305 | .thread-list .thread-icon.thread-icon-star, 306 | .draft-list .thread-icon.thread-icon-star { 307 | filter: grayscale(100%); 308 | } 309 | 310 | // Change color on message button 311 | #message-list { 312 | // Labels 313 | .mail-label.removable { 314 | color: #1E1E2E !important; 315 | background: @accent-primary !important; 316 | box-shadow: none !important; 317 | } 318 | } 319 | 320 | // Change color of unread mail dot 321 | .thread-list, .draft-list { 322 | .thread-icon { 323 | &.thread-icon-unread { 324 | filter: grayscale(100%); 325 | } 326 | } 327 | } 328 | 329 | //Changing the colour of the attachment icon 330 | .thread-icon:not(.thread-icon-unread):not(.thread-icon-star) { 331 | -webkit-filter: invert(100%); 332 | } 333 | img.content-dark { 334 | -webkit-filter: invert(100%); 335 | } 336 | img.content-light { 337 | -webkit-filter: invert(100%); 338 | } 339 | 340 | .mail-label { 341 | -webkit-filter: contrast(110%) brightness(85%); 342 | } 343 | -------------------------------------------------------------------------------- /src/Catppuccin-Macchiato/styles/ui-variables.less: -------------------------------------------------------------------------------- 1 | @import "base/ui-variables"; 2 | 3 | @accent-primary: #B7BDF8; 4 | @accent-primary-dark: @accent-primary; 5 | 6 | @background-primary: #24273A; 7 | @background-off-primary: #24273A; 8 | @background-secondary: #363A4F; 9 | @background-tertiary: #363A4F; 10 | 11 | @border-color-primary: #1E2030; 12 | @border-color-secondary: #1E2030; 13 | @border-color-tertiary: @accent-primary; 14 | @border-color-divider: #1E2030; 15 | 16 | @text-color: #CAD3F5; 17 | @text-color-subtle: #A5ADCB; 18 | @text-color-very-subtle: #8087A2; 19 | @text-color-inverse: #CAD3F5; 20 | @text-color-inverse-subtle: #B8C0E0; 21 | @text-color-inverse-very-subtle: #B8C0E0; 22 | @text-color-heading: #B8C0E0; 23 | 24 | @text-color-link: @accent-primary; 25 | @text-color-link-hover: #F4DBD6; 26 | @text-color-link-active: @accent-primary; 27 | 28 | @btn-default-bg-color: #363A4F; 29 | @dropdown-default-bg-color: #363A4F; 30 | 31 | @input-bg: #363A4F; 32 | @input-border: #363A4F; 33 | 34 | @list-bg: #363A4F; 35 | @list-border: #363A4F; 36 | @list-selected-color: @text-color-inverse; 37 | @list-focused-color: #24273A; 38 | 39 | @toolbar-background-color: #1E2030; 40 | @panel-background-color: #1E2030; 41 | 42 | @text-color-prefilter: @text-base-prefilter; 43 | @text-base-prefilter: spin(#fff - @text-color, 180); 44 | 45 | //Line below the toolbar 46 | .sheet-toolbar { 47 | position: relative; 48 | -webkit-app-region: drag; 49 | border-bottom: 1px solid #24273A; 50 | } 51 | 52 | //Right panel, left border 53 | .column-MessageListSidebar { 54 | border-left: transparent; 55 | } 56 | 57 | //Message panel, right border 58 | .flexbox-handle-horizontal div { 59 | height: 100%; 60 | box-shadow: transparent; 61 | } 62 | 63 | // Message filter 64 | @message-filter: invert(100%) hue-rotate(180deg); 65 | @message-filter-undo: hue-rotate(-180deg) invert(120%); // white will be a bit fainter 66 | 67 | @text-base-prefilter: spin(#fff - @text-color, 180); 68 | //@orange-prefilter: @accent-primary; // set manually, as hue-rotate is only an approximation of spin 69 | //@orange-prefilter: spin(#fff - @accent-primary, 180); // set automatically, but suboptimally 70 | 71 | //to correct the colour of the links inside the mail body after applying the prefilter 72 | #inbox-html-wrapper > :not(table), #inbox-plain-wrapper > :not(table), #inbox-html-wrapper > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table), #inbox-html-wrapper > :not(table) > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table) > :not(table), #inbox-html-wrapper > :not(table) > :not(table) > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table) > :not(table) > :not(table) { 73 | a { 74 | color: #363A4F; 75 | } 76 | } 77 | 78 | /* Badge with counter, secondary */ 79 | .item-count-box:not(.selected):not(.focused) { 80 | color: #24273A; 81 | box-shadow: 0 0.5px 0 rgba(24, 24, 37, 1), 0 -0.5px 0 rgba(24, 24, 37, 1), 0.5px 0 0 rgba(24, 24, 37, 1), -0.5px 0 0 rgba(24, 24, 37, 1); 82 | background: @accent-primary 83 | } 84 | 85 | /* Badge with counter, primary, selected */ 86 | .outline-view .item .item-count-box.alt-count { 87 | color: @accent-primary; 88 | background: #24273A; 89 | box-shadow: none; 90 | } 91 | 92 | /* Badge with counter, primary, not selected */ 93 | .outline-view .item .item-count-box.alt-count:not(.selected):not(.focused) { 94 | color: #24273A; 95 | background: @accent-primary; 96 | box-shadow: none; 97 | } 98 | 99 | /* tracking icon, unopened, unfocused */ 100 | .open-tracking-icon img.content-mask.unopened { 101 | background-color: #494D64; 102 | } 103 | 104 | /* tracking icon, mail list, unopened, focused */ 105 | .list-item.focused .open-tracking-icon img.content-mask.unopened, .list-item.selected .open-tracking-icon img.content-mask.unopened { 106 | background-color: #494D64; 107 | } 108 | 109 | /* tracking icon, mail list, opened, unfocused */ 110 | .open-tracking-icon img.content-mask.opened { 111 | background-color: #CAD3F5; 112 | } 113 | 114 | /* tracking icon, opened, focused */ 115 | .list-item.focused .open-tracking-icon img.content-mask.opened, .list-item.selected .open-tracking-icon img.content-mask.opened { 116 | background-color: #CAD3F5; 117 | } 118 | 119 | /* tracking icon, message list, opened */ 120 | .open-tracking-message-status.opened img.content-mask { 121 | background-color: #CAD3F5; 122 | } 123 | 124 | /* tracking icon, message list, focused, more than one selected */ 125 | .thread-list.handler-split .list-item.selected { 126 | color: #24273A; 127 | } 128 | 129 | /* tracking icon, mail list, unopened, unfocused */ 130 | .open-tracking-icon img.content-mask.unopened { 131 | background-color: #494D64; 132 | } 133 | 134 | //Tracking icon, toolbar activity 135 | .toolbar-activity .unread-count.active { 136 | background: @accent-primary; 137 | color: #24273A; 138 | } 139 | 140 | //Tracking message status opened 141 | .open-tracking-message-status.opened { 142 | color: #CAD3F5; 143 | } 144 | 145 | //Tracking message status unopened 146 | .open-tracking-message-status.unopened { 147 | color: #8087A2; 148 | } 149 | 150 | // Account switching icon 151 | .account-switcher img { 152 | zoom: 1 !important; 153 | max-width: 10px; 154 | max-height: 6px; 155 | transform: none; 156 | background-image: none; 157 | background-color: @text-color-very-subtle; 158 | -webkit-mask-repeat: no-repeat; 159 | -webkit-mask-image: url('data:image/svg+xml;utf8,'); 160 | } 161 | 162 | //Activity icon colour (without accent)// 163 | .toolbar-activity .activity-toolbar-icon { 164 | background: #A5ADCB; 165 | } 166 | 167 | //Search bar// 168 | .div.suggestions { 169 | &:hover { 170 | color:@accent-primary 171 | } 172 | } 173 | 174 | //Composer button // 175 | .button-dropdown.btn-emphasis .primary-item, .button-dropdown.btn-emphasis .secondary-picker, .button-dropdown.btn-emphasis .only-item { 176 | position: relative; 177 | color: #24273A; 178 | font-weight: 500; 179 | background: @accent-primary; 180 | box-shadow: none; 181 | border: 0px solid @accent-primary; 182 | } 183 | 184 | .button-dropdown.btn-emphasis .primary-item img.content-mask, .button-dropdown.btn-emphasis .secondary-picker img.content-mask, .button-dropdown.btn-emphasis .only-item img.content-mask { 185 | background-color: #24273A; 186 | } 187 | 188 | .button-dropdown.btn-emphasis .primary-item:active, .button-dropdown.btn-emphasis .secondary-picker:active, .button-dropdown.btn-emphasis .only-item:active { 189 | background: @accent-primary; 190 | } 191 | 192 | //Composer name// 193 | .tokenizing-field .token { 194 | background: linear-gradient(to bottom, #363A4F 0%, #494D64 100%); 195 | } 196 | 197 | .tokenizing-field .token.selected, .tokenizing-field .token.dragging { 198 | color: #24273A; 199 | } 200 | 201 | .tokenizing-field .token.selected .action img, .tokenizing-field .token.dragging .action img { 202 | background-color: #24273A; 203 | } 204 | 205 | //Composer dropdown list// 206 | .menu .item.selected, .menu .item:active { 207 | background-color: #4e4947; 208 | color: #CAD3F5; 209 | } 210 | 211 | .div.button-dropdown.open.open-down { 212 | background-color: #CAD3F5; 213 | color: #CAD3F5; 214 | } 215 | 216 | .menu .item.selected, .menu .item:active { 217 | background-color: @accent-primary; 218 | color: #24273A; 219 | } 220 | 221 | .menu .item.selected .primary, .menu .item:active .primary { 222 | color: #24273A; 223 | } 224 | 225 | .menu .item.selected .secondary, .menu .item:active .secondary { 226 | color: #363A4F; 227 | } 228 | 229 | //Reply button 230 | .button-dropdown .primary-item, .button-dropdown .only-item { 231 | background: -webkit-gradient(linear, left top, left bottom, from(#363A4F), to(#494D64)); 232 | } 233 | 234 | .button-dropdown .secondary-picker { 235 | background: -webkit-gradient(linear, left top, left bottom, from(#363A4F), to(#494D64)); 236 | } 237 | 238 | .button-dropdown.open.open-down .secondary-items { 239 | background: #363A4F 240 | } 241 | 242 | //Composer unfocused 243 | #message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap { 244 | background: #363A4F 245 | } 246 | 247 | //Composer focused, borders 248 | #message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap.focused { 249 | box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 1.5px rgba(0, 0, 0, 0.08), 0 0 3px @accent-primary; 250 | } 251 | 252 | .composer-inner-wrap .composer-action-bar-wrap .composer-action-bar-content.unfocused { 253 | background-color: #363A4F; 254 | } 255 | 256 | //Unsubscribe action 257 | .unsubscribe-action { 258 | color: @accent-primary; 259 | text-decoration: underline; 260 | } 261 | 262 | //Undo/redo floating message 263 | .undo-redo-toast .content { 264 | background: @accent-primary; 265 | } 266 | 267 | //Preferences, accounts details, background colour 268 | .preferences-wrap .container-accounts .accounts-content .account-details { 269 | background-color: #24273A; 270 | } 271 | 272 | //Preferences, account lists, background colour 273 | .nylas-editable-list .items-wrapper { 274 | background-color: #363A4F; 275 | } 276 | 277 | 278 | // Remove box-shadow on thread list quick action buttons 279 | .thread-injected-quick-actions .btn { 280 | box-shadow: none; 281 | } 282 | 283 | // Remove gradients quick action buttons 284 | .thread-list .list-item .list-column-HoverActions .action.action-trash { 285 | background: url('../static/images/thread-list-quick-actions/ic-quick-button-trash@2x.png') center 286 | no-repeat, 287 | @accent-primary; 288 | } 289 | 290 | // Remove gradients quick action buttons 291 | .thread-list .list-item .list-column-HoverActions .action.action-archive { 292 | background: url('../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png') 293 | center no-repeat, 294 | @accent-primary; 295 | } 296 | 297 | // Remove gradients quick action buttons 298 | .thread-list .list-item .list-column-HoverActions .action.action-snooze { 299 | background: url('../static/images/thread-list-quick-actions/ic-quickaction-snooze@2x.png') center 300 | no-repeat, 301 | @accent-primary; 302 | } 303 | 304 | // Change default color of star to gray 305 | .thread-list .thread-icon.thread-icon-star, 306 | .draft-list .thread-icon.thread-icon-star { 307 | filter: grayscale(100%); 308 | } 309 | 310 | // Change color on message button 311 | #message-list { 312 | // Labels 313 | .mail-label.removable { 314 | color: #24273A !important; 315 | background: @accent-primary !important; 316 | box-shadow: none !important; 317 | } 318 | } 319 | 320 | // Change color of unread mail dot 321 | .thread-list, .draft-list { 322 | .thread-icon { 323 | &.thread-icon-unread { 324 | filter: grayscale(100%); 325 | } 326 | } 327 | } 328 | 329 | //Changing the colour of the attachment icon 330 | .thread-icon:not(.thread-icon-unread):not(.thread-icon-star) { 331 | -webkit-filter: invert(100%); 332 | } 333 | img.content-dark { 334 | -webkit-filter: invert(100%); 335 | } 336 | img.content-light { 337 | -webkit-filter: invert(100%); 338 | } 339 | 340 | .mail-label { 341 | -webkit-filter: contrast(110%) brightness(85%); 342 | } 343 | -------------------------------------------------------------------------------- /mailspring.tera: -------------------------------------------------------------------------------- 1 | --- 2 | accent: lavender 3 | whiskers: 4 | version: 2.4.0 5 | matrix: 6 | - flavor 7 | - file: ["styles/email-frame.less", "styles/ui-variables.less", "package.json"] 8 | filename: "src/Catppuccin-{{ flavor.identifier | capitalize }}/{{ file }}" 9 | hex_format: "{{R}}{{G}}{{B}}" 10 | --- 11 | {%- if file == "package.json" -%} 12 | { 13 | "name": "Catppuccin-{{ flavor.identifier | capitalize }}", 14 | "title": "Catppuccin {{ flavor.identifier | capitalize }} Mailspring Theme", 15 | "displayName": "Catppuccin-{{ flavor.identifier | capitalize }}", 16 | "theme": "ui", 17 | "version": "1.1.1", 18 | "description": "Catppuccin theme - {{ flavor.identifier | capitalize }} flavour", 19 | "license": "MIT", 20 | "engines": { 21 | "mailspring": "*" 22 | } 23 | } 24 | {%- elif file == "styles/ui-variables.less" -%} 25 | @import "base/ui-variables"; 26 | 27 | @accent-primary: #{{ flavor.colors[accent].hex }}; 28 | @accent-primary-dark: @accent-primary; 29 | 30 | @background-primary: #{{ base.hex }}; 31 | @background-off-primary: #{{ base.hex }}; 32 | @background-secondary: #{{ surface0.hex }}; 33 | @background-tertiary: #{{ surface0.hex }}; 34 | 35 | @border-color-primary: #{{ mantle.hex }}; 36 | @border-color-secondary: #{{ mantle.hex }}; 37 | @border-color-tertiary: @accent-primary; 38 | @border-color-divider: #{{ mantle.hex }}; 39 | 40 | @text-color: #{{ text.hex }}; 41 | @text-color-subtle: #{{ subtext0.hex }}; 42 | @text-color-very-subtle: #{{ overlay1.hex }}; 43 | @text-color-inverse: #{{ text.hex }}; 44 | @text-color-inverse-subtle: #{{ subtext1.hex }}; 45 | @text-color-inverse-very-subtle: #{{ subtext1.hex }}; 46 | @text-color-heading: #{{ subtext1.hex }}; 47 | 48 | @text-color-link: @accent-primary; 49 | @text-color-link-hover: #{{ rosewater.hex }}; 50 | @text-color-link-active: @accent-primary; 51 | 52 | @btn-default-bg-color: #{{ surface0.hex }}; 53 | @dropdown-default-bg-color: #{{ surface0.hex }}; 54 | 55 | @input-bg: #{{ surface0.hex }}; 56 | @input-border: #{{ surface0.hex }}; 57 | 58 | @list-bg: #{{ surface0.hex }}; 59 | @list-border: #{{ surface0.hex }}; 60 | @list-selected-color: @text-color-inverse; 61 | @list-focused-color: #{{ base.hex }}; 62 | 63 | @toolbar-background-color: #{{ mantle.hex }}; 64 | @panel-background-color: #{{ mantle.hex }}; 65 | 66 | @text-color-prefilter: @text-base-prefilter; 67 | @text-base-prefilter: spin(#fff - @text-color, 180); 68 | 69 | //Line below the toolbar 70 | .sheet-toolbar { 71 | position: relative; 72 | -webkit-app-region: drag; 73 | border-bottom: 1px solid #{{ base.hex }}; 74 | } 75 | 76 | //Right panel, left border 77 | .column-MessageListSidebar { 78 | border-left: transparent; 79 | } 80 | 81 | //Message panel, right border 82 | .flexbox-handle-horizontal div { 83 | height: 100%; 84 | box-shadow: transparent; 85 | } 86 | 87 | // Message filter 88 | @message-filter: invert(100%) hue-rotate(180deg); 89 | @message-filter-undo: hue-rotate(-180deg) invert(120%); // white will be a bit fainter 90 | 91 | @text-base-prefilter: spin(#fff - @text-color, 180); 92 | //@orange-prefilter: @accent-primary; // set manually, as hue-rotate is only an approximation of spin 93 | //@orange-prefilter: spin(#fff - @accent-primary, 180); // set automatically, but suboptimally 94 | 95 | //to correct the colour of the links inside the mail body after applying the prefilter 96 | #inbox-html-wrapper > :not(table), #inbox-plain-wrapper > :not(table), #inbox-html-wrapper > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table), #inbox-html-wrapper > :not(table) > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table) > :not(table), #inbox-html-wrapper > :not(table) > :not(table) > :not(table) > :not(table), #inbox-plain-wrapper > :not(table) > :not(table) > :not(table) > :not(table) { 97 | a { 98 | color: #{{ surface0.hex }}; 99 | } 100 | } 101 | 102 | /* Badge with counter, secondary */ 103 | .item-count-box:not(.selected):not(.focused) { 104 | color: #{{ base.hex }}; 105 | box-shadow: 0 0.5px 0 rgba(24, 24, 37, 1), 0 -0.5px 0 rgba(24, 24, 37, 1), 0.5px 0 0 rgba(24, 24, 37, 1), -0.5px 0 0 rgba(24, 24, 37, 1); 106 | background: @accent-primary 107 | } 108 | 109 | /* Badge with counter, primary, selected */ 110 | .outline-view .item .item-count-box.alt-count { 111 | color: @accent-primary; 112 | background: #{{ base.hex }}; 113 | box-shadow: none; 114 | } 115 | 116 | /* Badge with counter, primary, not selected */ 117 | .outline-view .item .item-count-box.alt-count:not(.selected):not(.focused) { 118 | color: #{{ base.hex }}; 119 | background: @accent-primary; 120 | box-shadow: none; 121 | } 122 | 123 | /* tracking icon, unopened, unfocused */ 124 | .open-tracking-icon img.content-mask.unopened { 125 | background-color: #{{ surface1.hex }}; 126 | } 127 | 128 | /* tracking icon, mail list, unopened, focused */ 129 | .list-item.focused .open-tracking-icon img.content-mask.unopened, .list-item.selected .open-tracking-icon img.content-mask.unopened { 130 | background-color: #{{ surface1.hex }}; 131 | } 132 | 133 | /* tracking icon, mail list, opened, unfocused */ 134 | .open-tracking-icon img.content-mask.opened { 135 | background-color: #{{ text.hex }}; 136 | } 137 | 138 | /* tracking icon, opened, focused */ 139 | .list-item.focused .open-tracking-icon img.content-mask.opened, .list-item.selected .open-tracking-icon img.content-mask.opened { 140 | background-color: #{{ text.hex }}; 141 | } 142 | 143 | /* tracking icon, message list, opened */ 144 | .open-tracking-message-status.opened img.content-mask { 145 | background-color: #{{ text.hex }}; 146 | } 147 | 148 | /* tracking icon, message list, focused, more than one selected */ 149 | .thread-list.handler-split .list-item.selected { 150 | color: #{{ base.hex }}; 151 | } 152 | 153 | /* tracking icon, mail list, unopened, unfocused */ 154 | .open-tracking-icon img.content-mask.unopened { 155 | background-color: #{{ surface1.hex }}; 156 | } 157 | 158 | //Tracking icon, toolbar activity 159 | .toolbar-activity .unread-count.active { 160 | background: @accent-primary; 161 | color: #{{ base.hex }}; 162 | } 163 | 164 | //Tracking message status opened 165 | .open-tracking-message-status.opened { 166 | color: #{{ text.hex }}; 167 | } 168 | 169 | //Tracking message status unopened 170 | .open-tracking-message-status.unopened { 171 | color: #{{ overlay1.hex }}; 172 | } 173 | 174 | // Account switching icon 175 | .account-switcher img { 176 | zoom: 1 !important; 177 | max-width: 10px; 178 | max-height: 6px; 179 | transform: none; 180 | background-image: none; 181 | background-color: @text-color-very-subtle; 182 | -webkit-mask-repeat: no-repeat; 183 | -webkit-mask-image: url('data:image/svg+xml;utf8,'); 184 | } 185 | 186 | //Activity icon colour (without accent)// 187 | .toolbar-activity .activity-toolbar-icon { 188 | background: #{{ subtext0.hex }}; 189 | } 190 | 191 | //Search bar// 192 | .div.suggestions { 193 | &:hover { 194 | color:@accent-primary 195 | } 196 | } 197 | 198 | //Composer button // 199 | .button-dropdown.btn-emphasis .primary-item, .button-dropdown.btn-emphasis .secondary-picker, .button-dropdown.btn-emphasis .only-item { 200 | position: relative; 201 | color: #{{ base.hex }}; 202 | font-weight: 500; 203 | background: @accent-primary; 204 | box-shadow: none; 205 | border: 0px solid @accent-primary; 206 | } 207 | 208 | .button-dropdown.btn-emphasis .primary-item img.content-mask, .button-dropdown.btn-emphasis .secondary-picker img.content-mask, .button-dropdown.btn-emphasis .only-item img.content-mask { 209 | background-color: #{{ base.hex }}; 210 | } 211 | 212 | .button-dropdown.btn-emphasis .primary-item:active, .button-dropdown.btn-emphasis .secondary-picker:active, .button-dropdown.btn-emphasis .only-item:active { 213 | background: @accent-primary; 214 | } 215 | 216 | //Composer name// 217 | .tokenizing-field .token { 218 | background: linear-gradient(to bottom, #{{ surface0.hex }} 0%, #{{ surface1.hex }} 100%); 219 | } 220 | 221 | .tokenizing-field .token.selected, .tokenizing-field .token.dragging { 222 | color: #{{ base.hex }}; 223 | } 224 | 225 | .tokenizing-field .token.selected .action img, .tokenizing-field .token.dragging .action img { 226 | background-color: #{{ base.hex }}; 227 | } 228 | 229 | //Composer dropdown list// 230 | .menu .item.selected, .menu .item:active { 231 | background-color: #4e4947; 232 | color: #{{ text.hex }}; 233 | } 234 | 235 | .div.button-dropdown.open.open-down { 236 | background-color: #{{ text.hex }}; 237 | color: #{{ text.hex }}; 238 | } 239 | 240 | .menu .item.selected, .menu .item:active { 241 | background-color: @accent-primary; 242 | color: #{{ base.hex }}; 243 | } 244 | 245 | .menu .item.selected .primary, .menu .item:active .primary { 246 | color: #{{ base.hex }}; 247 | } 248 | 249 | .menu .item.selected .secondary, .menu .item:active .secondary { 250 | color: #{{ surface0.hex }}; 251 | } 252 | 253 | //Reply button 254 | .button-dropdown .primary-item, .button-dropdown .only-item { 255 | background: -webkit-gradient(linear, left top, left bottom, from(#{{ surface0.hex }}), to(#{{ surface1.hex }})); 256 | } 257 | 258 | .button-dropdown .secondary-picker { 259 | background: -webkit-gradient(linear, left top, left bottom, from(#{{ surface0.hex }}), to(#{{ surface1.hex }})); 260 | } 261 | 262 | .button-dropdown.open.open-down .secondary-items { 263 | background: #{{ surface0.hex }} 264 | } 265 | 266 | //Composer unfocused 267 | #message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap { 268 | background: #{{ surface0.hex }} 269 | } 270 | 271 | //Composer focused, borders 272 | #message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap.focused { 273 | box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 1.5px rgba(0, 0, 0, 0.08), 0 0 3px @accent-primary; 274 | } 275 | 276 | .composer-inner-wrap .composer-action-bar-wrap .composer-action-bar-content.unfocused { 277 | background-color: #{{ surface0.hex }}; 278 | } 279 | 280 | //Unsubscribe action 281 | .unsubscribe-action { 282 | color: @accent-primary; 283 | text-decoration: underline; 284 | } 285 | 286 | //Undo/redo floating message 287 | .undo-redo-toast .content { 288 | background: @accent-primary; 289 | } 290 | 291 | //Preferences, accounts details, background colour 292 | .preferences-wrap .container-accounts .accounts-content .account-details { 293 | background-color: #{{ base.hex }}; 294 | } 295 | 296 | //Preferences, account lists, background colour 297 | .nylas-editable-list .items-wrapper { 298 | background-color: #{{ surface0.hex }}; 299 | } 300 | 301 | 302 | // Remove box-shadow on thread list quick action buttons 303 | .thread-injected-quick-actions .btn { 304 | box-shadow: none; 305 | } 306 | 307 | // Remove gradients quick action buttons 308 | .thread-list .list-item .list-column-HoverActions .action.action-trash { 309 | background: url('../static/images/thread-list-quick-actions/ic-quick-button-trash@2x.png') center 310 | no-repeat, 311 | @accent-primary; 312 | } 313 | 314 | // Remove gradients quick action buttons 315 | .thread-list .list-item .list-column-HoverActions .action.action-archive { 316 | background: url('../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png') 317 | center no-repeat, 318 | @accent-primary; 319 | } 320 | 321 | // Remove gradients quick action buttons 322 | .thread-list .list-item .list-column-HoverActions .action.action-snooze { 323 | background: url('../static/images/thread-list-quick-actions/ic-quickaction-snooze@2x.png') center 324 | no-repeat, 325 | @accent-primary; 326 | } 327 | 328 | // Change default color of star to gray 329 | .thread-list .thread-icon.thread-icon-star, 330 | .draft-list .thread-icon.thread-icon-star { 331 | filter: grayscale(100%); 332 | } 333 | 334 | // Change color on message button 335 | #message-list { 336 | // Labels 337 | .mail-label.removable { 338 | color: #{{ base.hex }} !important; 339 | background: @accent-primary !important; 340 | box-shadow: none !important; 341 | } 342 | } 343 | 344 | // Change color of unread mail dot 345 | .thread-list, .draft-list { 346 | .thread-icon { 347 | &.thread-icon-unread { 348 | filter: grayscale(100%); 349 | } 350 | } 351 | } 352 | 353 | //Changing the colour of the attachment icon 354 | .thread-icon:not(.thread-icon-unread):not(.thread-icon-star) { 355 | -webkit-filter: invert(100%); 356 | } 357 | img.content-dark { 358 | -webkit-filter: invert(100%); 359 | } 360 | img.content-light { 361 | -webkit-filter: invert(100%); 362 | } 363 | 364 | .mail-label { 365 | -webkit-filter: contrast(110%) brightness(85%); 366 | } 367 | {%- else -%} 368 | // This file, with the hardcoded name 'email-frame.less', 369 | // can be used to modify the style of email messages in the 370 | // message list, i.e. the style of the contents of the 371 | // html iframe elements within the mailspring message list. 372 | // There are three requirements for doing so: 373 | // 1) The name of this file must be 'email-frame.less'. 374 | // 2) There cannot be an 'index.less' (which would otherwise 375 | // organizes the import order of the .less files). 376 | // 3) Style properties have to be placed inside a 377 | // '.ignore-in-parent-frame' parent selector. 378 | // The third requirement is actually more a best practice, 379 | // than a hard requirement. 380 | // These three requirements are a bit odd, but they are 381 | // an unavoidable consequence of the current implementation 382 | // of Mailspring. 383 | 384 | @import 'ui-variables'; 385 | 386 | // Display messages as dark as possible, without 387 | // sacrificing their design or readibility. 388 | // To this end, invert the colors of everyting that is not an image 389 | // or inside an html table. This makes content that was originally 390 | // meant to be read on a white background readible on a dark 391 | // background. At the same time, emails with a custom HTML formatting 392 | // are kept intact. 393 | // The broadly valid assumption is made here that in html table 394 | // emails the table is not nested deeper than 4 levels below the 395 | // inbox-html-wrapper. The only case I found so far where this 396 | // assumption is violated, is when tables become deeply nested 397 | // because of blockquotes in repleated forwards/replies. 398 | .ignore-in-parent-frame { 399 | #inbox-html-wrapper, #inbox-plain-wrapper { 400 | 401 | // Invert the color of everything in the message. 402 | color: @text-color-prefilter !important; 403 | blockquote { 404 | border-color: @text-color-prefilter; 405 | } 406 | filter: @message-filter; 407 | 408 | // Undo the color inversion for html tables, while 409 | // adding/restoring color elements for emails that 410 | // implicitly assume a white background. 411 | > table, 412 | > :not(table) > table, 413 | > :not(table) > :not(table) > table, 414 | > :not(table) > :not(table) > :not(table) > table { 415 | padding: 10px; 416 | color: black; 417 | background: white !important; 418 | a, a:hover, a:active { 419 | color: unset; 420 | } 421 | filter: @message-filter-undo; 422 | } 423 | 424 | // Undo the color inversion for all images that are not 425 | // part of html tables. 426 | > img, 427 | > :not(table) > img, 428 | > :not(table) > :not(table) > img, 429 | > :not(table) > :not(table) > :not(table) > img, 430 | > :not(table) > :not(table) > :not(table) > :not(table) img { 431 | filter: @message-filter-undo; 432 | } 433 | 434 | // Force a transparent background for emails that 435 | // are not based on html tables. 436 | > :not(table), 437 | > :not(table) > :not(table), 438 | > :not(table) > :not(table) > :not(table), 439 | > :not(table) > :not(table) > :not(table) > :not(table) { 440 | background: transparent !important; // e.g. sidebars in Stack Overflow emails 441 | } 442 | } 443 | } 444 | // see also composer.less! 445 | 446 | // The print version of the message requires the message 447 | // content to be black. The below selects the content that 448 | // needs to be converted to black in such a way that it only 449 | // applies to the print version. 450 | #print-header, 451 | h1.print-subject, 452 | .print-participants, 453 | #message-list #inbox-html-wrapper { 454 | color: black; 455 | a, a:hover, a:active { 456 | color: unset; 457 | } 458 | } 459 | 460 | // overwrite all color inversion filters with null operation 461 | // filters of a higher css specificity 462 | #message-list #inbox-html-wrapper { 463 | filter: unset; 464 | 465 | > table, 466 | > :not(table) > table, 467 | > :not(table) > :not(table) > table, 468 | > :not(table) > :not(table) > :not(table) > table { 469 | filter: unset; 470 | } 471 | 472 | > img, 473 | > :not(table) > img, 474 | > :not(table) > :not(table) > img, 475 | > :not(table) > :not(table) > :not(table) > img, 476 | > :not(table) > :not(table) > :not(table) > :not(table) img { 477 | filter: unset; 478 | } 479 | } 480 | {%- endif %} 481 | --------------------------------------------------------------------------------