nylas/nylas-mail

Building a theme with a theme engine and live reload?

equinusocio opened this issue · 14 comments

equinusocio commented

Hi, is there a way to build a custom theme? I want to improve the dark version or build an external package that override the default theme. It's possibile? how i can set-up the workflow?

bengotow commented

Hey @equinusocio — yep, you totally can. We're still working on improving the workflow, though. Would love to get your thoughts.

Here's how to get started:

  1. Download the N1 source and grab the ui-dark package out of the internal_packages folder. Copy it to ~/.nylas/packages, and rename it something else, like ui-custom. Open the package.json file in that theme folder and rename it there as well.

ui-dark is a very simple theme that overrides some of our LESS style variables. In your theme, you can change variables to override the default theme (ui-light), or style individual things. In an ideal world, you'd be able to achieve almost everything you want by changing variables. Most of our React components are derived from 30 or so core variables.

  1. Right now, our preferences interface only allows you to choose between the light and dark theme under "Appearance". We'll be making a real theme picker sometime soon. In the meantime, open ~/.nylas/config.cson, and add / edit core.themes to include your theme. It should look like this:
"*":
  env: "staging"
  nylas:
    accounts: [
       ...
    ]
  core:
    themes: [
      "ui-light"
      "ui-custom"  << your theme name here
    ]
  1. Now your theme will be loaded when you run N1. We haven't built live-reloading support for theme packages yet, but it may be something we can pull from the Atom text editor, since N1's theme-manager is based on theirs! If you open the console (Developer > Toggle Developer Tools), you can type atom.themes.activateThemes() to reload your theme on the fly.

To check that your theme is working, try changing the @background-primary in ui-variables.less within your theme. It's used as the primary background color of the thread list, so it should be easy to spot.

equinusocio commented

@bengotow thank you. I will try to do this and if it work i will start to make a theme. You also accept PR with ui-light/dark improvements?

bengotow commented

Yep—we'd be happy to accept pull requests, especially for the dark theme (which admittedly needs a lot of work!) We're pretty happy with the light theme, but we are looking for platform-specific improvements. (For example, removing rounded edges on Windows, etc.) For those, you can use the platform class to create custom styles (body.platform-win32).

grinich commented

Hey @equinusocio -- would love for you to create a new theme! Here's where we are going to list N1 packages for now (n1-packages). Join our community Slack channel to chat some more! http://slack-invite.nylas.com/

noahbuscher commented

If you want a repo to fork or check out as an example, Taiga theme is under active development. 😊

equinusocio commented

👍 thanks @noahbuscher. How do you work with auto-reload? You use atom.themes.activateThemes()?

equinusocio commented

There is now a method to reload themes when dev enabled?

danielbayley commented

@equinusocio Until all this is implemented properly I just did the following solution for now…

init.coffee:

NylasEnv.commands.add 'body',
    'window:reload-theme': () -> atom.themes.activateThemes()

keymap.cson:

'body': # UI
    'cmdctrl-alt-r': 'window:reload'
    'cmdctrl-alt-r t': 'window:reload-theme'
  • 👍1
  • 🎉1
noahbuscher commented

@danielbayley Dig that. 👏

equinusocio commented

Nice! thanks

vlafiser commented

Where I need to edit the files like init.coffee and keymap.cson please? I can't find it. Thanks for the help! Livereload will be really useful for the case of template for Nylas!

danielbayley commented

+1 for live reload!

@vlafiser I don't think those files exist by default IIRC. But since N1 is a fork of Atom, you can create them in your NYLAS_HOME directory and N1 will load them.

I hope they don't remove this functionality!

vlafiser commented

Thanks @danielbayley !

I don't understant of it so much, sorry about it. So, I need to create these two files (init.coffee and keymap.cson) at NYLAS_HOME folder, right? Then the reload will works? I can't find the folder here at my Mac...

I'm editing template without the live reload yet and it's bad experience so that will be really helpful.

Thanks guys and sorry for the noob question!
V.

danielbayley commented

@vlafiser NYLAS_HOME just refers to the environment variable which (if exists) contains the path of the folder where N1 is storing it's data. By convention on a Mac this should be ~/Application Support/Nylas…

If you haven't deliberately set that environment variable (which obviously you won't have done if you didn't know about it) then it won't exist and the folder will be ~/.nylas I think by default.

See also issue #674.