Giter Club home page Giter Club logo

mailspring-theme-starter's Introduction

Mailspring Theme Starter

The Mailspring Theme Starter is a basic starting point for creating a theme for the Mailspring email client.

Getting Started

Creating a new theme in Mailspring is easy! Here's how you can do it.

  1. Fork this repo or download the code. Add a name, display name, title, and description for your theme to package.json, and change the directory name to match.

  2. Open Mailspring and install the theme by going to Mailspring > Install New Theme... and selecting the directory.

  3. Choose Developer > Run With Debug Flags for easier debugging.

  4. Now, you can start playing with the theme!
    Depending on your OS, the theme is installed in one of the following location:

    OS Location
    macOS ~/Library/Application Support/Mailspring/packages/THEME_NAME
    Ubuntu native ~/.config/Mailspring/packages/THEME_NAME
    Ubuntu Snap ~/snap/mailspring/common/packages/THEME_NAME
    Windows %appdata%\Mailspring\packages\THEME_NAME

    Open the theme in this directory and work on it here.

    Most of Mailspring's React components are derived from the core variables defined in ui-variables.less, and any changes you make there will override the defaults for Mailspring. You can also add more LESS files in styles (ideally, separated into logical components like thread-list.less) to make your own specific changes. To reload the theme, just open the console (Developer > Toggle Developer Tools) and type

    AppEnv.themes.setActiveTheme('ui-light');
    AppEnv.themes.setActiveTheme('your-theme-name');
    
  5. Once you're happy with your theme, check how it looks in the theme picker (Mailspring > Change Theme...). We use your UI variables to pull the colors, but if you want to add your own selections to the color palette, create a theme-colors.less file that includes any of the variables that you want to change, and they'll only affect the theme preview. Here are the variables, on the left, with the part of the theme preview that they match:

    @background-secondary:     BACKGROUND_COLOR
    @text-color:               TEXT_COLOR, FIRST_SWATCH_COLOR
    @component-active-color:   MIDDLE_SWATCH_COLOR
    @toolbar-background-color: LAST_SWATCH_COLOR
    @panel-background-color:   STRIP_COLOR
    

Structure

.
├── styles                 # All stylesheets
|   ├── index.less             # Main LESS file to import your stylesheets
│   ├── ui-variables.less  # UI variables that override N1's defaults
│   ├── theme-colors.less  # Theme colors for theme preview (optional)
├── package.json           # Metadata about the theme
├── LICENSE.md             # License with usage rights
└── README.md              # Info about your theme and how to use it

mailspring-theme-starter's People

Contributors

bacharakis avatar bengotow avatar chrisfhey avatar icelk avatar toxicmender avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mailspring-theme-starter's Issues

Main reading panel color

I have created my own theme. However some emails are not displaying correctly due to the background color being #2D2C2E so sometimes the text color does not show. Is there any way to change this particular panel to white (#fff).
mailspring

What is the license?

The LICENSE.md file is a copy of the MIT license, but the package.json specifies the license as GPL-3.0. Which license is actually in use?

How do I uninstall a theme?

As titled. I'm on Windows10, and after manually deleting a theme installed under C:\Users\<my name>\AppData\Roaming\Mailspring\packages, I can still see the theme as an option under Mailspring's "Change Theme...".

Disable Developer Flags

Hi,
Where can I disable developer flags again?
When I open mailspring now, I get an empty electron environment and that's really not what I had in mind to alter the theme starter.

Cheers!

Dark theme vs. Theme Starter version

Hi there,

I made a theme based on the theme starter but it seems to me that the theme starter version is not exactly the same version status as the "Dark" theme shipped with the release. Some of the details do not match – especially in Mail view – and the composer still appears in white.

Is it possible to grab one of the main themes contained in Mailspring to modify them?

Thanks and best regards
Timo

Make Repository a Template Repository

I feel that this repository would work well as a template repository, since this serves as a template for Mailspring themes.

From the link:

Creating a repository from a template is similar to forking a repository, but there are important differences:

  • A new fork includes the entire commit history of the parent repository, while a repository created from a template starts with a single commit.
  • Commits to a fork don't appear in your contributions graph, while commits to a repository created from a template do appear in your contribution graph.
  • A fork can be a temporary way to contribute code to an existing project, while creating a repository from a template starts a new project quickly.

Themeing Icons

Hello,
I have started a theme based on the Breeze look from KDE Plasma¹ (Opensuse, Kubuntu, etc.) . I could do most of the reskinning from the starter theme, the Taiga theme (from the git) and the Agapanthus theme (which I found online).

There are some elements which are very difficult to skin.

  1. The sidebar: Some of the id's of the items that hold the folder names and icons are predicatbles, i.e. id="Unread", others are not human readable, i.e. id="Jm47j8CLKMvTHR8RXMxm2PmDsK86ai3BYnMyb4ow6". I am concerned that these could be computer dependent, and not work properly. But I did not find any other way to identify these items properly.
  2. The buttons which are at the bottom of the mail composition window or panel are even harder, and I did not manage to skin most of them. You can see the commented-out failed code in styles/email-frame.less. In the button with a handle (like the reminder button) it is especially difficult to modify the button without changing the handle. Do you have any example were this is done, if it is doable in an official way?

kind regards, and thank you for you great software

[1] https://github.com/paulatz/Mailspring-Theme-Breeze-Light

How to change icon image

Hi, I want to change the icon-star image in my theme. So I created a file thread-list.less, then I added these lines for my icon that resides in my template folder:

.thread-list .thread-icon.thread-icon-star,
.draft-list .thread-icon.thread-icon-star {
  background-image: url("../images/[email protected]");
}

It seems to not working, what is the correct path to rely on the images folder on my theme?

Note : The CSS is loaded right, if I put background-image: none; The icon disapear.

Mailspring won't open after installing a theme

Hi,

I downloaded this repo. I have Added a name, display name, title, and description for my theme to package.json, and changed the directory name to match.

Opened N1 and install the theme by going to Mailspring > Install New Theme... and selecting the directory.

Choose Developer > Run With Debug Flags for easier debugging.

Now my client won't open. In console I have error:
ln: failed to create symbolic link '/myhomefolder/snap/mailspring/209/.config/gtk-2.0/gtkfilechooser.ini': File exists
Gtk-Message: Failed to load module "gail"
Gtk-Message: Failed to load module "atk-bridge"
Gtk-Message: Failed to load module "canberra-gtk-module"
Running database migrations
App load time: 247ms

{"error":null}

In mailspring's windows I have error:
Error: Failed to execute 'add' on 'DOMTokenList': The token provided ('theme-Dark Blue') contains HTML space characters, which are not valid in tokens.
at ThemeManager.activateThemePackage (/src/theme-manager.es6:135:29)
at new AppEnvConstructor (/src/app-env.es6:95:17)
at Object. (/src/secondary-window-bootstrap.es6:18:17)
at Object. (/src/secondary-window-bootstrap.es6:26:1)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at setupWindow (file:///snap/mailspring/209/usr/share/mailspring/resources/app.asar/static/index.js:47:3)
at window.onload (file:///snap/mailspring/209/usr/share/mailspring/resources/app.asar/static/index.js:75:5)

Can you please help me fix this issue?

Need help identifying component

Screenshot from 2021-07-17 20-35-39

Hi. How can I color only this part as highlighted in red. Need to keep all other colors constant. What is the name of this section? Got no experience, was just modifying another preexisting themes so detailed instructions would be appreciated. Thank you

theme component in ubuntu.

as mentioned in the Readme file : ~/Library/Application Support/Mailspring/packages/THEME_NAME
where i can find the component directory in ubuntu.
I am not able to find it here.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.