github/atom
1
1
Fork 0
mirror of https://github.com/atom/atom.git synced 2026-04-28 03:01:47 -04:00
Code Issues Packages Projects Releases Wiki Activity

📝 Clarify a few points about themes

Browse Source
This commit is contained in:
Matt Colyer
2013-10-15 15:20:33 -07:00
parent 541d25787b
commit fc4750bcd5
1 changed files with 15 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/creating-a-theme.md
View File

@@ -1,20 +1,18 @@
# Creating a Theme
## Overview
Atom is built using web technologies, the interface is rendered using HTML and
it's styled via [LESS] (a superset of CSS). Don't worry if you haven't
heard of LESS before, it's just like CSS but with a few handy extensions.
Atom's interface is rendered using HTML and it's styled via [LESS] (a superset
of CSS). Don't worry if you haven't heard of LESS before, it's just like CSS but
with a few handy extensions.
Since CSS is the basis of the theming system, we can load multiple themes within
Atom and it behaves just like a website. Themes loaded first are overridden by
Atom and they behaves just as they would on a website. Themes loaded first are overridden by
themes which are loaded later (the order is controlled from within the Settings
pane).
This flexibility is helpful for users which prefer a light interface with a dark
syntax theme. Atom only has interface and syntax themes currently but it's easy
see how one might want to create their own language specific syntax theme for
very specific styling.
syntax theme. Atom currently has interface and syntax themes but it's easy see
how one might want to create their own language specific syntax theme for very
specific styling.
## Getting Started
@@ -22,15 +20,15 @@ To create your own theme you'll need a few things:
* A working install of [Atom], so you can work on your new theme.
* A working install of [git] to track changes.
* A [GitHub] account, so you can distribute your themes.
* And a [GitHub] account, so you can distribute your themes.
Themes are pretty straight forward but it's still helpful to be familiar with
a few things before starting:
* LESS is a superset of CSS but it's got some really handy features like
variables. If you aren't familiar with it's syntax take a few minutes
* LESS is a superset of CSS but it has some really handy features like
variables. If you aren't familiar with its syntax take a few minutes
to [familiarize yourself][less-tutorial].
* Atom uses Chrome at it's core, so you can use Chrome devtools to
* Atom uses Chrome at its core, so you can use Chrome devtools to
inspect the current state of the interface. Checkout Google's
[extensive tutorial][devtools-tutorial] for a short introduction.
@@ -49,8 +47,8 @@ a few things before starting:
of your new theme in action.
1. Open a terminal, find your new theme's directory, initialize the git
repository and push it to repository on GitHub.
1. Once you're ready for others to use your theme run `apm publish` from within
that directory to make it available to other Atom users.
1. Once you're ready for others to use your theme, run `apm publish` from within
that directory to make it available.
## Interface Themes
@@ -65,8 +63,8 @@ target elements within the editor.
Once you've got the basics down you'll find that there will be changes you want
to make but you aren't sure how to reference an element. That's when the
devtools become really useful, just open them up (`cmd+alt+i`), switch to the
`Elements` tab and inspect the element you're interested in.
devtools become really useful. To open them use `cmd+alt+i` and switch to the
`Elements` tab to inspect the element you're interested in.
[less]: http://lesscss.org/
[git]: http://git-scm.com/