Atom :: Style Less 변수들. :: @import "ui-variables"

15126d3c95e-d81b0a9b.md

Atom :: Style Less 변수들. :: @import "ui-variables"

ui-variables.less 파일에 추가:

@import "ui-variables";

ui-variables.less:

// Colors

@text-color: #aaa;
@text-color-subtle: #555;
@text-color-highlight: #fff;
@text-color-selected: @text-color-highlight;

@text-color-info: #5293d8;
@text-color-success: #2BDA77;
@text-color-warning: #ff982d;
@text-color-error: #c00;

@text-color-ignored: @text-color-subtle;
@text-color-added: @text-color-success;
@text-color-renamed: @text-color-info;
@text-color-modified: @text-color-warning;
@text-color-removed: @text-color-error;

@background-color-info: #0098ff;
@background-color-success: #17ca65;
@background-color-warning: #ffaa2c;
@background-color-error: #c00;
@background-color-highlight: rgba(255, 255, 255, 0.07);
@background-color-selected: #4182C4;

@app-background-color: #333;

@base-background-color: lighten(@tool-panel-background-color, 5%);
@base-border-color: rgba(0, 0, 0, 0.5);

@pane-item-background-color: @base-background-color;
@pane-item-border-color: rgba(0, 0, 0, 0.5);

@input-background-color: #212224;
@input-border-color: @base-border-color;

@tool-panel-background-color: #1d1f21;
@tool-panel-border-color: @base-border-color;

@inset-panel-background-color: #161719;
@inset-panel-border-color: @base-border-color;

@panel-heading-background-color: #43484d;
@panel-heading-border-color: fadein(@base-border-color, 10%);

@overlay-background-color: #202123;
@overlay-border-color: @background-color-highlight;

@button-background-color: #43484d;
@button-background-color-hover: lighten(@button-background-color, 5%);
@button-background-color-selected: #5c6064;
@button-border-color: @base-border-color;

@tab-bar-background-color: #222;
@tab-bar-border-color: darken(@tab-background-color-active, 10%);
@tab-background-color: #333;
@tab-background-color-active: #222;
@tab-border-color: #484848;

@tree-view-background-color: #303030;
@tree-view-border-color: @tool-panel-border-color;

@scrollbar-background-color: #222425; // Needs to be opaque -> atom/atom/issues/4578
@scrollbar-color: rgba(92, 92, 92, 0.5);

@ui-site-color-1: @background-color-success; // green
@ui-site-color-2: @background-color-info; // blue
@ui-site-color-3: @background-color-warning; // orange
@ui-site-color-4: #db2ff4; // purple
@ui-site-color-5: #f5e11d; // yellow


// Sizes

@font-size: 11px;
@input-font-size: 14px;

@disclosure-arrow-size: 12px;

@component-padding: 10px;
@component-icon-padding: 5px;
@component-icon-size: 16px;
@component-line-height: 25px;
@component-border-radius: 2px;

@tab-height: 26px;


// Other

@font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;

syntax-variables.less 파일에 추가:

@import "syntax-variables";

syntax-variables.less:

@import "colors";

// This defines all syntax variables that syntax themes must implement when they
// include a syntax-variables.less file.

// General colors
@syntax-text-color: @very-light-gray;
@syntax-cursor-color: white;
@syntax-selection-color: lighten(@dark-gray, 10%);
@syntax-background-color: @very-dark-gray;

// Guide colors
@syntax-wrap-guide-color: @dark-gray;
@syntax-indent-guide-color: @gray;
@syntax-invisible-character-color: @gray;

// For find and replace markers
@syntax-result-marker-color: @light-gray;
@syntax-result-marker-color-selected: white;

// Gutter colors
@syntax-gutter-text-color: @very-light-gray;
@syntax-gutter-text-color-selected: @syntax-gutter-text-color;
@syntax-gutter-background-color: @dark-gray;
@syntax-gutter-background-color-selected: @gray;

// For git diff info. i.e. in the gutter
@syntax-color-renamed: @blue;
@syntax-color-added: @green;
@syntax-color-modified: @orange;
@syntax-color-removed: @red;

• https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less

note-info.json

{"noteId":"15126d3c95e-d81b0a9b","main":"15126d3c95e-d81b0a9b.md","title":"Atom :: Style Less 변수들. :: @import "ui-variables" - ui-variables.less 파일에 추가: - ui-variables.less: - syntax-variables.less 파일에 추가: - syntax-variables.less:"}