├── .gitignore ├── LICENSE.md ├── README.md ├── index.less ├── package.json └── styles ├── base.less └── colors.less /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules 4 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Joel Andrew Glovier 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Fizzy Syntax Theme 2 | 3 | Fizzy is a light syntax theme for [Atom](http://atom.io/) inspired by [Macrabbit Espresso](http://macrabbit.com/espresso/)'s default syntax highlighting color scheme, and by the [Soda Theme](https://github.com/buymeasoda/soda-theme) for Sublime. It features bright, primary colors on a white background. It is a syntax theme only, and will not affect the Atom UI (it works with both the Light UI scheme, and Dark UI scheme). 4 | 5 | ### Installation 6 | 7 | Run the following command: 8 | 9 | ```sh 10 | apm install fizzy 11 | ``` 12 | 13 | Then go to `Atom > Preferences > Themes` and in the `Syntax Themes` dropdown, select `Fizzy` from the list. 14 | 15 | 16 | ![screenshot](http://f.cl.ly/items/2Q1Y02173H3Z3J1z250R/fizzy.png) 17 | -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | @import "./styles/base.less"; 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fizzy", 3 | "theme": "syntax", 4 | "version": "0.21.0", 5 | "private": true, 6 | "description": "A light-hearted, bright and bubbly syntax theme featuring bright colors, and inspired by the Espresso default highlighting, and the Soda Sublime Text 2 theme.", 7 | "repository": "https://github.com/jglovier/fizzy", 8 | "licenses": [ 9 | { 10 | "type": "MIT", 11 | "url": "http://github.com/atom/fizzy/raw/master/LICENSE.md" 12 | } 13 | ], 14 | "engines": { 15 | "atom": ">0.39.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /styles/base.less: -------------------------------------------------------------------------------- 1 | // The ui-variables file is provided by base themes provided by Atom. 2 | // 3 | // See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less 4 | // for a full listing of what's available. 5 | @import "ui-variables"; 6 | @import "colors"; 7 | 8 | atom-text-editor.editor { 9 | background-color: @white; 10 | color: @gray_dark; 11 | 12 | .invisible-character, 13 | .indent-guide { color: @gray_light2; } 14 | 15 | .gutter { background-color: @gutter; } 16 | 17 | .gutter .line-number { opacity: 1; color: @gutter_text; } 18 | 19 | .gutter .line-number.folded, 20 | .gutter .line-number:after, 21 | .fold-marker:after { color: @gutter_text; } 22 | 23 | .cursor { border-color: @cursor; } 24 | 25 | .selection .region { 26 | background-color: @selection; 27 | // border: 1px solid @light_blue_border; 28 | border-radius: 2px; } 29 | 30 | .line-number.cursor-line-no-selection { background-color: @gutter_highlight; } 31 | 32 | } 33 | 34 | .bracket-matcher .region { 35 | background-color: @light_blue; 36 | border-radius: 2px; 37 | border: 1px solid @blue; 38 | } 39 | 40 | .syntax--comment { 41 | color: @comment; 42 | font-style: normal; } 43 | 44 | .syntax--entity { color: @blue_tag; } 45 | 46 | .syntax--keyword { color: @green; } 47 | 48 | .syntax--storage.syntax--type { color: @green; } 49 | 50 | .syntax--constant { color: @red; 51 | 52 | &.syntax--numeric, 53 | &.syntax--boolean { color: @turquoise; } 54 | 55 | } 56 | 57 | .syntax--variable { color: @blue; } 58 | 59 | .syntax--delimiter, .syntax--brace { color: @black; } 60 | 61 | .syntax--delimiter.syntax--period { color: @green; } 62 | 63 | .syntax--invalid.syntax--deprecated { 64 | text-decoration: underline; 65 | color: @red; } 66 | 67 | .syntax--invalid.syntax--illegal { color: @red; } 68 | 69 | .syntax--string { color: @orange; 70 | 71 | .syntax--constant.syntax--character.syntax--escape { color: @red; } 72 | 73 | &.syntax--regexp { color: @turquoise; 74 | 75 | .syntax--source.syntax--ruby.syntax--embedded, 76 | .syntax--string.syntax--regexp.syntax--arbitrary-repitition { color: @red; } 77 | 78 | } 79 | 80 | } 81 | 82 | // CSS 83 | 84 | .syntax--css { 85 | 86 | .syntax--entity { color: @blue; } 87 | 88 | .syntax--property-name { color: @red; } 89 | 90 | .syntax--variable { color: @green; } 91 | 92 | .syntax--constant, 93 | .syntax--unit { 94 | color: @purple; 95 | background-color: @light_purple; 96 | border-radius: 3px; } 97 | 98 | .syntax--quoted { color: @orange; } 99 | 100 | } 101 | 102 | // HTML 103 | .syntax--html, 104 | .syntax--xml{ 105 | 106 | .syntax--tag { color: @blue; } 107 | 108 | .syntax--entity { color: @blue_tag; 109 | 110 | &.syntax--name { 111 | background-color: @light_blue; 112 | border-radius: 3px; } 113 | 114 | } 115 | 116 | .syntax--comment { color: @comment; } 117 | 118 | .syntax--attribute-name { color: @blue; } 119 | 120 | .syntax--quoted { color: @red; 121 | 122 | .syntax--punctuation { color: @dark_blue; } 123 | 124 | } 125 | 126 | .syntax--js .syntax--quoted { color: @orange; } 127 | 128 | } 129 | 130 | // Markdown 131 | .syntax--gfm { 132 | 133 | .syntax--link { 134 | color: @black; 135 | font-weight: bold; 136 | 137 | .syntax--entity { 138 | color: @orange; 139 | font-weight: normal; } 140 | 141 | .syntax--link { 142 | color: @green; 143 | font-weight: normal; } 144 | 145 | } 146 | 147 | .syntax--heading { 148 | font-weight: bold; 149 | color: @black; } 150 | 151 | .syntax--list, 152 | .syntax--hr { color: @red; } 153 | 154 | .syntax--quote { 155 | font-style: italic; 156 | color: @dark_blue; } 157 | 158 | .syntax--raw { color: @purple; 159 | 160 | .syntax--support { 161 | color: @red; 162 | font-weight: bold; } 163 | 164 | } 165 | 166 | } 167 | 168 | // JSON 169 | .syntax--json { 170 | 171 | .syntax--punctuation { color: @gray_dark; 172 | 173 | &.syntax--separator { color: red; } 174 | 175 | } 176 | 177 | .syntax--quoted { 178 | color: @dark_blue; 179 | background-color: @light_blue; 180 | border-radius: 3px; } 181 | 182 | .syntax--constant { 183 | color: @purple; 184 | background-color: @light_purple; 185 | border-radius: 3px; } 186 | 187 | } 188 | 189 | // YAML 190 | .syntax--yaml { 191 | 192 | .syntax--entity.syntax--name { background-color: @light_blue; } 193 | 194 | .syntax--string .syntax--punctuation { color: @gray; } 195 | 196 | } 197 | 198 | // Ruby 199 | .syntax--ruby { 200 | 201 | .syntax--entity.syntax--name { color: @purple; } 202 | 203 | .syntax--string { color: @red; } 204 | 205 | } 206 | 207 | // Ruby ERB files 208 | .syntax--erb { 209 | 210 | .syntax--embedded.syntax--erb { 211 | color: @purple; 212 | background-color: @light_purple; 213 | border-radius: 3px; 214 | 215 | .syntax--variable { color: @purple_dark; } 216 | 217 | .syntax--punctuation { color: @purple; } 218 | 219 | } 220 | 221 | } 222 | -------------------------------------------------------------------------------- /styles/colors.less: -------------------------------------------------------------------------------- 1 | @blue: #5fafef; 2 | @selection_blue: #cfe9ff; 3 | @light_blue: rgba(137,198,243,.1); 4 | @dark_blue: #2F6F9F; 5 | @light_blue_border: #aacbdf; 6 | @white: #ffffff; 7 | @black: #000000; 8 | @red: #F93232; 9 | @dark_red: #d44950; 10 | @gray_light2: #e1e1e1; 11 | @gray_light: #adadad; 12 | @gray: #777777; 13 | @gray_dark: #333333; 14 | @green: #699D36; 15 | @green_dark: #447217; 16 | @green_light: rgba(107,190,126,.1); 17 | @purple: #6700B9; 18 | @purple_dark: #47007f; 19 | @light_purple: rgba(118,83,119,.07); 20 | @orange: #E9AD1A; 21 | @dark_orange: #BC670F; 22 | @turquoise: #2aa198; 23 | 24 | @blue_text: @blue; 25 | @blue_tag: @dark_blue; 26 | @gutter: #f8f8f8; // gray 27 | @gutter_text: @gray; 28 | @gutter_highlight: @selection_blue; 29 | @cursor: #535353; // gray 30 | @selection: @selection_blue; 31 | @comment: @gray_light; 32 | --------------------------------------------------------------------------------