Last active
September 7, 2017 16:57
-
-
Save sergiocarneiro/0660ee54365150472cabdd07d8adeeeb to your computer and use it in GitHub Desktop.
Atom Minimalist Dark Theme (UI + Syntax)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Replaces the file at ~/.atom/styles.less | |
| // | |
| // Generic Variables | |
| // | |
| @background: #1F1F1F; | |
| @foreground: #252526; | |
| @ui-text-color: #CCC; | |
| @dark-gray: #373434; // Current Line & Selection | |
| @gray: #939999; | |
| @light-gray: #999; | |
| @very-light-gray: #f8f8f2; // Foreground | |
| @blue: #69BFFB; | |
| @cyan: #9DDCFC; | |
| @soft-cyan: #66d9ef; | |
| @green: #608B4E; | |
| @light-green: #B4CFA2; | |
| @orange: #DD9F73; | |
| @pink: #ff79c6; | |
| @purple: #bd93f9; | |
| @red: #ff5555; | |
| @yellow: #f1fa8c; | |
| @dark-yellow: #E6DB74; | |
| @sandstone: #cfcfc2; | |
| @lace: #F8F8F0; | |
| @white: #FFF; | |
| @alpha-white: rgba(255, 255, 255, 0.10); | |
| @black: #000; | |
| // | |
| // UI Customization | |
| // | |
| atom-workspace { | |
| color: @ui-text-color !important; | |
| } | |
| .tree-view { | |
| background-color: @foreground; | |
| &::before { | |
| background: @light-green !important; | |
| } | |
| } | |
| .status-bar { | |
| background-color: @background !important; | |
| a { | |
| color: @ui-text-color !important; | |
| } | |
| .text-error { | |
| color: @red !important; | |
| } | |
| } | |
| atom-workspace, | |
| atom-pane, | |
| atom-pane-container, | |
| atom-panel, | |
| .panel, | |
| .panels, | |
| .tool-panel, | |
| .item-views, | |
| .pane-item, | |
| .config-menu { | |
| color: @ui-text-color !important; | |
| background-color: @foreground !important; | |
| } | |
| .nav > li.active > a, | |
| .nav > li > a:hover { | |
| background-color: lighten(@foreground, 6%) !important; | |
| } | |
| atom-text-editor[mini] { | |
| background-color: @background; | |
| &.is-focused { | |
| border-color: @blue; | |
| box-shadow: 0 0 0 1px darken(@blue, 33%); | |
| background-color: lighten(@background, 1%); | |
| } | |
| .placeholder-text { | |
| color: @light-gray; | |
| } | |
| } | |
| .tab { | |
| background-color: @background !important; | |
| } | |
| .texteditor.tab.active::before { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 1px; | |
| background-color: @white; | |
| content: ""; | |
| } | |
| .close-icon { | |
| color: @light-green !important; | |
| &:hover { | |
| background: @alpha-white !important; | |
| cursor: pointer !important; | |
| } | |
| } | |
| .btn, .btn.btn-default { | |
| color: @ui-text-color; | |
| background: lighten(@foreground, 6%) !important; | |
| } | |
| select, | |
| .package-card { | |
| color: @ui-text-color !important; | |
| background-color: lighten(@foreground, 6%) !important; | |
| } | |
| .list-item { | |
| color: @ui-text-color !important; | |
| } | |
| .selected::before { | |
| background-color: @alpha-white !important; | |
| } | |
| .status-modified, | |
| .status-modified > .list-item { | |
| color: @light-green !important; | |
| } | |
| .status-ignored, | |
| .status-ignored > .list-item { | |
| color: darken(@ui-text-color, 30%) !important; | |
| } | |
| ::-webkit-scrollbar- { | |
| &scrollbar { | |
| width: 10px; | |
| height: 10px; | |
| } | |
| &thumb { | |
| background: @alpha-white !important; | |
| border-color: transparent !important; | |
| } | |
| &track, | |
| &corner { | |
| background: transparent !important; | |
| } | |
| } | |
| .popover-list { | |
| color: @ui-text-color !important; | |
| background-color: @foreground !important; | |
| ol.list-group li { | |
| background-color: @foreground !important; | |
| &.selected { | |
| background-color: lighten(@foreground, 6%) !important; | |
| } | |
| } | |
| .suggestion-description { | |
| background: lighten(@foreground, 3%) !important; | |
| .suggestion-description-more-link { | |
| color: @blue !important; | |
| } | |
| } | |
| } | |
| .tooltip-inner { | |
| background: rgba(66,66,66,0.95) !important; | |
| color: @ui-text-color !important; | |
| } | |
| .link { | |
| color: @blue !important; | |
| } | |
| // | |
| // Syntax theme built from Dracula | |
| // | |
| // General colors | |
| @syntax-text-color: @very-light-gray; | |
| @syntax-cursor-color: @white; | |
| @syntax-selection-color: lighten(@dark-gray, 10%); | |
| @syntax-selection-flash-color: @very-light-gray; | |
| @syntax-background-color: @background; | |
| // 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; | |
| atom-text-editor, atom-text-editor .gutter { | |
| background-color: @background; | |
| color: @very-light-gray; | |
| } | |
| atom-text-editor.is-focused .cursor { | |
| border-color: @lace; | |
| } | |
| atom-text-editor.is-focused .selection .region { | |
| background-color: @dark-gray; | |
| } | |
| atom-text-editor.is-focused .line-number.cursor-line-no-selection, atom-text-editor.is-focused .line.cursor-line { | |
| background-color: darken(@dark-gray, 4%); | |
| } | |
| atom-text-editor .invisible-character { | |
| color: @gray; | |
| } | |
| atom-text-editor .indent-guide { | |
| box-shadow: inset 1px 0 darken(@gray, 13%); | |
| } | |
| atom-text-editor .gutter .line-number.git-line-modified, | |
| atom-text-editor .gutter .line-number.git-line-removed, | |
| atom-text-editor .gutter .line-number.git-line-added { | |
| border-left-width: 5px; | |
| padding-left: calc(0.5em - 5px); | |
| } | |
| .markdown-preview > atom-text-editor { | |
| background: @background; | |
| border: 1px solid @background; | |
| } | |
| .markdown-preview atom-text-editor { | |
| color: @black; | |
| } | |
| .wrap-guide { | |
| background-color: @blue; | |
| } | |
| // Comments | |
| .syntax--comment { | |
| color: @gray; | |
| &.syntax--block { | |
| color: @green; | |
| .syntax--punctuation { | |
| color: @green; | |
| } | |
| } | |
| } | |
| // JSDoc | |
| .syntax--jsdoc { | |
| // Types | |
| &.syntax--type.syntax--instance { | |
| color: @blue; | |
| } | |
| } | |
| // Strings | |
| .syntax--string { | |
| color: @orange; | |
| } | |
| // Numbers | |
| .syntax--constant.syntax--numeric { | |
| color: @light-green; | |
| } | |
| .syntax--constant.syntax--language { | |
| color: @blue; | |
| } | |
| .syntax--constant.syntax--character, .syntax--constant.syntax--other { | |
| color: @blue; | |
| } | |
| .syntax--variable { | |
| color: @white; | |
| } | |
| .syntax--variable.syntax--other.syntax--readwrite.syntax--instance { | |
| color: @orange; | |
| } | |
| .syntax--constant.syntax--character.syntax--escaped, .syntax--constant.syntax--character.syntax--escape, .syntax--string .syntax--source, .syntax--string .syntax--source.syntax--ruby { | |
| color: @pink; | |
| } | |
| // import/return/=/... in typescript / !important/rem in CSS | |
| .syntax--keyword { | |
| color: @blue; | |
| } | |
| // Import source | |
| .syntax--import .syntax--string { | |
| text-decoration: none !important; | |
| } | |
| // Decorators | |
| .syntax--decorator { | |
| .syntax--name, | |
| &.syntax--punctuation { | |
| color: @blue !important; | |
| } | |
| } | |
| // public/protected/private in typescript | |
| .syntax--storage { | |
| color: @blue; | |
| } | |
| // class/const/let/=> in typescript | |
| .syntax--storage.syntax--type { | |
| font-style: normal; | |
| color: @blue; | |
| } | |
| // this / super | |
| .syntax--this, | |
| .syntax--super { | |
| color: @blue; | |
| } | |
| // Class names | |
| .syntax--entity.syntax--name.syntax--class { | |
| text-decoration: none; | |
| color: @white; | |
| } | |
| // Superclass names | |
| .syntax--entity.syntax--other.syntax--inherited-class { | |
| font-style: normal; | |
| text-decoration: none; | |
| color: @white; | |
| } | |
| // Function declarations | |
| .syntax--function.syntax--definition { | |
| color: @white; | |
| } | |
| // Function calls | |
| .syntax--entity.syntax--name.syntax--function { | |
| color: @white; | |
| } | |
| // Function parameters | |
| .syntax--variable.syntax--parameter { | |
| font-style: normal; | |
| color: @white; | |
| } | |
| // CSS directives | |
| .syntax--entity.syntax--name.syntax--tag { | |
| color: @blue; | |
| } | |
| // CSS classes | |
| .syntax--entity.syntax--other.syntax--attribute-name { | |
| color: @cyan; | |
| } | |
| // CSS attributes | |
| .syntax--entity.syntax--other.syntax--attribute-selector { | |
| color: @cyan; | |
| } | |
| // CSS pseudo-classes | |
| .syntax--pseudo-class { | |
| font-style: italic; | |
| } | |
| // CSS constants | |
| .syntax--css.syntax--constant.syntax--property-value { | |
| color: @blue; | |
| } | |
| // CSS variables | |
| .syntax--css .syntax--variable { | |
| color: @orange; | |
| } | |
| // Sass functions | |
| .syntax--sass, .syntax-less { | |
| &.syntax--support.syntax--function.syntax--name { | |
| & ~ .syntax--property-value { | |
| color: @white; | |
| font-style: italic; | |
| } | |
| } | |
| } | |
| // Colors | |
| .syntax--color { | |
| color: @orange !important; | |
| } | |
| // Units | |
| .syntax--numeric + .syntax--unit { | |
| color: @light-green; | |
| } | |
| // !important keyword | |
| .syntax--keyword.syntax--important { | |
| color: @gray; | |
| font-style: italic; | |
| } | |
| // Operators | |
| .syntax--operator { | |
| color: @white; | |
| } | |
| // External function calls (on super class, for example) | |
| .syntax--support.syntax--function { | |
| color: @white; | |
| } | |
| .syntax--support.syntax--constant { | |
| color: darken(@cyan, 6%); | |
| } | |
| // string/boolean/any in Typescript, properties in CSS | |
| .syntax--support.syntax--type, .syntax--support.syntax--class { | |
| font-style: normal; | |
| color: @white; | |
| } | |
| .syntax--support.syntax--other.syntax--variable { | |
| } | |
| .syntax--invalid { | |
| color: @lace; | |
| background-color: @pink; | |
| } | |
| .syntax--invalid.syntax--deprecated { | |
| color: @lace; | |
| background-color: @yellow; | |
| } | |
| .syntax--meta.syntax--structure.syntax--dictionary.syntax--json .syntax--string.syntax--quoted.syntax--double.syntax--json { | |
| color: @sandstone; | |
| } | |
| .syntax--meta.syntax--diff, .syntax--meta.syntax--diff.syntax--header { | |
| color: @blue; | |
| } | |
| .syntax--markup.syntax--deleted { | |
| color: @red; | |
| } | |
| .syntax--markup.syntax--inserted { | |
| color: @green; | |
| } | |
| .syntax--markup.syntax--changed { | |
| color: @light-green; | |
| } | |
| .syntax--constant.syntax--numeric.line-number.syntax--find-in-files:not(.match) { | |
| color: @light-green; | |
| } | |
| .syntax--entity.syntax--name.syntax--filename { | |
| color: @blue; | |
| } | |
| .syntax--message.syntax--error { | |
| color: #F83333; | |
| } | |
| .syntax--punctuation.syntax--definition.syntax--string.syntax--begin.syntax--json:not(.syntax--meta.syntax--structure.syntax--dictionary.syntax--value.syntax--json), .syntax--punctuation.syntax--definition.syntax--string.syntax--end.syntax--json:not(.syntax--meta.syntax--structure.syntax--dictionary.syntax--value.syntax--json) { | |
| color: darken(@white, 7%); | |
| } | |
| .syntax--string { | |
| color: @orange; | |
| .syntax--invalid { | |
| color: @orange; | |
| background-color: transparent; | |
| } | |
| } | |
| .syntax--value.syntax--meta.syntax--structure.syntax--dictionary.syntax--json { | |
| .syntax--string.syntax--quoted.syntax--double.syntax--json { | |
| color: @orange; | |
| .syntax--punctuation { | |
| color: @orange; | |
| } | |
| } | |
| } | |
| .syntax--key.syntax--meta.syntax--structure.syntax--dictionary.syntax--json { | |
| .syntax--string.syntax--quoted.syntax--double.syntax--json { | |
| color: @cyan; | |
| .syntax--punctuation { | |
| color: @cyan; | |
| } | |
| } | |
| } | |
| .syntax--heading.syntax--gfm { | |
| color: @blue; | |
| } | |
| .syntax--entity.syntax--gfm { | |
| color: @pink; | |
| } | |
| .syntax--markup.syntax--underline.syntax--link.syntax--gfm { | |
| color: @cyan; | |
| } | |
| .syntax--variable.syntax--unordered.syntax--list.syntax--gfm { | |
| color: @cyan; | |
| } | |
| .syntax--variable.syntax--ordered.syntax--list.syntax--gfm { | |
| color: @cyan; | |
| } | |
| .syntax--variable.syntax--other.syntax--normal.syntax--shell { | |
| color:@purple; | |
| } | |
| .syntax--markup.syntax--bold.syntax--gfm, | |
| .syntax--markup.syntax--italic.syntax--gfm { | |
| color: @white; | |
| } | |
| // The way of changing only the heading lines | |
| .syntax--marker ~ .syntax--markup.syntax--gfm { | |
| color: @blue; | |
| } | |
| .syntax--markup.syntax--strike.syntax--gfm { | |
| color: @red; | |
| } | |
| .syntax--markup.syntax--raw.syntax--gfm { | |
| color: @ui-text-color; | |
| background: @alpha-white; | |
| padding: 2px 0px; | |
| border-radius: 2px; | |
| } | |
| .syntax--code.syntax--gfm { | |
| color: @gray; | |
| } | |
| .syntax--code.syntax--gfm .syntax--link { | |
| color: @cyan; | |
| } | |
| .syntax--critic.syntax--gfm.syntax--addition { | |
| color: @green; | |
| } | |
| .syntax--critic.syntax--gfm.syntax--deletion { | |
| color: @red; | |
| } | |
| .syntax--critic.syntax--gfm.syntax--substitution { | |
| color: @orange; | |
| } | |
| .syntax--critic.syntax--gfm.syntax--highlight { | |
| color: @blue; | |
| } | |
| .syntax--critic.syntax--gfm.syntax--comment { | |
| color: @gray; | |
| } | |
| [data-zen="true"] atom-pane-container atom-pane .item-views { | |
| background: @background !important; | |
| } | |
| atom-text-editor .highlight.find-result .region { | |
| background: lighten(@dark-gray, 3%); | |
| z-index: -1000; | |
| } | |
| atom-text-editor .highlight.current-result .region, | |
| atom-text-editor .highlight.current-result ~ .highlight.selection .region { | |
| background: lighten(@dark-gray, 20%); // to distinguish from the other results | |
| z-index: -1000; | |
| } | |
| atom-text-editor .bracket-matcher .region { | |
| border-bottom: 1px dotted @gray; | |
| z-index: 100; | |
| } | |
| // Highlights #{} in ruby string interpolation and <?php ?> syntax tag | |
| .syntax--punctuation.syntax--section.syntax--embedded.syntax--begin, | |
| .syntax--punctuation.syntax--section.syntax--embedded.syntax--end { | |
| color: @orange; | |
| } | |
| // Disable syntax errors in Markup files | |
| .syntax--markup .syntax--invalid { | |
| background-color: transparent; | |
| } | |
| .git-line-modified { | |
| border-left-color: @light-green !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment