pulsar/docs/creating-a-theme.md

{{{ "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

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.