├── .gitignore ├── screenshot └── custom-theme.png ├── package.json ├── LICENSE.md ├── styles ├── index.less └── ui-variables.less └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | /.DS_Store 2 | -------------------------------------------------------------------------------- /screenshot/custom-theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Foundry376/Mailspring-Theme-Starter/HEAD/screenshot/custom-theme.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "theme-starter", 3 | "title": "Starter Theme", 4 | "displayName": "Starter Theme", 5 | "theme": "ui", 6 | "version": "0.1.0", 7 | "description": "A great dark theme to start your own themes.", 8 | "license": "MIT", 9 | "engines": { 10 | "mailspring": "*" 11 | } 12 | } 13 | 14 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | ##MIT License 2 | 3 | Copyright 2017 Foundry 376, LLC 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | 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, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /styles/index.less: -------------------------------------------------------------------------------- 1 | /* 2 | Import our own variable file that inherits from Mailspring's base 3 | styles and overrides colors, margins, etc. to create our theme's 4 | overall design. 5 | 6 | Since most of the app uses these variables to style individual elements, 7 | we don't have to do much to create a totally different look. 8 | 9 | Note: This file needs to be named ui-variables.less so other 10 | stylesheets can call `@import "ui-variables";` and reference it. 11 | */ 12 | @import "ui-variables"; 13 | 14 | /* 15 | After changing variables to set a base for our theme, we can use 16 | specific, narrowly-scoped CSS rules to change other things. 17 | 18 | Tip: You can use the Developer Tools in Mailspring and "Inspect 19 | Element" to identify the DOM elements and styles you want to override. 20 | 21 | Tip: You only need to target the latest version of Chrome (eg Electron) 22 | here, so you can use modern CSS like -webkit-filter and -webkit-mask-image 23 | (which is used to make most of the icons in the app styleable via a 24 | background color.) 25 | */ 26 | .sheet-toolbar { 27 | border-bottom: 1px solid @border-color-divider; 28 | box-shadow: none; 29 | } 30 | 31 | .thread-icon:not(.thread-icon-unread):not(.thread-icon-star) { 32 | -webkit-filter: invert(100%); 33 | } 34 | img.content-dark { 35 | -webkit-filter: invert(100%); 36 | } 37 | img.content-light { 38 | -webkit-filter: invert(100%); 39 | } 40 | 41 | .mail-label { 42 | -webkit-filter: contrast(110%) brightness(85%); 43 | } 44 | 45 | #message-list .message-item-wrap .message-item-white-wrap { 46 | box-shadow: 0 0 0.5px rgba(255, 255, 255, 0.28), 47 | 0 1px 1.5px rgba(255, 255, 255, 0.08); 48 | } 49 | 50 | .thread-list .list-item:not(.unread):not(.selected):not(.focused) { 51 | color: #aaa; 52 | } 53 | -------------------------------------------------------------------------------- /styles/ui-variables.less: -------------------------------------------------------------------------------- 1 | /* 2 | Include the standard variables from Mailspring's base theme: 3 | https://github.com/Foundry376/Mailspring/blob/master/app/static/style/base/ui-variables.less 4 | */ 5 | @import "base/ui-variables"; 6 | 7 | @gray-base: #ffffff; 8 | @gray-darker: darken(@gray-base, 13.5%); 9 | @gray-dark: darken(@gray-base, 20%); 10 | @gray: darken(@gray-base, 33.5%); 11 | @gray-light: darken(@gray-base, 46.7%); 12 | @gray-lighter: darken(@gray-base, 92.5%); 13 | @white: #0a0a0a; 14 | 15 | @accent-primary: #58b660; 16 | @accent-primary-dark: darken(@accent-primary, 10%); 17 | 18 | @background-primary: #212121; 19 | @background-off-primary: #212121; 20 | @background-secondary: #121212; 21 | @background-tertiary: #6d7987; 22 | 23 | @border-color-primary: lighten(@background-primary, 10%); 24 | @border-color-secondary: lighten(@background-secondary, 10%); 25 | @border-color-tertiary: lighten(@background-tertiary, 10%); 26 | @border-color-divider: @border-color-secondary; 27 | 28 | @text-color: #eee; 29 | @text-color-subtle: fadeout(@text-color, 20%); 30 | @text-color-very-subtle: fadeout(@text-color, 40%); 31 | @text-color-inverse: white; 32 | @text-color-inverse-subtle: fadeout(@text-color-inverse, 20%); 33 | @text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%); 34 | @text-color-heading: #fff; 35 | 36 | @text-color-link: @accent-primary; 37 | @text-color-link-hover: @accent-primary-dark; 38 | @text-color-link-active: @accent-primary-dark; 39 | 40 | @btn-default-bg-color: lighten(@background-primary, 5%); 41 | @dropdown-default-bg-color: #404040; 42 | 43 | @input-bg: #2e2e2e; 44 | @input-border: @border-color-divider; 45 | 46 | @list-bg: #333; 47 | @list-border: #383838; 48 | @list-selected-color: @text-color-inverse; 49 | @list-focused-color: @text-color; 50 | 51 | @toolbar-background-color: #121212; 52 | @panel-background-color: #121212; 53 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mailspring Theme Starter 2 | 3 | The Mailspring Theme Starter is a basic starting point for creating a theme for 4 | the [Mailspring](http://www.getmailspring.com/) email client. 5 | 6 | 7 | 8 | ## Getting Started 9 | 10 | Creating a new theme in Mailspring is easy! Here's how you can do it. 11 | 12 | 1. Fork this repo or download the code. Add a name, display name, title, and 13 | description for your theme to `package.json`, and change the directory name 14 | to match. 15 | 16 | 2. Open Mailspring and install the theme by going to `Mailspring > Install New Theme...` 17 | and selecting the directory. 18 | 19 | 3. Choose `Developer > Run With Debug Flags` for easier debugging. 20 | 21 | 4. Now, you can start playing with the theme! 22 | Depending on your OS, the theme is installed in one of the following location: 23 | 24 | | OS | Location | 25 | |--------------|--------------------------------------------------------------| 26 | | macOS | ~/Library/Application Support/Mailspring/packages/THEME_NAME | 27 | | Ubuntu native| ~/.config/Mailspring/packages/THEME_NAME | 28 | | Ubuntu Snap | ~/snap/mailspring/common/packages/THEME_NAME | 29 | | Windows | %appdata%\Mailspring\packages\THEME_NAME | 30 | 31 | Open the theme in this directory and work on it here. 32 | 33 | Most of Mailspring's React components are derived from the core variables defined in `ui-variables.less`, 34 | and any changes you make there will override the defaults for Mailspring. 35 | You can also add more LESS files in `styles` (ideally, separated into logical components 36 | like `thread-list.less`) to make your own specific changes. To reload the theme, 37 | just open the console (`Developer > Toggle Developer Tools`) and type 38 | 39 | ``` 40 | AppEnv.themes.setActiveTheme('ui-light'); 41 | AppEnv.themes.setActiveTheme('your-theme-name'); 42 | ``` 43 | 44 | 5. Once you're happy with your theme, check how it looks in the theme picker 45 | (`Mailspring > Change Theme...`). We use your UI variables to pull the 46 | colors, but if you want to add your own selections to the color palette, 47 | create a `theme-colors.less` file that includes any of the variables that you 48 | want to change, and they'll only affect the theme preview. Here are the 49 | variables, on the left, with the part of the theme preview that they match: 50 | 51 | ``` 52 | @background-secondary: BACKGROUND_COLOR 53 | @text-color: TEXT_COLOR, FIRST_SWATCH_COLOR 54 | @component-active-color: MIDDLE_SWATCH_COLOR 55 | @toolbar-background-color: LAST_SWATCH_COLOR 56 | @panel-background-color: STRIP_COLOR 57 | ``` 58 | 59 | ## Structure 60 | 61 | ``` 62 | . 63 | ├── styles # All stylesheets 64 | | ├── index.less # Main LESS file to import your stylesheets 65 | │ ├── ui-variables.less # UI variables that override N1's defaults 66 | │ ├── theme-colors.less # Theme colors for theme preview (optional) 67 | ├── package.json # Metadata about the theme 68 | ├── LICENSE.md # License with usage rights 69 | └── README.md # Info about your theme and how to use it 70 | ``` 71 | --------------------------------------------------------------------------------