Build Your Own Atom Theme with CSS

Atom, this 21st century "customable text editor" has become the first choice for thousands of developers around the world. Its easy to expand and customize makes it popular. Developers share new features with the Atom community by releasing expansion packages and themes. After reading this article, you will be able to publish your own Atom grammar theme – an excellent first step to embarking on your Atom customization journey!

Short review of key points

• Atom is a customizable text editor that allows developers to create and share their own syntax themes using CSS.
• Create a syntax theme, you first need to download the Atom text editor, and then use the automatic generation function to create a syntax theme package.
• Atom uses Less (a superset of CSS) to style, including functions such as variables, nested styles and & operators. After changing the theme, reload the Atom window to view the effect.
• After the theme is created and refined, it can be shared with the Atom community through the Atom Package Manager (APM).

What is a grammatical theme?

Syntax theme is used to style text/code areas in the editor. The interface theme is used to set other aspects of the Atom text editor (such as sidebar, status bar, tab, etc.). This article only focuses on the creation of grammar topics, just have the basic knowledge of CSS.

Beginner's Guide

Simply download the Atom text editor and start! Atom uses Less, which is a superset of CSS with convenient features such as variables.

Generate Atom grammar theme package

Creating a grammatical theme used to be a tedious task, but now Atom has built-in powerful automatic generation features:

1. Open Atom and press Cmd Shift P (using Ctrl Shift P for Windows).
2. Enter generate.
3. Select the "Package Generator: Generate syntax theme" option.

Atom will prompt you to choose the location where to save the package, you can choose as you like.

Name your bag

Atom will open the generated package as a project and you can start editing. Atom recommends that package names end with "-syntax" and be named using lowercase and hyphen. For example, I named my package blue-everywhere-syntax and set it to the blue theme.

Package structure

The automatically generated package structure is clear and easy to understand:

• The main style sheet is located in index.less.
• The basic style is located in styles/base.less and the color definition is located in styles/colors.less.
• package.json Files are used to define the name, description, and other metadata of the package.
• README.md File describes your topic in Markdown format, if you publish a topic, this README will be displayed on the download page.

Code Example

Atom's rendering engine is based on Chromium (understanding Electron gives you an in-depth understanding of how it works), so you can use CSS for style settings. Atom uses Less, which has convenient features such as variables and nested imports.

To see the change effect, just reload the Atom (using Cmd Alt Ctrl L or "View" > "Developer" > "Reload"). In Atom Settings (Cmd,)>"Theme", set the editor's syntax theme to the newly created theme.

Set the theme to blue

Open the colors.less file (styles > colors.less). You can see a variable named @very-dark-gray with a value of #1d1f21. Change it to dark blue #1d1f33. Reload Atom (Cmd Alt Ctrl L or "View" > "Developer" > "Reload"). The background color of the text area should have been changed.

Detailed code explanation

index.lessImport base.less. base.less Similar to CSS, the Less variable (starting with the @ symbol) is used.

Editor background color is defined by the following code:

@import "syntax-variables";

atom-text-editor, :host {
  background-color: @syntax-background-color;
}

@syntax-background-colorDefinition in syntax-variables.less:

@import "colors";

// ...

@syntax-background-color: @very-dark-gray;

@very-dark-gray is defined in colors.less, which is why we modify the colors.less value in @very-dark-gray to change the editor background color.

Style sheet organization

How style sheet variables are organized depends on personal preference. Atom's auto-generated template recommends grouping items with the same color, using syntax variables in base.less, and assigning values ​​to each variable in syntax-variables.less. But the color can also be defined directly in base.less.

Advanced Style

In addition to variables and imports, Less has some other features:

1. Nested Style
2. & operator

Nested Style

Less supports nested styles. For example:

.container {
  .red-block {
    a {
      color: red;
    }
  }
}

This is equivalent to:

a.container .red-block {
  color: red;
}

& operator

The

& operator simplifies the parent selector.

Blue variable name

Set all variable names to dark blue and add underscores when hovering:

Atom automatically adds .variable classes to all variables in the code editor. Therefore, we need to modify the style of the .variable class:

.variable {
  color: #336699;
  &:hover {
    text-decoration: underline;
  }
  // ...
}

Current line number

Set the current line number to blue:

Add colors.less in @deep-sky-blue: #009ACD;. Use this color in base.less:

.gutter {
  // ...

  .line-number {
    &.cursor-line {
      background-color: @syntax-gutter-background-color-selected;
      color: lighten(@deep-sky-blue, 10%);
    }

    &.cursor-line-no-selection {
      color: @deep-sky-blue;
    }
  }
}

Summary

With simple examples and CSS basics, we have created a brand new Atom syntax theme. You can continuously improve your theme and share it with the world through Atom Package Manager (APM).

Resources

1. Color operation function in Less
2. Publish Atom theme
3. Atom User Manual

FAQ

(The FAQ section in the original text is omitted here because these questions do not match the pseudo-original goals of the topic and are longer.)

The above is the detailed content of Build Your Own Atom Theme with CSS. For more information, please follow other related articles on the PHP Chinese website!