Skip to content

Latest commit

 

History

History
executable file
·
135 lines (81 loc) · 6.64 KB

README.md

File metadata and controls

executable file
·
135 lines (81 loc) · 6.64 KB
Raw

Seti UI

Gitter GitHub

Seti-UI Theme, and VS Code icon pack

This repo contains the latest version of the Seti UI theme. It contains the default icons used in VS Code.

The theme is a dark interface theme crafted originally for Atom, with subtle colors that are meant to be easy on the eyes. It includes custom file icons, and new user configurable settings.

Adding File Icons

Given that changes to this repo are included in VS Code, we are somewhat conservative with adding new file icons because it can affect the performance for everyone. This means we only accept PRs for file icons for popular languages or toolsets. For example does your language/tool have package downloads or vscode extensions with tens of thousands of users? If no, then there's a possibility we will deny your pull request.

Adding an icon requires 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).

Icon Style:

  • Use a single color, the colors will be overwritten to one of the 9 below when shipped
  • You want to aim for a frame of 32x32 with the icon centered at and being about 18 x 18 big. There's a sketch file with examples in this repo.

Once everything is setup, follow these steps any time you want to add a new icon:

  1. Create an SVG icon with the name of the language, and save it to the icons folder (do not use any spaces or special characters)

  2. Open styles/components/icons/mapping.less and create a link for the icon you just added with the .icon-set mixin. 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-variables.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, if you want to target both .sass and .scss extensions, you would add the following:

.icon-set('.sass', 'sass', @pink);
.icon-set('.scss', 'sass', @pink);
  1. Run gulp svg to minimize the svg files.

Previewing in VS Code

This is a bit of work, but the steps:

  1. Make your changes, and run gulp icon
  2. Clone VS Code, and make sure that it has the same parent as seti-ui
  3. Follow the VS Code instructions to set up a local dev copy
  4. Once you've confirmed that, you need to update the icons. cd to extensions/theme-seti and run node build/update-icon-theme.js
  5. Make sure that inside extensions/theme-seti/build/update-icon-theme.js - let FROM_DISK is set to true

Then, you can make you SVG changes, re-run gulp icon, node build/update-icon-theme.js and re-launch your dev copy of VS Code.

Please don't include the built files in your Pull Requests, because it can cause conflicts between PRs and we only need to do this during deploys otherwise.

Please Note: This is the Seti interface theme for VS Code only

If these are not the droids you're looking for, may I point you in the direction of these great ports:

Bugs

If you find a bug, please do add a bug report. However, first make sure it is for Seti UI in VS Code. I only support the VS Code versions, please check the links above to report a bug on another platform.

Installation

Seti is pre-installed in VS Code, so no need to install it.

Contributing

Anyone is welcome to contribute to the development of this theme. If can be a lot of work to keep up on, and I'll take help wherever I can get it :)

1. Fork

If you're keen to contribute, start by forking the repo and cloning it to your computer.

2. Make Some Changes

Once this is complete you will be able to edit seti files directly in VS Code and see your changes in real time.

3. Create a Pull Request

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.

4. Unlink

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.

Deploying

Run npm publish

Current Icons

Screenshot

Custom App Icons

If you'd like a new app icon to match the look & feel of Seti, feel free to use one of these:

Screenshot Screenshot Screenshot