Atom flight manual translation: 3.5 create theme

Time:2020-5-21

create themes

Atom’s interface is rendered using HTML, and styles are defined through less, which is a superset of CSS. Don’t worry about having never heard of less before. It’s similar to CSS, but with some convenient extensions.

Atom supports two themes: UI and syntax. UI themes define styles for elements such as tree views, selection jackets, drop-down lists, and status bars. The syntax theme defines the style for the code in the editor.

Themes can be installed and modified from the settings view, and you can chooseAtom > Preferences…Menu, and then select the install and theme sections in the sidebar on the left to open it.

start

The topic is straightforward, but it’s useful if you’re familiar with something before you start:

  • Less is a superset of CSS, but it has some handy features like variables. If you are not familiar with its grammar, take a few minutes here to familiarize yourself with it.
  • You may also want to review it package.json The concept of. This file helps you distribute topics to other users.
  • In your theme“ package.json ”Package must contain onethemeKey, value isuiperhapssyntax, in order to make atom a theme.
  • You can atom.io Find existing topics above, or set up their fork.

Create a grammar theme

Let’s create your first theme.

Presscmd-shift-PTo start, and enter “generate syntax theme” to create a new theme package. After selecting generate syntax theme, atom will ask you which directory you want to create the theme in. We call the theme to be created “motif syntax”. Tip: the syntax topic should end with “- syntax”.

Atom will then pop up a window showing the motif syntax theme with some pre created files and folders. If you open the settings view(cmd-,), and visit the themes section on the left, and you’ll see motif listed in the syntax theme drop-down list. Select it from the menu to load. Now that you’ve opened the new editor, you should see the motif syntax theme activated.

Open styles/ colors.less To modify predefined color variables. For example, put@redbecome#f4c2c1

Then open styles/ base.less To modify a predefined selector. Selectors define styles for different parts of the editor, such as comments, strings, and line numbers in sidebars.

For example, you can.gutter``background-colorSet to@red

By pressingcmd-alt-ctrl-lRestart atom to see your changes in the atom window. This is wonderful.

Tip: you can avoid restarting atom when viewing your changes by opening a new window in dev mode. To run on the command lineatom --dev .To open the atom window in dev mode. You can also presscmd-shift-oOr openView > Developer > Open in Dev ModeMenu to execute. When you edit your theme, the changes are immediately visible.

It is not recommended to specify in your grammar topicfont-family, because it will overwrite theFont FamilyField. If you still want to recommend a font that suits your theme, we recommend that you do so in the readme file.

Create interface theme

Interface theme must provideui-variables.lessFile, which contains all the variables provided by the core theme. These are mentioned in the topic variables section.

Perform the following steps to create a UI theme:

  1. Create a branch of one of the following warehouses:
    • atom-dark-ui
    • atom-light-ui
  2. Clone branch to local file system
  3. Open the command line in the topic’s directory
  4. On the command line by runningatom --dev ., or clickView > Developer > Open in Dev ModeMenu, open your new theme in dev mode
  5. In the theme ofpackage.jsonThe name of the modified topic in the file
  6. with-uiThe ending name names your topic, for examplesuper-white-ui
  7. functionapm linkTo link your theme symbol to~/.atom/packages
  8. usecmd-alt-ctrl-LRestart atom
  9. Open the theme by setting the UI theme drop-down list in the themes section of the view
  10. Make some changes. Because you open the theme in the dev mode window, the changes will be immediately reflected in the editor, and there is no need to restart.

Developed workflow

Here are some tools to make topic development faster and easier.

Instant restart

After you change your theme, presscmd-alt-ctrl-LIt’s not ideal to restart. In the atom window in dev mode, atom supports immediate style updates.

To open a window in dev mode:

  1. By selectingView > Developer > Open in Dev ModeMenu, or presscmd-shift-oShortcut key to open your theme directly in the dev mode window.
  2. Modify your theme and save it. Your changes should be applied immediately.

If you want to reload all the styles at any time, you can use thecmd-ctrl-shift-rShortcut key.

Developer Tools

Atom is based on Chrome browser and supports chrome developer tools. You can chooseView > Toggle Developer ToolsMenu, or usecmd-alt-iShortcut key to open it.

The developer tool allows you to view the various elements and their CSS properties.

Atom flight manual translation: 3.5 create theme

For a brief introduction, please check out Google’s extended tutorial.

Atom style guide

If you are creating an interface theme, you may want a way to see how your theme affects the components in your system. The style guide is a page that renders all the components supported by atom.

Open command panel(cmd-shift-P)Look for “style guide” or usecmd-ctrl-shift-gShortcut key to open the style guide.

Atom flight manual translation: 3.5 create theme

Subject variable

Atom’s UI provides variables that you can use in your own themes or packages.

Use in theme

Each custom theme has to be specifiedui-variables.lessFile that defines all of the following variables. The top topics in the topic list are loaded and available for import.

Use in package

In any of your bags.lessFile, you can import from atomui-variablesFile to access theme variables.

Your package should only specify structured styles, and they should all come from style guides. Your package should not specify colors, padding, or anything that uses absolute pixels. You should use the theme variable instead. If you follow this, your package will perform well under any theme.

This is a.lessFor the example of file, a package can be defined with the following subject variables:

@import "ui-variables";

.my-selector {
  background-color: @base-background-color;
  padding: @component-padding;
}

variable

text color

  • @text-color
  • @text-color-subtle
  • @text-color-highlight
  • @text-color-selected
  • @text-color-info-Blue
  • @text-color-success-Green
  • @text-color-warning-Orange or yellow
  • @text-color-error-Red

background color

  • @background-color-info-Blue
  • @background-color-success-Green
  • @background-color-warning-Orange or yellow
  • @background-color-error-Red
  • @background-color-highlight
  • @background-color-selected
  • @app-background-color-Application background under all editor components

Component color

  • @base-background-color
  • @base-border-color
  • @pane-item-background-color
  • @pane-item-border-color
  • @input-background-color
  • @input-border-color
  • @tool-panel-background-color
  • @tool-panel-border-color
  • @inset-panel-background-color
  • @inset-panel-border-color
  • @panel-heading-background-color
  • @panel-heading-border-color
  • @overlay-background-color
  • @overlay-border-color
  • @button-background-color
  • @button-background-color-hover
  • @button-background-color-selected
  • @button-border-color
  • @tab-bar-background-color
  • @tab-bar-border-color
  • @tab-background-color
  • @tab-background-color-active
  • @tab-border-color
  • @tree-view-background-color
  • @tree-view-border-color
  • @ui-site-color-1
  • @ui-site-color-2
  • @ui-site-color-3
  • @ui-site-color-4
  • @ui-site-color-5

Component size

  • @disclosure-arrow-size
  • @component-padding
  • @component-icon-padding
  • @component-icon-size
  • @component-line-height
  • @component-border-radius
  • @tab-height

typeface

  • @font-size
  • @font-family