mirror of
https://github.com/atom/atom.git
synced 2026-01-24 06:18:03 -05:00
77 lines
1.9 KiB
Markdown
77 lines
1.9 KiB
Markdown
{{{
|
|
"title": "Creating a Theme"
|
|
}}}
|
|
|
|
# Creating a Theme
|
|
|
|
## Overview
|
|
|
|
* Explain the difference between ui themes and syntax themes
|
|
|
|
## Getting Started
|
|
|
|
* What do I need to install?
|
|
* Atom - to edit text
|
|
* Git - to track and distribute your themes
|
|
* What do I need to know?
|
|
* CSS/LESS - as that's what themes are written in
|
|
* Devtools - so you can find the selector you're looking for.
|
|
* Is there an example I can start from?
|
|
* Yes, you can clone https://github.com/atom/solarized-dark-syntax
|
|
|
|
# Create a minimal syntax theme
|
|
|
|
```bash
|
|
cd ~/.atom/packages
|
|
mkdir my-theme
|
|
cd my-theme
|
|
git init
|
|
mkdir stylesheets
|
|
apm init --theme
|
|
cat > index.less <<END
|
|
@import "./stylesheets/base.less";
|
|
@import "./stylesheets/overrides.less";
|
|
END
|
|
cat > stylesheets/base.less <<END
|
|
@import "ui-variables";
|
|
|
|
.editor {
|
|
color: fade(@text-color, 20%);
|
|
}
|
|
END
|
|
cat > stylesheets/overrides.less <<END
|
|
@import "ui-variables";
|
|
|
|
.editor {
|
|
color: fade(@text-color, 80%);
|
|
}
|
|
END
|
|
```
|
|
|
|
### Important points
|
|
|
|
* Notice the theme attribute in the package.json file (generated by apm). This
|
|
is specific to Atom and required for all theme packages. Otherwise they won't
|
|
be displayed in the theme chooser.
|
|
* Notice the ui-variables require. If you'd like to make your theme adapt to the
|
|
users choosen ui theme, these variables allow you to create your own colors
|
|
based on them.
|
|
|
|
## How to create a UI theme
|
|
|
|
* Needs to have a file called ui-variables and it must contain the following
|
|
variables:
|
|
* A list of variables from @benogle's theme refactor.
|
|
|
|
## How to just override UI colors
|
|
|
|
* Not interested in making an entire theme? Not to worry, you can override just
|
|
the colors.
|
|
* Create a theme as above but just include a single file in your `stylesheets`
|
|
directory called `ui-variables.less`
|
|
* IMPORTANT: This theme must come before
|
|
|
|
## How to create a syntax theme
|
|
|
|
* Explain the idea behind grammars/tokens and classes you'd want to override.
|