├── index.less ├── .gitignore ├── package.json ├── stylesheets ├── colors.less ├── syntax-variables.less └── base.less ├── README.md └── LICENSE.md /index.less: -------------------------------------------------------------------------------- 1 | @import "./stylesheets/base.less"; 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-syntax", 3 | "theme": "syntax", 4 | "version": "0.3.0", 5 | "private": false, 6 | "description": "A template syntax theme to build from", 7 | "repository": "https://github.com/atom/template-syntax", 8 | "license": "MIT", 9 | "engines": { 10 | "atom": ">0.50.0" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /stylesheets/colors.less: -------------------------------------------------------------------------------- 1 | // These colors are specific to the theme. Do not use in a package! 2 | 3 | @very-light-gray: #c5c8c6; 4 | @light-gray: #969896; 5 | @gray: #373b41; 6 | @dark-gray: #282a2e; 7 | @very-dark-gray: #1d1f21; 8 | 9 | @cyan: #8abeb7; 10 | @blue: #81a2be; 11 | @purple: #b294bb; 12 | @green: #b5bd68; 13 | @red: #cc6666; 14 | @orange: #de935f; 15 | @light-orange: #f0c674; 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ##### Atom and all repositories under Atom will be archived on December 15, 2022. Learn more in our [official announcement](https://github.blog/2022-06-08-sunsetting-atom/) 2 | # Atom Template Syntax Theme 3 | 4 | This is a template syntax theme. Its goal is to be an example or template for 5 | you to build from. See the less files in the `stylesheets` directory. 6 | 7 | Feel free to fork this and create your own atom themes. 8 | 9 | ![A screenshot!](https://f.cloud.github.com/assets/69169/2302417/fec4d2e4-a17b-11e3-927e-b4e375d3e26c.png) 10 | 11 | ### Notes and best practices 12 | 13 | * Name your syntax theme with `-syntax` at the end 14 | * Define proper colors in your `syntax-variables.less` file. Other packages 15 | can use these variables. All the variables defined in this package's 16 | `syntax-variables.less` file must be defined — you cannot pick and choose. 17 | * Always have a high-quality screenshot in the README 18 | * The `colors.less` file is not necessary, but it's good practice. 19 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 GitHub 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /stylesheets/syntax-variables.less: -------------------------------------------------------------------------------- 1 | @import "colors"; 2 | 3 | // This defines all syntax variables that syntax themes must implement when they 4 | // include a syntax-variables.less file. 5 | 6 | // General colors 7 | @syntax-text-color: @very-light-gray; 8 | @syntax-cursor-color: white; 9 | @syntax-selection-color: lighten(@dark-gray, 10%); 10 | @syntax-selection-flash-color: @very-light-gray; 11 | @syntax-background-color: @very-dark-gray; 12 | 13 | // Guide colors 14 | @syntax-wrap-guide-color: @dark-gray; 15 | @syntax-indent-guide-color: @gray; 16 | @syntax-invisible-character-color: @gray; 17 | 18 | // For find and replace markers 19 | @syntax-result-marker-color: @light-gray; 20 | @syntax-result-marker-color-selected: white; 21 | 22 | // Gutter colors 23 | @syntax-gutter-text-color: @very-light-gray; 24 | @syntax-gutter-text-color-selected: @syntax-gutter-text-color; 25 | @syntax-gutter-background-color: @dark-gray; 26 | @syntax-gutter-background-color-selected: @gray; 27 | 28 | // For git diff info. i.e. in the gutter 29 | @syntax-color-renamed: @blue; 30 | @syntax-color-added: @green; 31 | @syntax-color-modified: @orange; 32 | @syntax-color-removed: @red; 33 | -------------------------------------------------------------------------------- /stylesheets/base.less: -------------------------------------------------------------------------------- 1 | @import "syntax-variables"; 2 | 3 | .editor-colors { 4 | background-color: @syntax-background-color; 5 | color: @syntax-text-color; 6 | } 7 | 8 | .editor { 9 | background-color: @syntax-background-color; 10 | color: @syntax-text-color; 11 | 12 | .wrap-guide { 13 | background-color: @syntax-wrap-guide-color; 14 | } 15 | 16 | .indent-guide { 17 | color: @syntax-indent-guide-color; 18 | } 19 | 20 | .invisible-character { 21 | color: @syntax-invisible-character-color; 22 | } 23 | 24 | .gutter { 25 | background-color: @syntax-gutter-background-color; 26 | color: @syntax-gutter-text-color; 27 | 28 | .line-number { 29 | &.cursor-line { 30 | background-color: @syntax-gutter-background-color-selected; 31 | color: @syntax-gutter-text-color-selected; 32 | } 33 | 34 | &.cursor-line-no-selection { 35 | color: @syntax-gutter-text-color-selected; 36 | } 37 | } 38 | } 39 | 40 | .gutter .line-number.folded, 41 | .gutter .line-number:after, 42 | .fold-marker:after { 43 | color: @light-gray; 44 | } 45 | 46 | .invisible { 47 | color: @syntax-text-color; 48 | } 49 | 50 | .cursor { 51 | color: @syntax-cursor-color; 52 | } 53 | 54 | .selection .region { 55 | background-color: @syntax-selection-color; 56 | } 57 | } 58 | 59 | .comment { 60 | color: @light-gray; 61 | } 62 | 63 | .entity { 64 | &.name.type { 65 | color: @light-orange; 66 | text-decoration: underline; 67 | } 68 | 69 | &.other.inherited-class { 70 | color: @green; 71 | } 72 | } 73 | 74 | .keyword { 75 | color: @purple; 76 | 77 | &.control { 78 | color: @purple; 79 | } 80 | 81 | &.operator { 82 | color: @syntax-text-color; 83 | } 84 | 85 | &.other.special-method { 86 | color: @blue; 87 | } 88 | 89 | &.other.unit { 90 | color: @orange; 91 | } 92 | } 93 | 94 | .storage { 95 | color: @purple; 96 | } 97 | 98 | .constant { 99 | color: @orange; 100 | 101 | &.character.escape { 102 | color: @cyan; 103 | } 104 | 105 | &.numeric { 106 | color: @orange; 107 | } 108 | 109 | &.other.color { 110 | color: @cyan; 111 | } 112 | 113 | &.other.symbol { 114 | color: @green; 115 | } 116 | } 117 | 118 | .variable { 119 | color: @red; 120 | 121 | &.interpolation { 122 | color: darken(@red, 10%); 123 | } 124 | 125 | &.parameter.function { 126 | color: @syntax-text-color; 127 | } 128 | } 129 | 130 | .invalid.illegal { 131 | background-color: @red; 132 | color: @syntax-background-color; 133 | } 134 | 135 | .string { 136 | color: @green; 137 | 138 | 139 | &.regexp { 140 | color: @cyan; 141 | 142 | .source.ruby.embedded { 143 | color: @orange; 144 | } 145 | } 146 | 147 | &.other.link { 148 | color: @red; 149 | } 150 | } 151 | 152 | .punctuation { 153 | &.definition { 154 | &.comment { 155 | color: @light-gray; 156 | } 157 | 158 | &.string, 159 | &.variable, 160 | &.parameters, 161 | &.array { 162 | color: @syntax-text-color; 163 | } 164 | 165 | &.heading, 166 | &.identity { 167 | color: @blue; 168 | } 169 | 170 | &.bold { 171 | color: @light-orange; 172 | font-style: bold; 173 | } 174 | 175 | &.italic { 176 | color: @purple; 177 | font-style: italic; 178 | } 179 | } 180 | 181 | &.section.embedded { 182 | color: darken(@red, 10%); 183 | } 184 | 185 | } 186 | 187 | .support { 188 | &.class { 189 | color: @light-orange; 190 | } 191 | 192 | &.function { 193 | color: @cyan; 194 | 195 | &.any-method { 196 | color: @blue; 197 | } 198 | } 199 | } 200 | 201 | .entity { 202 | &.name.function { 203 | color: @blue; 204 | } 205 | 206 | &.name.class, &.name.type.class { 207 | color: @light-orange; 208 | } 209 | 210 | &.name.section { 211 | color: @blue; 212 | } 213 | 214 | &.name.tag { 215 | color: @red; 216 | text-decoration: underline; 217 | } 218 | 219 | &.other.attribute-name { 220 | color: @orange; 221 | 222 | &.id { 223 | color: @blue; 224 | } 225 | } 226 | } 227 | 228 | .meta { 229 | &.class { 230 | color: @light-orange; 231 | } 232 | 233 | &.link { 234 | color: @orange; 235 | } 236 | 237 | &.require { 238 | color: @blue; 239 | } 240 | 241 | &.selector { 242 | color: @purple; 243 | } 244 | 245 | &.separator { 246 | background-color: @gray; 247 | color: @syntax-text-color; 248 | } 249 | } 250 | 251 | .none { 252 | color: @syntax-text-color; 253 | } 254 | 255 | .markup { 256 | &.bold { 257 | color: @orange; 258 | font-weight: bold; 259 | } 260 | 261 | &.changed { 262 | color: @purple; 263 | } 264 | 265 | &.deleted { 266 | color: @red; 267 | } 268 | 269 | &.italic { 270 | color: @purple; 271 | font-style: italic; 272 | } 273 | 274 | &.heading .punctuation.definition.heading { 275 | color: @blue; 276 | } 277 | 278 | &.inserted { 279 | color: @green; 280 | } 281 | 282 | &.list { 283 | color: @red; 284 | } 285 | 286 | &.quote { 287 | color: @orange; 288 | } 289 | 290 | &.raw.inline { 291 | color: @green; 292 | } 293 | } 294 | 295 | .source.gfm .markup { 296 | -webkit-font-smoothing: auto; 297 | &.heading { 298 | color: @green; 299 | } 300 | } 301 | 302 | .editor.mini .scroll-view { 303 | padding-left: 1px; 304 | } 305 | --------------------------------------------------------------------------------