mirror of
https://github.com/atom/atom.git
synced 2026-02-04 19:54:59 -05:00
84 lines
3.1 KiB
Markdown
84 lines
3.1 KiB
Markdown
# Themes
|
|
|
|
## Selecting A Theme
|
|
|
|
Atom comes bundles with two themes "Atom - Dark" and "Atom - Light".
|
|
|
|
Because Atom themes are based on CSS, it's possible to have multiple themes
|
|
active at the same time. For example, you'll usually select a theme for the UI
|
|
and another theme for syntax highlighting. You can select themes by specifying
|
|
them in the `core.themes` array in your `config.cson`:
|
|
|
|
```coffee-script
|
|
|
|
core:
|
|
themes: ["atom-light-ui", "atom-light-syntax"]
|
|
# or, if the sun is going down:
|
|
# themes: ["atom-dark-ui", "atom-dark-syntax"]
|
|
```
|
|
|
|
## Installing A Theme
|
|
|
|
You install themes by placing them in the `~/.atom/themes` directory. The most
|
|
basic theme is just a `.css` file. More complex themes occupy their own folder,
|
|
which can contain multiple stylesheets along with an optional `package.cson`
|
|
file containing a manifest to control their load-order:
|
|
|
|
```text
|
|
~/.atom/themes/
|
|
rockstar.css
|
|
rainbow/
|
|
package.json
|
|
core.css
|
|
editor.css
|
|
tree-view.css
|
|
```
|
|
|
|
package.cson:
|
|
```coffee-script
|
|
stylesheets: ["core.css", "editor.less", "tree-view.css"]
|
|
```
|
|
|
|
The `package.cson` file specifies which stylesheets to load and in what order
|
|
with the `stylesheets` key. If no manifest is specified, all stylesheets are
|
|
loaded in alphabetical order when the user selects the theme.
|
|
|
|
## TextMate Compatibility
|
|
|
|
If you place a TextMate theme (either `.tmTheme` or `.plist`) in the `themes`
|
|
directory, it will automatically be translated from TextMate's format to CSS
|
|
so it works with Atom. There are a few slight differences between TextMate's
|
|
semantics and those of stylesheets, but they should be negligible in practice.
|
|
|
|
## Authoring A Theme
|
|
|
|
If you understand CSS, you can write an Atom theme easily. Your theme can style
|
|
Atom's user interface, specify the appearance of syntax-highlighted code, or
|
|
both. For making a syntax highlighting theme, refer to
|
|
[section 12.4 of the TextMate Manual](http://manual.macromates.com/en/language_grammars.html)
|
|
for a list of the common scopes used by TextMate grammars. You'll just need to
|
|
translate scope names to CSS classes. To theme Atom's user interface, take a
|
|
look at the existing light and dark themes for an example. Pressing `alt-meta-i`
|
|
and inspecting the Atom's markup directly can also be helpful.
|
|
|
|
## Theme Extensions (Not Yet Implemented)
|
|
|
|
A theme may need to be extended to cover DOM elements that are introduced by a
|
|
third-party Atom package. When a package is loaded, stylesheets with the same
|
|
name as the package will automatically be loaded from the `packages` directory
|
|
of active themes:
|
|
|
|
```text
|
|
~/.atom/themes/
|
|
midnight/midnight.less
|
|
midnight/packages/terminal.less
|
|
midnight/packages/tree-view.less
|
|
```
|
|
|
|
In the example above, if the `midnight` theme is active, its `terminal` and
|
|
`tree-view` stylesheets will be loaded automatically if and when those packages
|
|
are activated. If you author an extension to a theme consider sending its author
|
|
a pull request to have it included in the theme by default. Package-specific
|
|
theme stylesheets need not be listed in the theme's `package.json` because they
|
|
will be loaded automatically when the package is loaded.
|