Anyone is welcome to contribute to the development of this theme. It can be a lot of work to keep up on, and I'll take help wherever i can get it :)
If you're keen to contribute, start by forking the repo and cloning it to your computer.
Note: To use the development version, you must first install the production version (apm uninstall seti-ui), then and run the following commands:
# To install the local version as an Atom Theme
apm link .
# Open with dev mode:
atom --dev .Once this is complete you will be able to edit seti files directly in Atom and see your changes in real time.
Once you are satisfied, with your updates, commit your change, push them to your fork and submit a pull request with a description of the changes that you made.
Once you're done working locally and ready to install the production version again, simply run apm unlink . from the root of the seti-ui project.
The first thing you should probably do is review the guide on creating a theme in the flight manual to make sure you have a basic understanding of how themes in Atom work. Aside from that, here's the basic you need to know on how Seti is structured:
This is the main entry point for all styles. However you should not be writing any actual code in here. All less files live in the styles directory and are imported into index.less
Hopefully the file structure is pretty easy to understand and follow, but here's some specifics you're likely to want to find:
If you want to modify styles for a specific plugin, please place the file in this directory, and then link to it in the index.less file.
All color variables are stored in this file. Theme colors have been carefully chosen, so please don't modify them unless you have a good reason.
This file is automatically generated, and changes are not tracked in git, so do not modify it.
The process of adding file icons is still a bit complex, but it has been greatly simplified in 1.0. It does however require that you have node and gulp installed.
Once you have these, you will need to open a terminal window, navigate to the seti-ui folder and run npm install (note you only need to do this once).
Once everything is setup, follow these steps any time you want to add a new icon:
-
Create an SVG icon with the name of the language, and save it to the
iconsfolder (do not use any spaces or special characters) -
Navigate to the seti-ui folder in your terminal and run
gulp font(this will add the new svg file to our icon font, update our file as well as the less file with the mixins we'll need to link to the icon later.) -
Lastly, open styles/icons/mapping.less and create a link for the icon you just added with the
.icon-setmixin. Assuming you were adding an icon for Sass it might look something like this:.icon-set('.scss', 'sass', @pink)
The first parameter '.scss' is the file extension you want to target, the second parameter 'sass' is the name of the icon you just created, without the extension (sass.svg), and the last parameter @pink indicated what color the icon should be.
There are currently 9 supported icon colors: - @blue - @grey - @green - @orange - @pink - @purple - @red - @white - @yellow
While, you can add additional colors to styles/ui-variable.less, but please do not do this unless you find it absolutely necessary. If you do add another color, please make sure that matches the general feel of the other colors. If you add something really bright or really pale, your pull request will likely be declined.
You will need to do this once for every extension, you want to target. For example, ir you want to target both .sass and .scss extensions, you would add the following:
.icon-set('.sass', 'sass', @pink);
.icon-set('.scss', 'sass', @pink);