Building a theme with a theme engine and live reload?

Question

Building a theme with a theme engine and live reload?

equinusocio opened this issue 9 years ago · comments

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?

Ben Gotow · Answer 1 · Sun Oct 11 2015 03:06:15 GMT+0800 (China Standard Time)

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:

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.

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
    ]

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.

Mattia Astorino · Answer 2 · Sun Oct 11 2015 19:01:22 GMT+0800 (China Standard Time)

@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?

Ben Gotow · Answer 3 · Tue Oct 13 2015 01:30:26 GMT+0800 (China Standard Time)

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).

Michael Grinich · Answer 4 · Sat Oct 24 2015 06:20:27 GMT+0800 (China Standard Time)

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/

Noah Buscher · Answer 5 · Thu Dec 17 2015 07:53:14 GMT+0800 (China Standard Time)

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

Mattia Astorino · Answer 6 · Fri Dec 18 2015 18:18:12 GMT+0800 (China Standard Time)

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

Mattia Astorino · Answer 7 · Fri Dec 25 2015 01:58:28 GMT+0800 (China Standard Time)

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

Daniel Bayley · Answer 8 · Tue Jan 12 2016 08:06:44 GMT+0800 (China Standard Time)

@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'

Noah Buscher · Answer 9 · Tue Jan 12 2016 11:20:29 GMT+0800 (China Standard Time)

@danielbayley Dig that. 👏

Mattia Astorino · Answer 10 · Tue Jan 12 2016 14:51:33 GMT+0800 (China Standard Time)

Nice! thanks

Vlastimil Fiser · Answer 11 · Thu Jun 16 2016 18:49:07 GMT+0800 (China Standard Time)

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!

Daniel Bayley · Answer 12 · Thu Jun 16 2016 22:40:43 GMT+0800 (China Standard Time)

+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!

Vlastimil Fiser · Answer 13 · Fri Jun 17 2016 01:36:28 GMT+0800 (China Standard Time)

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.

Daniel Bayley · Answer 14 · Fri Jun 17 2016 01:59:18 GMT+0800 (China Standard Time)

@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.