├── views ├── schedule.html ├── import.html ├── about.html ├── settings.css ├── paths.html ├── settings.html └── settings.js ├── theme ├── default.css ├── monokai-dark-soda.css ├── railscasts.css ├── obsidian.css ├── visual-studio.css ├── delkos.css ├── nando.css ├── delkoseclipse.css ├── visual-studio-ex.css ├── zamiere.css ├── hammsidian.css ├── light-table.css ├── lightdelkos.css ├── peacock.css ├── dracula.css ├── aquaman.css ├── Earth.css ├── pixie.css ├── visual-studio-2012.css └── NightLion.css ├── .jshintrc ├── package.json ├── codeMirrorAddons.js ├── LICENSE ├── ColorProcessor.js ├── reset.css ├── main.js ├── SettingsManager.js ├── ThemeManager.js ├── lib ├── ko.factory.js ├── spromise.js └── tinycolor.js ├── mirror-style ├── variables.mustache ├── main.js └── template.less ├── MenuManager.js └── README.md /views/schedule.html: -------------------------------------------------------------------------------- 1 |
Schedule content
2 | -------------------------------------------------------------------------------- /theme/default.css: -------------------------------------------------------------------------------- 1 | .cm-s-default .CodeMirror-lines { 2 | } 3 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "undef":true, 3 | "unused":true, 4 | "curly":true, 5 | "indent":4, 6 | "devel":true, 7 | "laxcasebreak":true, 8 | "globals":{ 9 | "require": true, 10 | "define": true, 11 | "$": true, 12 | "window": true, 13 | "_": true, 14 | "brackets": true, 15 | "CodeMirror": true 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /views/import.html: -------------------------------------------------------------------------------- 1 |
2 | http://studiostyl.es/ 3 | 4 |
5 |
6 | 7 |
8 |
9 |
10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Themes", 3 | "name": "themes", 4 | "description": "CodeMirror and custom themes in Brackets", 5 | "version": "2.0.6", 6 | "author": "Miguel Castillo", 7 | "email": "manchagnu@gmail.com", 8 | "homepage": "https://github.com/MiguelCastillo/Brackets-Themes", 9 | "keywords": ["themes"], 10 | "repository": { 11 | "type": "git", 12 | "url": "git://github.com/MiguelCastillo/Brackets-Themes.git" 13 | }, 14 | "engines": { 15 | "brackets": ">=0.43.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /views/about.html: -------------------------------------------------------------------------------- 1 |
2 |
Version:
3 |
4 | 5 |
Author:
6 |
7 | 8 |
Email:
9 |
10 | 11 |
Twitter:
12 |
@manchagnu
13 | 14 |
Homepage:
15 |
16 |
17 | -------------------------------------------------------------------------------- /views/settings.css: -------------------------------------------------------------------------------- 1 | .themeSettings * { 2 | /* 3 | -moz-box-sizing: border-box; 4 | -webkit-box-sizing: border-box; 5 | box-sizing: border-box; 6 | */ 7 | } 8 | 9 | .themeSettings td { 10 | padding: 2px; 11 | } 12 | 13 | .themeSettings .modal-body { 14 | min-height: 300px; 15 | max-height: 300px; 16 | padding: 4px; 17 | } 18 | 19 | .themeSettings .row { 20 | margin: 0px; 21 | } 22 | 23 | .themeSettings .paths-header { 24 | height: 24px; 25 | } 26 | 27 | .themeSettings .label { 28 | padding: 4px !important; 29 | } 30 | 31 | 32 | .themeSettings .imported-themes { 33 | padding-top: 4px; 34 | } 35 | 36 | .themeSettings .imported-themes .status:after { 37 | padding-left: 1em; 38 | content: "success"; 39 | color: green; 40 | } 41 | 42 | .themeSettings .imported-themes .error:after { 43 | content: "failed"; 44 | color: red; 45 | } 46 | -------------------------------------------------------------------------------- /views/paths.html: -------------------------------------------------------------------------------- 1 |
2 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 22 | 23 | 24 | 25 |
17 | 18 | 19 | Remove 20 | 21 |
26 | -------------------------------------------------------------------------------- /codeMirrorAddons.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Brackets Themes Copyright (c) 2014 Miguel Castillo. 3 | * 4 | * Licensed under MIT 5 | */ 6 | 7 | 8 | define(function (require, exports, module) { 9 | "use strict"; 10 | 11 | var spromise = require("lib/spromise"); 12 | 13 | function initAddons(CodeMirror) { 14 | // Set some default value for codemirror... 15 | CodeMirror.defaults.highlightSelectionMatches = true; 16 | CodeMirror.defaults.styleSelectedText = true; 17 | } 18 | 19 | function init() { 20 | /** 21 | * This is where it all starts to load up... 22 | */ 23 | return spromise(function(resolve) { 24 | brackets.getModule([ 25 | "thirdparty/CodeMirror/lib/codemirror", 26 | "thirdparty/CodeMirror/addon/selection/mark-selection", 27 | "thirdparty/CodeMirror/addon/search/match-highlighter" 28 | ], resolve); 29 | }).done(initAddons); 30 | } 31 | 32 | return { 33 | ready: init().done 34 | }; 35 | }); 36 | 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 Miguel Castillo. 2 | 3 | Licensed under MIT 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a 6 | copy of this software and associated documentation files (the "Software"), 7 | to deal in the Software without restriction, including without limitation 8 | the rights to use, copy, modify, merge, publish, distribute, sublicense, 9 | and/or sell copies of the Software, and to permit persons to whom the 10 | Software is furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all 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, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 21 | DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /views/settings.html: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /ColorProcessor.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Brackets Themes Copyright (c) 2014 Miguel Castillo. 3 | * 4 | * Licensed under MIT 5 | */ 6 | 7 | 8 | define(function (require, exports, module) { 9 | "use strict"; 10 | 11 | var tinycolor = require("lib/tinycolor"); 12 | 13 | 14 | function getColor(content, expression) { 15 | var color = expression.exec(content); 16 | if (color) { 17 | color = color[1]; 18 | } 19 | 20 | return color; 21 | } 22 | 23 | 24 | function getBackgroundColor(content) { 25 | //http://regex101.com/r/yI2wL5/5 26 | return getColor(content, /\.CodeMirror\s*\{[\s\S]*?(?:background(?:-color)?\s*:\s*([^;\s}]+))/gmi); 27 | } 28 | 29 | 30 | function getFontColor(content) { 31 | //http://regex101.com/r/gQ4yO9/1 32 | return getColor(content, /\.CodeMirror\s*\{[\s\S]*?(?:color\s*:\s*([^;\s}]+))/gmi); 33 | } 34 | 35 | 36 | function getMatchingBracketColor(content) { 37 | //http://regex101.com/r/gQ4yO9/2 38 | return getColor(content, /\.CodeMirror-matchingbracket\s*\{[\s\S]*?(?:color\s*:+\s*([^;\s}]+))/gmi); 39 | } 40 | 41 | 42 | function isDark(content) { 43 | var backgroundColor = getBackgroundColor(content); 44 | return backgroundColor ? tinycolor(backgroundColor).isDark() : false; 45 | } 46 | 47 | 48 | return { 49 | getBackgroundColor: getBackgroundColor, 50 | getFontColor: getFontColor, 51 | getMatchingBracketColor: getMatchingBracketColor, 52 | isDark: isDark 53 | }; 54 | }); 55 | -------------------------------------------------------------------------------- /reset.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Dark themes 3 | * aquaman, dracula, hammsidian, light-table, monakai-dark-soda, nando, nightlion, obsidian, pixie, ralicasts, zamiere, 4 | * 3024-night, ambiance, base16-dark, blackboard, cobalt, erlang-dark, lesser-dark, mbo, midnight, monakai, night, paraiso-dark 5 | * pastel-on-dark, rubyblue, the-matrix, tomorrow-night-eighties, twilight, vibrant-ink, xq-dark 6 | */ 7 | 8 | 9 | .CodeMirror:not(.cm-s-default) .CodeMirror-scroll { 10 | background-color: transparent; 11 | } 12 | 13 | .CodeMirror:not(.cm-s-default) .CodeMirror-activeline-background, 14 | .CodeMirror:not(.cm-s-default) .CodeMirror-activeline .CodeMirror-gutter-elt { 15 | background-color: transparent !important; 16 | } 17 | 18 | .CodeMirror:not(.cm-s-default) .CodeMirror-activeline-background { 19 | outline: 1px solid rgba(255, 255, 255, 0.5); 20 | } 21 | 22 | .CodeMirror:not(.cm-s-default) .CodeMirror-matchingtag { 23 | background: transparent; 24 | } 25 | 26 | .CodeMirror:not(.cm-s-default) .CodeMirror-activeline .CodeMirror-gutter-elt { 27 | z-index: 5; 28 | } 29 | 30 | 31 | /** 32 | * Overrides for CodeMirror themes. 33 | */ 34 | 35 | .dark #editor-holder div.CodeMirror-cursor , 36 | .dark #editor-holder div.CodeMirror-secondarycursor { 37 | border-left: 1px solid #dedede; 38 | } 39 | 40 | .dark #editor-holder .CodeMirror-focused .CodeMirror-selected { 41 | background: blue; 42 | opacity: 0.2; 43 | } 44 | 45 | .dark #editor-holder .CodeMirror-matchingbracket, 46 | .dark #editor-holder .CodeMirror-matchingtag { 47 | background-color: #2e5c00 !important; 48 | color: #ddd !important; 49 | } 50 | -------------------------------------------------------------------------------- /theme/monokai-dark-soda.css: -------------------------------------------------------------------------------- 1 | .cm-s-monokai-dark-soda.CodeMirror { 2 | background-color: #242424; 3 | color: #fff; 4 | } 5 | 6 | .CodeMirror .CodeMirror-cursor { 7 | border-left: 1px solid #f8f8f0; 8 | z-index: 3; 9 | } 10 | 11 | .CodeMirror-selected { 12 | background: rgba(0, 100, 125, 0.5); 13 | } 14 | 15 | .cm-s-monokai-dark-soda .cm-keyword {color: #ff007f;} 16 | .cm-s-monokai-dark-soda .cm-atom {color: #c48cff;} 17 | .cm-s-monokai-dark-soda .cm-number {color: #c48cff;} 18 | .cm-s-monokai-dark-soda .cm-def {color: #fd963f;} 19 | .cm-s-monokai-dark-soda .cm-variable {color: #fff;} 20 | .cm-s-monokai-dark-soda .cm-variable-2 {color: #c48cff;} 21 | .cm-s-monokai-dark-soda .cm-property {color: #52e3f6;} 22 | .cm-s-monokai-dark-soda .cm-operator {color: #ff007f;} 23 | .cm-s-monokai-dark-soda .cm-comment {color: #8c8c8c;} 24 | .cm-s-monokai-dark-soda .cm-string {color: #ece47e;} 25 | .cm-s-monokai-dark-soda .cm-string-2 {color: #ece47e;} 26 | .cm-s-monokai-dark-soda .cm-meta {color: #a7ec21;} 27 | .cm-s-monokai-dark-soda .cm-qualifier {color: #a7ec21;} 28 | .cm-s-monokai-dark-soda .cm-bracket {color: #f9faf4;} 29 | .cm-s-monokai-dark-soda .cm-tag {color: #ff007f;} 30 | .cm-s-monokai-dark-soda .cm-attribute {color: #a7ec21;} 31 | 32 | .cm-s-monokai-dark-soda .cm-matchhighlight:not(.CodeMirror-selectedtext) { 33 | background-color: #616161; 34 | color: white; 35 | } 36 | 37 | .cm-s-monokai-dark-soda .cm-matchhighlight { 38 | background-color: #00CCFF; 39 | color: #242424; 40 | } 41 | 42 | .CodeMirror .CodeMirror-matchingbracket { 43 | color: #a7ec21; 44 | font-weight: bold; 45 | } 46 | 47 | .CodeMirror .CodeMirror-gutters { 48 | background-color: #242424; 49 | } 50 | 51 | .CodeMirror .CodeMirror-searching { 52 | color: #242424; 53 | background-color: #ffe69d !important; 54 | } 55 | 56 | .CodeMirror-activeline .CodeMirror-gutter-elt { 57 | color: #eeeeee; 58 | } 59 | -------------------------------------------------------------------------------- /theme/railscasts.css: -------------------------------------------------------------------------------- 1 | .cm-s-railscasts.CodeMirror 2 | { 3 | background-color: #232323; 4 | color: #E0E2E4; 5 | } 6 | 7 | .cm-s-railscasts.CodeMirror .CodeMirror-lines pre 8 | { 9 | z-index: 3; 10 | } 11 | 12 | .cm-s-railscasts.CodeMirror .CodeMirror-gutters 13 | { 14 | background-color: #293134; 15 | } 16 | 17 | .cm-s-railscasts.CodeMirror .CodeMirror-linenumber 18 | { 19 | background-color: #1F1F1F; 20 | color: #81969A; 21 | } 22 | 23 | .cm-s-railscasts.CodeMirror .CodeMirror-matchingbracket 24 | { 25 | color: #dedede; 26 | outline: 1px solid #dedede; 27 | } 28 | 29 | .cm-s-railscasts.CodeMirror .CodeMirror-linebackground, 30 | .cm-s-railscasts.CodeMirror .CodeMirror-activeline 31 | { 32 | background-color: #2F393C; 33 | } 34 | 35 | .cm-s-railscasts.CodeMirror .cm-atom { color: #678CB1; } 36 | .cm-s-railscasts.CodeMirror .cm-qualifier { color: #678CB1; } 37 | .cm-s-railscasts.CodeMirror .cm-keyword { color: #EC7600; } 38 | .cm-s-railscasts.CodeMirror .cm-comment { color: #BC9458 } 39 | .cm-s-railscasts.CodeMirror .cm-string {color: #93C763;} 40 | .cm-s-railscasts.CodeMirror .cm-string-2 {color: #93C763;} 41 | .cm-s-railscasts.CodeMirror .cm-variable { color: #E0E2E4; } 42 | .cm-s-railscasts.CodeMirror .cm-variable-2 { color: #E0E2E4; } 43 | .cm-s-railscasts.CodeMirror .cm-tag { color: #678CB1; } 44 | .cm-s-railscasts.CodeMirror .cm-attribute { color: #678CB1; } 45 | .cm-s-railscasts.CodeMirror .cm-property { color: #E0E2E4; } 46 | .cm-s-railscasts.CodeMirror .cm-number { color: #FFCD22; } 47 | 48 | .cm-s-railscasts.CodeMirror .cm-matchhighlight:not(.CodeMirror-selectedtext) 49 | { 50 | background-color: #616161; 51 | color: white; 52 | } 53 | 54 | .cm-s-railscasts.CodeMirror .CodeMirror-selectedtext 55 | { 56 | background-color: #804000; 57 | } 58 | 59 | .cm-s-railscasts.CodeMirror .CodeMirror-selected 60 | { 61 | background: transparent; 62 | } 63 | 64 | .cm-s-railscasts.CodeMirror-focused .CodeMirror-selected 65 | { 66 | background: transparent; 67 | } 68 | 69 | .cm-s-railscasts.CodeMirror .CodeMirror-cursor 70 | { 71 | z-index: 5; 72 | border-left: 1px solid white; 73 | } 74 | -------------------------------------------------------------------------------- /theme/obsidian.css: -------------------------------------------------------------------------------- 1 | .cm-s-obsidian.CodeMirror 2 | { 3 | font-family: monaco; 4 | background-color: #293134; 5 | color: #E0E2E4; 6 | } 7 | 8 | .cm-s-obsidian.CodeMirror .CodeMirror-lines pre 9 | { 10 | z-index: 3; 11 | } 12 | 13 | .cm-s-obsidian.CodeMirror .CodeMirror-gutters 14 | { 15 | background-color: #293134; 16 | } 17 | 18 | .cm-s-obsidian.CodeMirror .CodeMirror-linenumber 19 | { 20 | background-color: #293134; 21 | color: #81969A; 22 | } 23 | 24 | .cm-s-obsidian.CodeMirror .CodeMirror-matchingbracket 25 | { 26 | color: #dedede; 27 | outline: 1px solid #dedede; 28 | } 29 | 30 | .cm-s-obsidian.CodeMirror .CodeMirror-linebackground, 31 | .cm-s-obsidian.CodeMirror .CodeMirror-activeline 32 | { 33 | background-color: #2F393C; 34 | } 35 | 36 | 37 | .cm-s-obsidian.CodeMirror .cm-atom { color: #EC7600; } 38 | .cm-s-obsidian.CodeMirror .cm-qualifier { color: #678CB1; } 39 | 40 | /*CodeMirror does not add notation for css... Which would be really nice. */ 41 | /*.cm-s-obsidian.CodeMirror .cm-property { color: red; }*/ 42 | 43 | .cm-s-obsidian.CodeMirror .cm-keyword { color: #93C763; } 44 | .cm-s-obsidian.CodeMirror .cm-comment { color: #7D8C93; } 45 | .cm-s-obsidian.CodeMirror .cm-string {color: #EC7600;} 46 | .cm-s-obsidian.CodeMirror .cm-string-2 {color: #EC7600;} 47 | .cm-s-obsidian.CodeMirror .cm-variable { color: #E0E2E4; } 48 | .cm-s-obsidian.CodeMirror .cm-variable-2 { color: #E0E2E4; } 49 | .cm-s-obsidian.CodeMirror .cm-tag { color: #678CB1; } 50 | .cm-s-obsidian.CodeMirror .cm-attribute { color: #678CB1; } 51 | .cm-s-obsidian.CodeMirror .cm-property { color: #E0E2E4; } 52 | .cm-s-obsidian.CodeMirror .cm-number { color: #FFCD22; } 53 | 54 | .cm-s-obsidian.CodeMirror .cm-matchhighlight:not(.CodeMirror-selectedtext) 55 | { 56 | background-color: #616161; 57 | color: white; 58 | } 59 | 60 | .cm-s-obsidian.CodeMirror .CodeMirror-selectedtext 61 | { 62 | background-color: #804000; 63 | } 64 | 65 | .cm-s-obsidian.CodeMirror .CodeMirror-selected 66 | { 67 | background: transparent; 68 | } 69 | 70 | .cm-s-obsidian.CodeMirror-focused .CodeMirror-selected 71 | { 72 | background: transparent; 73 | } 74 | 75 | .cm-s-obsidian.CodeMirror .CodeMirror-cursor 76 | { 77 | z-index: 5; 78 | border-left: 1px solid white; 79 | } 80 | 81 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Brackets Themes Copyright (c) 2014 Miguel Castillo. 3 | * 4 | * Licensed under MIT 5 | */ 6 | 7 | 8 | define(function (require, exports, module) { 9 | "use strict"; 10 | 11 | var EditorManager = brackets.getModule("editor/EditorManager"), 12 | ExtensionUtils = brackets.getModule("utils/ExtensionUtils"), 13 | AppInit = brackets.getModule("utils/AppInit"); 14 | 15 | // Load up reset.css to override brackground settings from brackets because 16 | // they make the themes look really bad. 17 | ExtensionUtils.loadStyleSheet(module, "reset.css"); 18 | ExtensionUtils.loadStyleSheet(module, "views/settings.css"); 19 | 20 | 21 | function init(SettingsManager, ThemeManager, MenuManager, codeMirrorAddons) { 22 | function initMenu() { 23 | var paths = SettingsManager.getValue("paths"); 24 | 25 | paths.forEach(function(path) { 26 | ThemeManager.loadDirectory(path.path).done(function() { 27 | var themes = Array.prototype.slice.call(arguments); 28 | if (themes.length) { 29 | MenuManager.loadThemes(themes, path.path); 30 | } 31 | }); 32 | }); 33 | } 34 | 35 | 36 | function setDocumentType(evt, doc) { 37 | if (!doc) { 38 | return; 39 | } 40 | 41 | var cm = doc._codeMirror; 42 | var mode = cm && cm.getDoc().getMode(); 43 | var docType = mode && (mode.helperType || mode.name); 44 | $(cm.display.wrapper).attr("doctype", docType || cm.options.mode); 45 | } 46 | 47 | 48 | function initAll() { 49 | MenuManager.init(); 50 | initMenu(); 51 | } 52 | 53 | 54 | $(SettingsManager).on("imported", initMenu); 55 | codeMirrorAddons.ready(initAll); 56 | 57 | $(EditorManager).on("activeEditorChange.themes", setDocumentType); 58 | setDocumentType(null, EditorManager.getActiveEditor()); 59 | } 60 | 61 | 62 | // Init when app is ready 63 | AppInit.htmlReady(function () { 64 | require(["SettingsManager","ThemeManager","MenuManager","codeMirrorAddons"], init); 65 | }); 66 | }); 67 | 68 | -------------------------------------------------------------------------------- /theme/visual-studio.css: -------------------------------------------------------------------------------- 1 | .cm-s-visual-studio.CodeMirror 2 | { 3 | background-color: #fefefe; 4 | color:black; 5 | } 6 | 7 | .cm-s-visual-studio.CodeMirror .CodeMirror-gutters 8 | { 9 | background-color: #fefefe; 10 | } 11 | 12 | .cm-s-visual-studio.CodeMirror .CodeMirror-linenumber 13 | { 14 | color: #0E97A1; 15 | background-color: #fefefe; 16 | } 17 | 18 | .cm-s-visual-studio.CodeMirror .CodeMirror-matchingbracket 19 | { 20 | color: black; 21 | background-color: #dedede; 22 | } 23 | 24 | .cm-s-visual-studio.CodeMirror .CodeMirror-linebackground 25 | { 26 | outline: 2px solid #dddddd; 27 | } 28 | 29 | .cm-s-visual-studio .CodeMirror-activeline-background, 30 | .cm-s-visual-studio .CodeMirror-activeline .CodeMirror-gutter-elt 31 | { 32 | background: transparent !important; 33 | } 34 | 35 | .cm-s-visual-studio .CodeMirror-activeline-background 36 | { 37 | outline: 2px solid #dddddd; 38 | } 39 | 40 | .cm-s-visual-studio.CodeMirror .cm-matchhighlight 41 | { 42 | background-color: yellow; 43 | } 44 | 45 | .cm-s-visual-studio.CodeMirror .CodeMirror-selectedtext 46 | { 47 | background-color: #ADD6FF; 48 | } 49 | 50 | .cm-s-visual-studio.CodeMirror .CodeMirror-selected, 51 | .cm-s-visual-studio.CodeMirror-focused .CodeMirror-selected 52 | { 53 | background: transparent; 54 | } 55 | 56 | 57 | .cm-s-visual-studio.CodeMirror .cm-atom { color: blue; } 58 | .cm-s-visual-studio.CodeMirror .cm-qualifier { color: #800000; } 59 | 60 | /*CodeMirror does not add notation for css... Which would be really nice. */ 61 | /*.cm-s-visual-studio.CodeMirror .cm-property { color: red; }*/ 62 | 63 | 64 | .cm-s-visual-studio.CodeMirror .cm-def { color: black; } 65 | .cm-s-visual-studio.CodeMirror .cm-keyword { color: blue; } 66 | .cm-s-visual-studio.CodeMirror .cm-comment { color: green; } 67 | .cm-s-visual-studio.CodeMirror .cm-string {color: #800000;} 68 | .cm-s-visual-studio.CodeMirror .cm-string-2 {color: #800000;} 69 | .cm-s-visual-studio.CodeMirror .cm-variable { color: black; } 70 | .cm-s-visual-studio.CodeMirror .cm-variable-2 { color: black; } 71 | .cm-s-visual-studio.CodeMirror .cm-tag { color: #800000; } 72 | .cm-s-visual-studio.CodeMirror .cm-attribute { color: red; } 73 | .cm-s-visual-studio.CodeMirror .cm-property { color: black; } 74 | 75 | .CodeMirror[doctype=less] .cm-property, 76 | .CodeMirror[doctype=css] .cm-property { 77 | color: red !important; 78 | } 79 | -------------------------------------------------------------------------------- /theme/delkos.css: -------------------------------------------------------------------------------- 1 | /* Delkos theme by David Sánchez i Gregori 2 | * Licensed under BSD-License 3 | */ 4 | .cm-s-delkos.CodeMirror {background: #262626; color: #f8f8f8;} 5 | .cm-s-delkos div.CodeMirror-selected { 6 | background-color: #484848; 7 | } 8 | .cm-s-delkos .CodeMirror-gutters {background: #222; border-right: 0pt;} 9 | .cm-s-delkos .CodeMirror-cursor { 10 | border-left: 1pt solid rgb(255, 255, 255) !important; 11 | } 12 | 13 | .cm-s-delkos .CodeMirror-activeline .CodeMirror-gutter-elt { 14 | color: #eeeeee; 15 | } 16 | 17 | .cm-s-delkos span.cm-comment {color: #95927e;text-shadow: 0 0 2pt #000;} 18 | .cm-s-delkos span.cm-atom {color: #ccaaff;text-shadow: 0 0 2pt #c000aa;} 19 | .cm-s-delkos span.cm-number {color: #ff7272;text-shadow: 0 0 2pt #aa0000;} 20 | .cm-s-delkos span.cm-property, .cm-s-delkos span.cm-attribute {color: #c7e58a;} 21 | .cm-s-delkos span.cm-keyword { 22 | color: #91c0ff; 23 | text-shadow: 0 0 1pt #052148; 24 | } 25 | 26 | .cm-s-delkos span.cm-string { 27 | color: #ffa2ea; 28 | text-shadow: 0 0 4pt #f01662; 29 | } 30 | 31 | .cm-s-delkos span.cm-variable {color: #aaeaaa;text-shadow: 0 0 2pt #327232;} 32 | .cm-s-delkos span.cm-variable-2 {color: #64eaff;text-shadow: 0 0 4pt #0092ff;} 33 | 34 | .cm-s-delkos span.cm-def{color: #ffd800;text-shadow: 0 0 .25em rgba(206, 143, 0, 0.79);} 35 | .cm-s-delkos span.cm-bracket{color: #f8f8f8;text-shadow: 0 0 2pt #CAEAFF;} 36 | 37 | .cm-s-delkos span.cm-tag {color: #ff61bc;text-shadow: 0 0 2pt #b22878;} 38 | 39 | .cm-s-delkos span.cm-link {color: #ae81ff;} 40 | .cm-s-delkos span.cm-error {background: #ff3292; color: #f8f8f0;} 41 | 42 | .cm-s-delkos .CodeMirror-activeline-background {background-color: rgba(0, 0, 0, 0.1) !important;} 43 | 44 | 45 | .cm-s-delkos .cm-tag.cm-bracket.CodeMirror-matchingtag, 46 | .cm-s-delkos .CodeMirror-matchingbracket { 47 | color: white !important; 48 | box-shadow: 0 0 1em #0AE0FF; 49 | border-radius:0.5em; 50 | border:1pt solid #00ACF0; 51 | background-color: #0AE0FF; 52 | -webkit-animation: hilightMB 2s alternate ease-in-out infinite; 53 | } 54 | @-webkit-keyframes hilightMB { 55 | 0% 56 | { 57 | background-color:#FF0AE0; 58 | border:1pt solid #F000AC; 59 | box-shadow: 0 0 1em #FF0AE0; 60 | } 61 | 62 | 50% 63 | { 64 | background-color: transparent; 65 | border:1pt solid transparent; 66 | box-shadow: 0 0 1em transparent; 67 | } 68 | 69 | 100% 70 | { 71 | background-color:#0AE0FF; 72 | border:1pt solid #00ACF0; 73 | box-shadow: 0 0 1em #0AE0FF; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /theme/nando.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Héctor Fernando Hurtado 3 | * @version 2013-05-27 4 | */ 5 | 6 | .cm-s-nando.CodeMirror { 7 | background: rgb(30,30,30); /* Old browsers */ 8 | background: -moz-linear-gradient(top, rgba(30,30,30,1) 0%, black 100%); /* FF3.6+ */ 9 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,30,30,1)), color-stop(100%,black)); /* Chrome,Safari4+ */ 10 | background: -webkit-linear-gradient(top, rgba(30,30,30,1) 0%,black 100%); /* Chrome10+,Safari5.1+ */ 11 | background: -o-linear-gradient(top, rgba(30,30,30,1) 0%,black 100%); /* Opera 11.10+ */ 12 | background: -ms-linear-gradient(top, rgba(30,30,30,1) 0%,black 100%); /* IE10+ */ 13 | background: linear-gradient(to bottom, rgba(30,30,30,1) 0%,black 100%); /* W3C */ 14 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e1e1e', endColorstr='#353535',GradientType=0 ); /* IE6-9 */ 15 | 16 | color: #fbffa0; 17 | } 18 | .cm-s-nando div.CodeMirror-selected {background: #075601 !important;} 19 | .cm-s-nando .CodeMirror-activeline-background { background: #222 !important; } 20 | 21 | .cm-s-nando .CodeMirror-gutters { background: rgb( 30, 30, 30 ); border-right:1px solid #f4f4f4; } 22 | 23 | .cm-s-nando span.cm-meta {color: #c1c1c1;} 24 | .cm-s-nando span.cm-keyword { line-height: 1em; font-weight: bold; color: #aaffb4; } 25 | .cm-s-nando span.cm-atom {color: #f4f4f4;} 26 | .cm-s-nando span.cm-number {color: #f4f4f4;} 27 | .cm-s-nando span.cm-def {color: #e7adff;} 28 | .cm-s-nando span.cm-variable {color: #f4f4f4;} 29 | .cm-s-nando span.cm-variable-2 {color: #f4f4f4;} 30 | .cm-s-nando span.cm-variable-3 {color: #f4f4f4;} 31 | .cm-s-nando span.cm-property {color: #c1c1c1;} 32 | .cm-s-nando span.cm-operator {color: #f4f4f4;} 33 | .cm-s-nando span.cm-comment {color: #c1c1c1;} 34 | .cm-s-nando span.cm-string {color: #c1c1c1;} 35 | .cm-s-nando span.cm-string-2 {color: #c1c1c1;} 36 | .cm-s-nando span.cm-error {color: #ff7a7a;} 37 | .cm-s-nando span.cm-qualifier {color: #adf6ff;} 38 | .cm-s-nando span.cm-builtin {color: #f4f4f4;} 39 | .cm-s-nando span.cm-bracket {color: #f4f4f4;} 40 | .cm-s-nando span.cm-tag {color: #aaffb4;} 41 | .cm-s-nando span.cm-attribute {color: #adf6ff;} 42 | .cm-s-nando span.cm-link {color: #a9d7f9;} 43 | 44 | .cm-s-nando .CodeMirror-cursor { border-left: 1px solid white !important; } 45 | 46 | .cm-s-nando .CodeMirror-linenumber { color: #f4f4f4; } 47 | div.CodeMirror span.CodeMirror-matchingbracket { color: #f4f4f4; } 48 | 49 | .cm-s-nando .CodeMirror-matchingbracket { 50 | /* outline:1px solid grey; */ 51 | font-weight: bold; 52 | color: #adf6ff !important; 53 | } 54 | -------------------------------------------------------------------------------- /SettingsManager.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Brackets Themes Copyright (c) 2014 Miguel Castillo. 3 | * 4 | * Licensed under MIT 5 | */ 6 | 7 | 8 | define(function (require, exports, module) { 9 | "use strict"; 10 | 11 | var PreferencesManager = brackets.getModule("preferences/PreferencesManager"), 12 | FileUtils = brackets.getModule("file/FileUtils"), 13 | ExtensionUtils = brackets.getModule("utils/ExtensionUtils"), 14 | ExtensionLoader = brackets.getModule("utils/ExtensionLoader"), 15 | ViewCommandHandlers = brackets.getModule("view/ViewCommandHandlers"), 16 | SettingsDialog = require("views/settings"); 17 | 18 | var prefs = PreferencesManager.getExtensionPrefs("themes-brackets-extension"); 19 | 20 | var cm_path = FileUtils.getNativeBracketsDirectoryPath() + "/thirdparty/CodeMirror/theme", 21 | user_path = ExtensionUtils.getModulePath(module, "theme"), 22 | custom_path = user_path.substr(0, ExtensionLoader.getUserExtensionPath().lastIndexOf('/')) + "/themes"; 23 | 24 | var defaults = { 25 | paths: [{path:custom_path}, {path:user_path}, {path:cm_path}] 26 | }; 27 | 28 | 29 | function openDialog() { 30 | SettingsDialog.open(exports); 31 | } 32 | 33 | function closeDialog() { 34 | SettingsDialog.close(); 35 | } 36 | 37 | function getValue(name) { 38 | return prefs.get(name); 39 | } 40 | 41 | function setValue(name, value) { 42 | prefs.set(name, value); 43 | $(exports).trigger("change", arguments); 44 | $(exports).trigger("change:" + arguments[0], [arguments[1]]); 45 | } 46 | 47 | function getAll() { 48 | var result = {}; 49 | Object.keys(defaults).forEach(function(value) { 50 | result[value] = prefs.get(value); 51 | }); 52 | return result; 53 | } 54 | 55 | function reset() { 56 | prefs.set("paths", defaults.paths); 57 | } 58 | 59 | function getPreferences() { 60 | return prefs; 61 | } 62 | 63 | 64 | // Define all default values 65 | prefs.definePreference("paths", "array", defaults.paths); 66 | 67 | 68 | $(SettingsDialog).on("imported", function(evt, imported) { 69 | $(exports).triggerHandler("imported", [imported]); 70 | }); 71 | 72 | 73 | exports.defaults = defaults; 74 | exports.reset = reset; 75 | exports.openDialog = openDialog; 76 | exports.closeDialog = closeDialog; 77 | exports.getValue = getValue; 78 | exports.setValue = setValue; 79 | exports.getAll = getAll; 80 | exports.customPath = custom_path; 81 | exports.getPreferences = getPreferences; 82 | }); 83 | -------------------------------------------------------------------------------- /theme/delkoseclipse.css: -------------------------------------------------------------------------------- 1 | /* delkoseclipse theme by David Sánchez i Gregori 2 | * Licensed under BSD-License 3 | */ 4 | .cm-s-delkoseclipse.CodeMirror {background: #FCFCFC; color: #484848;text-shadow: 0 0 2pt #eAeAeA;} 5 | .cm-s-delkoseclipse div.CodeMirror-selected { 6 | background-color: #EAEDEF; 7 | } 8 | .cm-s-delkoseclipse .CodeMirror-gutters {background: #F0F0F0; border-right: 0pt;} 9 | .cm-s-delkoseclipse .CodeMirror-cursor { 10 | border-left: 1pt solid rgba(88, 14, 111, 0.75) !important; 11 | border-right: 1pt solid rgba(98, 20, 116, 0.25) !important; 12 | } 13 | 14 | .cm-s-delkoseclipse .CodeMirror-activeline .CodeMirror-gutter-elt { 15 | color: #058; 16 | } 17 | 18 | .cm-s-delkoseclipse span.cm-comment {color: #9a9a9a;} 19 | .cm-s-delkoseclipse span.cm-atom {color: #7d4dd3;text-shadow: 0 0 2pt #fdddfc;} 20 | .cm-s-delkoseclipse span.cm-number {color: #f33;text-shadow: 0 0 2pt #ffe4e4;} 21 | .cm-s-delkoseclipse span.cm-property {color: #81b700;text-shadow: 0 0 2pt #cff4b4} 22 | .cm-s-delkoseclipse span.cm-attribute {color: #00a07c;text-shadow: 0 0 2pt #93ebd0} 23 | 24 | .cm-s-delkoseclipse span.cm-keyword { 25 | color: #034c9a; 26 | text-shadow: 0 0 3pt #c7d6e5; 27 | } 28 | 29 | .cm-s-delkoseclipse span.cm-string { 30 | color: #f268ed; 31 | text-shadow: 0 0 4pt #ffd6f6; 32 | } 33 | 34 | .cm-s-delkoseclipse span.cm-variable {color: #327232;text-shadow: 0 0 2pt #e6ffe6;} 35 | .cm-s-delkoseclipse span.cm-variable-2 {color: #44a8ce;text-shadow: 0 0 4pt #cbddef;} 36 | 37 | .cm-s-delkoseclipse span.cm-def{color: #c19700;text-shadow: 0 0 2pt #edd4af;} 38 | .cm-s-delkoseclipse span.cm-bracket{color: #7491a5;text-shadow: 0 0 2pt #daf1ff;} 39 | 40 | .cm-s-delkoseclipse span.cm-tag {color: #b22878;text-shadow: 0 0 2pt #ffc9ea;} 41 | 42 | .cm-s-delkoseclipse span.cm-link {color: #8d5ac1;text-shadow: 0 0 2pt #f3e8ff;} 43 | .cm-s-delkoseclipse span.cm-error {background: #ff3292; color: #f8f8f0;} 44 | 45 | .cm-s-delkoseclipse .CodeMirror-activeline-background {background-color: rgba(0, 0, 0, 0.1) !important;} 46 | 47 | .cm-s-delkoseclipse .CodeMirror-matchingbracket { 48 | color: black !important; 49 | box-shadow: 0 0 1em #0AE0FF; 50 | border-radius:0.25em; 51 | border:1pt solid #00ACF0; 52 | background-color: #c1f5ff; 53 | -webkit-animation: hilightMB 2s alternate ease-in-out infinite; 54 | } 55 | @-webkit-keyframes hilightMB { 56 | 0% 57 | { 58 | background-color:#ffccf7; 59 | border:1pt solid #F000AC; 60 | box-shadow: 0 0 1em #FF0AE0; 61 | } 62 | 63 | 50% 64 | { 65 | background-color: transparent; 66 | border:1pt solid transparent; 67 | box-shadow: 0 0 1em transparent; 68 | } 69 | 70 | 100% 71 | { 72 | background-color:#d1f6ff; 73 | border:1pt solid #00ACF0; 74 | box-shadow: 0 0 1em #0AE0FF; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /theme/visual-studio-ex.css: -------------------------------------------------------------------------------- 1 | #sidebar{ 2 | background:#f6f6f6; 3 | text-shadow:none; 4 | } 5 | 6 | #working-set-header, 7 | #open-files-container{ /* Working files */ 8 | background:#f0f0f0; 9 | } 10 | 11 | #project-files-header, 12 | #working-set-header{/* "working files" header and folder header*/ 13 | color:#777!important; 14 | } 15 | 16 | #project-dropdown-toggle:hover{ /* Open url when hover */ 17 | color:#555!important; 18 | background:#e8e8e8; 19 | } 20 | 21 | .jstree-brackets li a, 22 | .jstree-brackets li .extension, 23 | .jstree-brackets li a.jstree-clicked, /* Files, folder and extensions */ 24 | #open-files-container li a, 25 | #open-files-container li .extension, 26 | #open-files-container li a.jstree-clicked{ /* Files, folder and extensions in "working fiels"*/ 27 | color:#222!important; 28 | } 29 | 30 | .sidebar-selection{ /* Selected file or folder */ 31 | background:#cccedb; 32 | } 33 | 34 | .sidebar-selection-triangle{ /* ^ the cool arrow */ 35 | background:transparent; 36 | } 37 | 38 | .sidebar-selection-triangle.triangle-visible::before{ 39 | border-left:12px solid #cccedb; 40 | } 41 | 42 | #main-toolbar{ /* Toolbar to the right */ 43 | background:#f6f6f6; 44 | } 45 | 46 | #status-bar{ /* Bottom status bar */ 47 | background:#f6f6f6; 48 | border-top:1px solid #d4d4d4; 49 | } 50 | 51 | #status-indicators, 52 | #status-info{ /* Status bar text */ 53 | background:transparent; 54 | } 55 | 56 | .CodeMirror-scroll{ 57 | background-color: #fefefe; 58 | color:black; 59 | } 60 | 61 | .CodeMirror .CodeMirror-lines pre{ 62 | z-index: 3; 63 | } 64 | 65 | .CodeMirror .CodeMirror-gutters{ 66 | background-color: #fefefe; 67 | } 68 | 69 | .CodeMirror .CodeMirror-linenumber{ 70 | color: #0E97A1; 71 | background-color: #fefefe; 72 | } 73 | 74 | .CodeMirror .CodeMirror-matchingbracket{ 75 | color: black; 76 | background-color: #dedede; 77 | } 78 | 79 | .CodeMirror .CodeMirror-linebackground{ 80 | outline: 2px solid #dddddd; 81 | z-index: 3; 82 | } 83 | 84 | 85 | .CodeMirror span.cm-atom { color: blue; } 86 | .CodeMirror span.cm-qualifier, .CodeMirror span.cm-builtin { color: #800000; } 87 | 88 | .CodeMirror span.cm-keyword { color: blue; } 89 | .CodeMirror span.cm-comment { color: green; } 90 | .CodeMirror span.cm-string {color: #800000;} 91 | .CodeMirror span.cm-string-2 {color: #800000;} 92 | .CodeMirror span.cm-variable { color: black; } 93 | .CodeMirror span.cm-variable-2 { color: black; } 94 | .CodeMirror span.cm-tag { color: #800000; } 95 | .CodeMirror span.cm-attribute { color: red; } 96 | .CodeMirror span.cm-property { color: black; } 97 | 98 | .CodeMirror span.cm-matchhighlight{ 99 | background-color: yellow; 100 | } 101 | 102 | .CodeMirror .CodeMirror-selectedtext{ 103 | background-color: #ADD6FF; 104 | } 105 | 106 | .CodeMirror .CodeMirror-selected{ 107 | background: transparent; 108 | } 109 | 110 | .CodeMirror-focused .CodeMirror-selected{ 111 | background: transparent; 112 | } 113 | 114 | -------------------------------------------------------------------------------- /theme/zamiere.css: -------------------------------------------------------------------------------- 1 | .panel { 2 | background:#3C3F41; 3 | } 4 | 5 | #status-bar, 6 | #status-indicators { 7 | background:#242424; 8 | color:#ccc; 9 | } 10 | 11 | #status-info { 12 | color:#ccc; 13 | } 14 | 15 | #open-files-container, 16 | #working-set-header, 17 | #project-files-header { 18 | color:#aaa; 19 | background:#565A5D; 20 | } 21 | 22 | .jstree-brackets li.jstree-closed > a, 23 | .jstree-brackets li.jstree-open > a { 24 | color:#ccc; 25 | } 26 | 27 | #open-files-container .extension, 28 | .jstree-brackets li .extension { 29 | color:#aaa; 30 | } 31 | 32 | .cm-s-zamiere.CodeMirror { 33 | background-color:#202020; 34 | color:#fff; 35 | } 36 | 37 | .cm-s-zamiere.CodeMirror div.CodeMirror-cursor { 38 | border-left:1px solid #f8f8f0; 39 | z-index:3; 40 | } 41 | 42 | .cm-s-zamiere .CodeMirror-selected { 43 | background:#676767; 44 | opacity:.5; 45 | } 46 | 47 | .cm-s-zamiere .cm-keyword {color:#FFCC33;} 48 | .cm-s-zamiere .cm-atom {color:#99CC66;} 49 | .cm-s-zamiere .cm-number {color:#99CC66;} 50 | .cm-s-zamiere .cm-def {color:#A9D158;} 51 | .cm-s-zamiere .cm-variable {color:#34A2D9;} 52 | .cm-s-zamiere .cm-variable-2 {color:#3399CC;} 53 | .cm-s-zamiere .cm-property {color:#DAD6CD;} 54 | .cm-s-zamiere .cm-operator {color:#FFCC33;} 55 | .cm-s-zamiere .cm-comment {color:#747166;} 56 | .cm-s-zamiere .cm-string {color:#A9D158;} 57 | .cm-s-zamiere .cm-string-2 {color:#A9D158;} 58 | .cm-s-zamiere .cm-meta {color:#FFCC33;} 59 | .cm-s-zamiere .cm-qualifier {color:#FFCC33;} 60 | .cm-s-zamiere .cm-bracket {color:#FFFFFF;} 61 | .cm-s-zamiere .cm-tag {color:#FFCC33;} 62 | .cm-s-zamiere .cm-attribute {color:#FFCC33;} 63 | 64 | .cm-s-zamiere.CodeMirror span.CodeMirror-matchingbracket { 65 | color:#00CCFF; 66 | text-shadow:0 0 3px #00CCFF; 67 | } 68 | 69 | .cm-s-zamiere .cm-matchhighlight { 70 | box-shadow:0 0 5px #00CCFF; 71 | background-color: #00CCFF; 72 | color: black; 73 | border-radius:2px; 74 | } 75 | 76 | .cm-s-zamiere .CodeMirror-searching { 77 | color:#000; 78 | } 79 | 80 | .cm-s-zamiere .cm-matchhighlight:not(.CodeMirror-selectedtext) { 81 | background-color: rgba(0, 204, 255, 0.4); 82 | box-shadow:0 0 5px #00CCFF; 83 | color:#ccc; 84 | border-radius:2px; 85 | } 86 | 87 | .cm-s-zamiere .CodeMirror-activeline-background { 88 | background:hsla(0,0%,0%,0.5)!important; 89 | margin:-1px -10px; 90 | } 91 | 92 | .cm-s-zamiere .CodeMirror-activeline .CodeMirror-gutter-elt { 93 | color: #eeeeee; 94 | } 95 | 96 | .cm-s-zamiere div.CodeMirror-gutter { 97 | color:#ccc; 98 | } 99 | 100 | .cm-s-zamiere div.CodeMirror-gutters { 101 | background-color:#101010; 102 | box-shadow:0 0 10px hsla(0,0%,0%,.8); 103 | border-right:0; 104 | } 105 | 106 | .cm-s-zamiere span.CodeMirror-widget { 107 | margin:-3px 0px; 108 | display:inline-block; 109 | } 110 | .cm-s-zamiere span.CodeMirror-foldmarker { 111 | display:inline-table; 112 | background:#ccc; 113 | border:0; 114 | color:#000; 115 | border-radius:3px; 116 | font-size:20px; 117 | margin:3px; 118 | padding:0px 5px; 119 | height:15px; 120 | line-height:15px; 121 | overflow:hidden; 122 | white-space:nowrap; 123 | } 124 | 125 | #status-overwrite { 126 | color:white; 127 | } 128 | -------------------------------------------------------------------------------- /ThemeManager.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Brackets Themes Copyright (c) 2014 Miguel Castillo. 3 | * 4 | * Licensed under MIT 5 | */ 6 | 7 | 8 | define(function (require, exports, module) { 9 | "use strict"; 10 | 11 | var _ = brackets.getModule("thirdparty/lodash"), 12 | FileSystem = brackets.getModule("filesystem/FileSystem"), 13 | FileUtils = brackets.getModule("file/FileUtils"), 14 | _ThemeManager = brackets.getModule("view/ThemeManager"), 15 | SettingsManager = require("SettingsManager"), 16 | ColorProcessor = require("ColorProcessor"), 17 | validExtensions = ["css", "less"]; 18 | 19 | 20 | /** 21 | * @private 22 | * Verifies that the file passed in is a valid theme file type. 23 | * 24 | * @param {File} file is object to verify if it is a valid theme file type 25 | * @return {boolean} to confirm if the file is a valid theme file type 26 | */ 27 | function isFileTypeValid(file) { 28 | return file.isFile && 29 | validExtensions.indexOf(FileUtils.getFileExtension(file.name)) !== -1; 30 | } 31 | 32 | 33 | /** 34 | * Load css/less files from a directory to be treated as themes 35 | * 36 | * @param {string} path where theme files are to be loaded from 37 | * @return {$.Deferred} promise object resolved with the themes to be loaded from the directory 38 | */ 39 | function loadDirectory(path) { 40 | var result = new $.Deferred(); 41 | 42 | if (!path) { 43 | return result.reject({ 44 | path: path, 45 | error: "Path not defined" 46 | }); 47 | } 48 | 49 | function getDirectoryContent(err, entries) { 50 | var i, files = []; 51 | entries = entries || []; 52 | 53 | for (i = 0; i < entries.length; i++) { 54 | if (isFileTypeValid(entries[i])) { 55 | files.push(entries[i].name); 56 | } 57 | } 58 | 59 | if (err) { 60 | result.reject({ 61 | path: path, 62 | error: err 63 | }); 64 | } 65 | else { 66 | result.resolve({ 67 | files: files, 68 | path: path 69 | }); 70 | } 71 | } 72 | 73 | function loadThemesFiles(themes) { 74 | // Iterate through each name in the themes and make them theme objects 75 | var deferred = _.map(themes.files, function (themeFile) { 76 | return _ThemeManager.loadFile(themes.path + "/" + themeFile).done(function(theme) { 77 | theme.file.read(function( err, content /*, stat*/ ) { 78 | if (!err) { 79 | theme.dark = ColorProcessor.isDark(content); 80 | } 81 | }); 82 | }); 83 | }); 84 | 85 | return $.when.apply(undefined, deferred); 86 | } 87 | 88 | FileSystem.getDirectoryForPath(path).getContents(getDirectoryContent); 89 | return result.then(loadThemesFiles).done(function() { 90 | setTimeout(function() { 91 | _ThemeManager.refresh(true); 92 | }, 0); 93 | }); 94 | } 95 | 96 | 97 | exports.loadDirectory = loadDirectory; 98 | }); 99 | -------------------------------------------------------------------------------- /theme/hammsidian.css: -------------------------------------------------------------------------------- 1 | .cm-s-hammsidian.CodeMirror 2 | { 3 | font-family: consolas !important; 4 | background-color: #293134; 5 | color: #E0E2E4; 6 | font-size: 16px !important; 7 | } 8 | 9 | .cm-s-hammsidian.CodeMirror .CodeMirror-lines pre 10 | { 11 | z-index: 3; 12 | } 13 | 14 | .cm-s-hammsidian.CodeMirror .CodeMirror-gutters 15 | { 16 | background-color: #293134; 17 | } 18 | 19 | .cm-s-hammsidian.CodeMirror .CodeMirror-linenumber 20 | { 21 | background-color: #293134; 22 | color: #81969A; 23 | } 24 | 25 | .cm-s-hammsidian.CodeMirror .CodeMirror-matchingbracket 26 | { 27 | color: #dedede; 28 | outline: 1px solid #dedede; 29 | } 30 | 31 | .cm-s-hammsidian.CodeMirror .CodeMirror-linebackground, 32 | .cm-s-hammsidian.CodeMirror .CodeMirror-activeline 33 | { 34 | background-color: #2F393C; 35 | } 36 | 37 | 38 | .cm-s-hammsidian.CodeMirror .cm-atom { color: #EC7600; } 39 | .cm-s-hammsidian.CodeMirror .cm-qualifier { color: #678CB1; } 40 | 41 | /*CodeMirror does not add notation for css... Which would be really nice. */ 42 | /*.cm-s-hammsidian.CodeMirror .cm-property { color: red; }*/ 43 | 44 | .cm-s-hammsidian.CodeMirror .cm-keyword { color: #93C763; } 45 | .cm-s-hammsidian.CodeMirror .cm-comment { color: #7D8C93; } 46 | .cm-s-hammsidian.CodeMirror .cm-string {color: #EC7600;} 47 | .cm-s-hammsidian.CodeMirror .cm-string-2 {color: #EC7600;} 48 | .cm-s-hammsidian.CodeMirror .cm-variable { color: #E0E2E4; } 49 | /*.cm-s-hammsidian.CodeMirror .cm-variable-2 { color: #EC7600; }*/ 50 | .cm-s-hammsidian.CodeMirror .cm-tag { color: rgb(147,199,99); } 51 | .cm-s-hammsidian.CodeMirror .cm-attribute { color: #678CB1; } 52 | .cm-s-hammsidian.CodeMirror .cm-property { color: rgb(140,140,180); } 53 | .cm-s-hammsidian.CodeMirror .cm-number { color: #FF9E3D;} 54 | 55 | /*.cm-s-hammsidian.CodeMirror .cm-meta { color: #EC7600; }*/ 56 | .cm-s-hammsidian.CodeMirror .cm-error { color: #EC7600; } 57 | 58 | .cm-s-hammsidian.CodeMirror .cm-matchhighlight:not(.CodeMirror-selectedtext) 59 | { 60 | background-color: #616161; 61 | color: white; 62 | } 63 | 64 | .CodeMirror-gutters { 65 | border-right: 1px solid #444; 66 | } 67 | 68 | .CodeMirror-foldmarker { 69 | padding-right:5px; 70 | padding-left:5px; 71 | background:#4d4d4d; 72 | border:1px solid #ddd; 73 | margin-right:3px; 74 | margin-left:3px; 75 | border-radius:3px; 76 | color:#fff; 77 | cursor:pointer; 78 | } 79 | 80 | .cm-s-hammsidian.CodeMirror .CodeMirror-selectedtext 81 | { 82 | background-color: #804000; 83 | } 84 | 85 | .cm-s-hammsidian.CodeMirror .CodeMirror-selected 86 | { 87 | background: transparent; 88 | } 89 | 90 | .cm-s-hammsidian.CodeMirror-focused .CodeMirror-selected 91 | { 92 | background: transparent; 93 | } 94 | 95 | .cm-s-hammsidian.CodeMirror .CodeMirror-cursor 96 | { 97 | z-index: 5; 98 | border-left: 1px solid white; 99 | } 100 | 101 | #status-bar { 102 | border-top:1px solid #484b4d; 103 | background:#3c3f41; 104 | 105 | } 106 | 107 | #status-bar #status-info { 108 | color:#f7c741; 109 | 110 | } 111 | 112 | #status-bar #status-indicators{ 113 | background:#3c3f41; 114 | 115 | } 116 | 117 | #status-bar #status-indicators #status-language { 118 | color:#ed8d47; 119 | } 120 | 121 | 122 | #status-bar #status-indicators #status-indent { 123 | color:#4bd278; 124 | } 125 | 126 | #status-overwrite { 127 | color:#4BD278; 128 | } 129 | -------------------------------------------------------------------------------- /theme/light-table.css: -------------------------------------------------------------------------------- 1 | .cm-s-light-table.CodeMirror { 2 | background-color: #202020; 3 | color:#ccc; 4 | padding-left: 8px; 5 | } 6 | .cm-s-light-table .CodeMirror-sizer{ 7 | padding-bottom: 90px; 8 | } 9 | 10 | .cm-s-light-table .CodeMirror-scroll{ 11 | border-color: #202020; 12 | } 13 | .cm-s-light-table ::-webkit-scrollbar { 14 | width: 10px; 15 | } 16 | .cm-s-light-table ::-webkit-scrollbar-track { 17 | background: transparent; 18 | } 19 | .cm-s-light-table ::-webkit-scrollbar-thumb { 20 | background: rgba(255,255,255,.2); 21 | border-radius: 5px; 22 | } 23 | .cm-s-light-table ::-webkit-scrollbar-thumb:hover{ 24 | background: rgba(255,255,255,.3); 25 | } 26 | .cm-s-light-table ::-webkit-scrollbar-thumb:active{ 27 | background: rgba(255,255,255,.4); 28 | } 29 | 30 | .cm-s-light-table.CodeMirror .inline-widget{ 31 | background: #272727; 32 | color: #ccc; 33 | } 34 | .cm-s-light-table.CodeMirror .inline-widget h1, 35 | .cm-s-light-table.CodeMirror .inline-widget h2, 36 | .cm-s-light-table.CodeMirror .inline-widget h3{ 37 | color: #ccc; 38 | } 39 | .cm-s-light-table.CodeMirror .inline-widget p, 40 | .cm-s-light-table.CodeMirror .inline-widget dt, 41 | .cm-s-light-table.CodeMirror .inline-widget li, 42 | .cm-s-light-table.CodeMirror .inline-widget code{ 43 | color: #fff; 44 | } 45 | .cm-s-light-table.CodeMirror .CodeMirror-gutters { 46 | border-color: #202020; 47 | background: #202020; 48 | } 49 | .cm-s-light-table.CodeMirror .CodeMirror-linenumbers { 50 | background-color: #202020; 51 | } 52 | .cm-s-light-table.CodeMirror .CodeMirror-linenumber { 53 | color: #99997a; 54 | padding-left: 15px; 55 | } 56 | .cm-s-light-table.CodeMirror .CodeMirror-activeline, 57 | .cm-s-light-table.CodeMirror.CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt{ 58 | background: rgba(255,255,255,.1); 59 | } 60 | .cm-s-light-table.CodeMirror pre{ 61 | /*padding between line number & content*/ 62 | padding: 0 8px; 63 | } 64 | 65 | .cm-s-light-table.CodeMirror .CodeMirror-cursor { 66 | border-left: 1px solid #ffffff; 67 | } 68 | .cm-s-light-table.CodeMirror .CodeMirror-selected { 69 | background: rgba(255,255,255,.2); 70 | } 71 | 72 | .cm-s-light-table.CodeMirror .CodeMirror-matchingbracket { 73 | border-bottom: 1px solid #33ffff; 74 | color: #ccc19b; 75 | } 76 | .cm-s-light-table.CodeMirror .CodeMirror-unmatchingbracket { 77 | border-bottom: 1px solid #cb3233; 78 | color: #cb3233; 79 | } 80 | 81 | 82 | .cm-s-light-table.CodeMirror .cm-comment { 83 | color: #968879; 84 | } 85 | .cm-s-light-table.CodeMirror .cm-property { 86 | color: #aaaaaa; 87 | } 88 | .cm-s-light-table.CodeMirror .cm-qualifier { 89 | color: #aaeeab; 90 | } 91 | .cm-s-light-table.CodeMirror .cm-tag { 92 | color: #7ac1ff; 93 | } 94 | .cm-s-light-table.CodeMirror .cm-def { 95 | color: #aaccff; 96 | } 97 | .cm-s-light-table.CodeMirror .cm-number { 98 | color: #ccccab; 99 | } 100 | .cm-s-light-table.CodeMirror .cm-atom { 101 | color: #cc9dc7; 102 | } 103 | .cm-s-light-table.CodeMirror .cm-keyword{ 104 | color: #aacd80; 105 | } 106 | .cm-s-light-table.CodeMirror .cm-string{ 107 | color: #aadddd; 108 | } 109 | .cm-s-light-table.CodeMirror .cm-string-2{ 110 | color: #7ad1dd; 111 | } 112 | .cm-s-light-table.CodeMirror .cm-variable { 113 | color: #ccc19b; 114 | } 115 | .cm-s-light-table.CodeMirror .cm-variable-2 { 116 | color: #aaccff; 117 | } 118 | .cm-s-light-table.CodeMirror .cm-attribute { 119 | color: #83e1b2; 120 | } -------------------------------------------------------------------------------- /lib/ko.factory.js: -------------------------------------------------------------------------------- 1 | /** 2 | * koFactory Copyright (c) 2014 Miguel Castillo. 3 | * Licensed under MIT 4 | * 5 | * https://github.com/MiguelCastillo/koFactory 6 | */ 7 | 8 | define(function() { 9 | "use strict"; 10 | 11 | 12 | function factory(data, target, settings) { 13 | return factory.serialize( data, target, settings ); 14 | } 15 | 16 | 17 | factory.primitiveTypes = { 18 | "undefined": true, 19 | "boolean": true, 20 | "number": true, 21 | "string": true 22 | }; 23 | 24 | 25 | factory.getType = function(data) { 26 | if (data instanceof Array) { 27 | return "array"; 28 | } 29 | 30 | var typeOf = typeof data; 31 | if (factory.primitiveTypes.hasOwnProperty(typeOf)) { 32 | return "primitive"; 33 | } 34 | else if (typeOf === "object") { 35 | return "object"; 36 | } 37 | 38 | throw "Invalid data type"; 39 | }; 40 | 41 | 42 | factory.array = function (data, target, settings) { 43 | var i = 0, 44 | length = data.length, 45 | type = false, 46 | update = factory.ko.isObservable(target); 47 | 48 | settings = settings || {}; 49 | 50 | if (length) { 51 | // We only need to get the type once; items in an 52 | // arrays are of the same data type. 53 | type = factory.getType(data[0]); 54 | } 55 | 56 | for (; i < length; i++) { 57 | data[i] = factory[type](data[i]); 58 | } 59 | 60 | if (update === true) { 61 | target(data); 62 | return target; 63 | } 64 | 65 | return factory.ko.observableArray(data); 66 | }; 67 | 68 | 69 | factory.primitive = function(data, target, settings) { 70 | var update = factory.ko.isObservable(target); 71 | if (update === true) { 72 | target(data); 73 | return target; 74 | } 75 | 76 | return factory.ko.observable(data); 77 | }; 78 | 79 | 80 | factory.object = function(data, target, settings) { 81 | target = target || {}; 82 | settings = settings || {}; 83 | var type, item, value, update = false; 84 | 85 | for (var i in data) { 86 | // If i isn't a property of data, then we will continue on to the next property 87 | if (data.hasOwnProperty(i) === false) { 88 | continue; 89 | } 90 | 91 | update = target.hasOwnProperty(i); 92 | item = data[i]; 93 | type = factory.getType(item); 94 | value = factory[type](item, target[i], settings[i]); 95 | 96 | if (update === false) { 97 | target[i] = value; 98 | } 99 | } 100 | 101 | return target; 102 | }; 103 | 104 | 105 | /** 106 | * @param data - is the new data that will either generate a new view model 107 | * or will be merged into target. 108 | * @param target - optional object where data will be copied into. 109 | */ 110 | factory.serialize = function(data, target, settings) { 111 | var type = factory.getType(data); 112 | return factory[type](data, target, settings); 113 | }; 114 | 115 | 116 | factory.deserialize = function(data) { 117 | return factory.ko.toJS(data); 118 | }; 119 | 120 | 121 | factory.bind = function(el, viewModel) { 122 | if (factory.$) { 123 | factory.$(el).each(function(index, iel) { 124 | factory.ko.applyBindings(viewModel, iel); 125 | }); 126 | } 127 | else { 128 | factory.ko.applyBindings(viewModel, el); 129 | } 130 | }; 131 | 132 | 133 | factory.unbind = function(el) { 134 | if (factory.$) { 135 | factory.$(el).each(function(index, iel) { 136 | factory.ko.cleanNode(iel); 137 | }); 138 | } 139 | else { 140 | factory.ko.cleanNode(el); 141 | } 142 | }; 143 | 144 | return factory; 145 | }); 146 | -------------------------------------------------------------------------------- /theme/lightdelkos.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Light lightdelkos theme by David Sánchez i Gregori 3 | * Licensed under BSD License 4 | */ 5 | 6 | .cm-s-lightdelkos.CodeMirror { 7 | background: #EEE; 8 | color: #222; 9 | } 10 | .cm-s-lightdelkos div.CodeMirror-selected { 11 | background-color: #def !important; 12 | } 13 | .cm-s-lightdelkos .CodeMirror-gutters { 14 | background: #222; 15 | border-right: 0pt; 16 | } 17 | .cm-s-lightdelkos .CodeMirror-cursor { 18 | border-left: 1pt solid rgb(0, 0, 0) !important; 19 | } 20 | .cm-s-lightdelkos span.cm-comment { 21 | color: #afafaf; 22 | text-shadow: 0 0 2pt #FFF; 23 | } 24 | .cm-s-lightdelkos span.cm-atom { 25 | color: #410c76; 26 | background-color: #ede1f2; 27 | text-shadow: 0 0 2pt #fadcff; 28 | border-bottom: 1pt solid #9600f4; 29 | } 30 | .cm-s-lightdelkos span.cm-number { 31 | color: #f00; 32 | text-shadow: 0 0 1pt #b75; 33 | } 34 | 35 | .cm-s-lightdelkos span.cm-attribute { 36 | color: #199; 37 | background-color: #dfeee9; 38 | text-shadow: 0 0 2pt #fff; 39 | border-bottom: 1pt solid #68ddbd; 40 | } 41 | 42 | 43 | .cm-s-lightdelkos span.cm-property { 44 | color: #0c658d; 45 | text-shadow: 0 0 2pt #fff; 46 | background-color: #e0eaf0; 47 | border-bottom: 1pt solid #0086c4; 48 | } 49 | 50 | .cm-s-lightdelkos span.cm-keyword { 51 | color: #0d98fd; 52 | text-shadow: 0 0 2pt #fff; 53 | background-color: #ddeefb; 54 | border-bottom: 1pt solid #5cc5e6; 55 | -webkit-animation: hilightKey 2s alternate ease-in-out infinite; 56 | } 57 | .cm-s-lightdelkos span.cm-string { 58 | color: #f016ad; 59 | text-shadow: 0 0 4pt #fff0fa; 60 | background-color: #edddee; 61 | border-bottom: 1pt solid #ffb6e3; 62 | } 63 | .cm-s-lightdelkos span.cm-variable { 64 | color: #2f5d2f; 65 | background-color: #dfeedf; 66 | text-shadow: 0 0 2pt #fff; 67 | border-bottom: 1pt solid #a9cca9; 68 | } 69 | .cm-s-lightdelkos span.cm-variable-2 { 70 | color: #0092ff; 71 | text-shadow: 0 0 2pt #fff; 72 | background-color: #d1e2eb; 73 | border-bottom: 1pt solid #0092ff; 74 | } 75 | .cm-s-lightdelkos span.cm-def { 76 | color: #9a8c00; 77 | background-color: #f5f5ce; 78 | text-shadow: 0 0 1pt #ffffef; 79 | border-bottom: 1pt solid #e8c731; 80 | } 81 | .cm-s-lightdelkos span.cm-bracket { 82 | color: #111; 83 | text-shadow: 0 0 1pt #d8edfc; 84 | } 85 | .cm-s-lightdelkos span.cm-tag { 86 | color: #965d05; 87 | text-shadow: 0 0 1pt #fff; 88 | background-color: #f5f2e5; 89 | border-bottom: 1pt solid #e0a624; 90 | } 91 | .cm-s-lightdelkos span.cm-link { 92 | color: #ae81ff; 93 | } 94 | .cm-s-lightdelkos span.cm-error { 95 | background: #ff3292; 96 | color: #feedff; 97 | } 98 | .cm-s-lightdelkos .CodeMirror-activeline-background { 99 | background-color: rgba(0, 0, 0, 0.025) !important; 100 | z-index: 999; 101 | } 102 | .cm-s-lightdelkos .CodeMirror-matchingbracket { 103 | color: black !important; 104 | border: 1pt solid #cdd; 105 | background-color: #fff; 106 | -webkit-animation: hilightMB 1s alternate infinite; 107 | } 108 | @-webkit-keyframes hilightMB { 109 | 0% 110 | { 111 | background-color:#FFF; 112 | color:#888; 113 | } 114 | 115 | 50% 116 | { 117 | background-color: #eee; 118 | color: black; 119 | } 120 | 121 | 100% 122 | { 123 | background-color:#ddd; 124 | color: #000; 125 | } 126 | } 127 | 128 | 129 | @-webkit-keyframes hilightKey { 130 | 0% 131 | { 132 | border-bottom: 1pt solid #4dd6ff; 133 | background-color: #ddeefb; 134 | } 135 | 136 | 50% 137 | { 138 | border-bottom: 1pt solid #00a1f8; 139 | background-color: #dfeefa; 140 | } 141 | 142 | 100% 143 | { 144 | border-bottom: 1pt solid #4dd6ff; 145 | background-color: #ddeefb; 146 | } 147 | } -------------------------------------------------------------------------------- /mirror-style/variables.mustache: -------------------------------------------------------------------------------- 1 | @themeName: <%=name %>; 2 | 3 | @plainTextBackground: <%= PlainText.background %>; 4 | @plainTextColor: <%= PlainText.color %>; 5 | 6 | .documentBackground() when not(iscolor(@plainTextBackground)) { 7 | @backgroundColor: #e8e8e8; 8 | } 9 | 10 | .documentBackground() when (iscolor(@plainTextBackground)) { 11 | @backgroundColor: @plainTextBackground; 12 | } 13 | 14 | .documentFontColor() when not (iscolor(@plainTextColor)) { 15 | .documentBackground(); 16 | @fontColor: contrast(@backgroundColor); 17 | } 18 | 19 | .documentFontColor() when (iscolor(@plainTextColor)) { 20 | @fontColor: @plainTextColor; 21 | } 22 | 23 | 24 | @guttersBackground: <%= LineNumbers.background %>; 25 | @linenumberColor: <%= LineNumbers.color %>; 26 | 27 | @keywordColor: <%= Keyword.color %>; 28 | @numberColor: <%= Number.color %>; 29 | 30 | @variableColor: <%= PlainText.color %>; 31 | @variable2Color: <%= PlainText.color %>; 32 | @variable3Color: <%= PlainText.color %>; 33 | 34 | @propertyColor: <%= Identifier.color %>; 35 | @operatorColor: <%= Operator.color %>; 36 | 37 | @atomColor: <%= Keyword.color %>; 38 | 39 | @commentColor: <%= Comment.color %>; 40 | @commentBackground: <%= Comment.background %>; 41 | 42 | @stringColor: <%= String.color %>; 43 | @string2Color: <%= StringCVerbatim.color %>; 44 | @definitionColor: <%= Identifier.color %>; 45 | @metaColor: <%= XMLAttribute.color %>; 46 | @qualifierColor: <%= CSSSelector.color %>; 47 | @tagColor: <%= HTMLElementName.color %>; 48 | 49 | @builtingColor: <%= Keyword.color %>; 50 | @attributeColor: <%= HTMLAttribute.color %>; 51 | @linkColor: <%= urlformat.color %>; 52 | 53 | @selectedTextBackground: <%= SelectedText.background %>; 54 | @selectedTextOpacity: .3; 55 | 56 | @matchHightlightBackground: <%= BraceMatchingRectangle.background %>; 57 | @matchHightlightColor: <%= XAMLDelimiter.color %>; 58 | 59 | @matchingBracketColor: <%= outliningverticalrule.color %>; 60 | @nonmatchingBracketColor: <%= outliningcollapsehintadornment.color %>; 61 | 62 | 63 | // CSS definitions 64 | // 65 | // 66 | // 67 | // 68 | // 69 | // 70 | // 71 | // 72 | @cssCommentColor: <%= CSSComment.color %>; 73 | @cssCommentBackground: <%= CSSComment.background %>; 74 | @cssKeywordColor: <%= CSSKeyword.color %>; 75 | @cssPropertyColor: <%= CSSPropertyName.color %>; 76 | @cssAtomColor: <%= CSSPropertyValue.color %>; 77 | @cssStringColor: <%= CSSStringValue.color %>; 78 | @cssNumberColor: <%= CSSStringValue.color %>; 79 | @cssQualifierColor: <%= CSSSelector.color %>; 80 | @cssMetaColor: <%= CSSSelector.color %>; 81 | @cssTagColor: <%= CSSSelector.color %>; 82 | 83 | 84 | // HTML definitions 85 | // 86 | // 87 | // 88 | // 89 | // 90 | // 91 | // 92 | // 93 | // 94 | // 95 | @htmlAttributeColor: <%= HTMLAttribute.color %>; 96 | @htmlAttributeValueColor: <%= HTMLAttributeValue.color %>; 97 | @htmlCommentColor: <%= HTMLComment.color %>; 98 | @htmlCommentBackground: <%= HTMLComment.background %>; 99 | @htmlElementNameColor: <%= HTMLElementName.color %>; 100 | @htmlEntityColor: <%= HTMLEntity.color %>; 101 | @htmlOperatorColor: <%= HTMLOperator.color %>; 102 | @htmlOperatorBackground: <%= HTMLOperator.background %>; 103 | @htmlTagDelimiterColor: <%= HTMLTagDelimiter.color %>; 104 | 105 | -------------------------------------------------------------------------------- /mirror-style/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Brackets Themse Copyright (c) 2014 Miguel Castillo. 3 | * 4 | * Licensed under MIT 5 | * 6 | * Parts are extracted from mirror-style https://github.com/bradgearon/mirror-style 7 | * Thanks Brad!!! 8 | */ 9 | 10 | 11 | define(function(require) { 12 | 13 | var _ = brackets.getModule("thirdparty/lodash"); 14 | var FileSystem = brackets.getModule("filesystem/FileSystem"); 15 | var mustacheTmpl = require("text!mirror-style/variables.mustache"), 16 | lessTmpl = require("text!mirror-style/template.less"); 17 | 18 | 19 | function cleanup (name) { 20 | return name 21 | .replace(/\s+\w?/g, function(match) { 22 | return match.replace(/\s*/, "").toUpperCase(); 23 | }) 24 | .replace(/\W/g, ""); 25 | } 26 | 27 | 28 | // From mirror-style 29 | function splitColor (color) { 30 | var colorProps = {}; 31 | // AA BB GG RR (VS reverses BB && RR bits...) 32 | var split = color.match(/0x([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/) || []; 33 | var opacity; 34 | 35 | // Get rid of regex match. 36 | split.shift(); 37 | 38 | // We should have four channels... But, we only care whether or not the 'alpha' 39 | // channel is 2. If it is 2, then we skip the color. 40 | if (split.length === 4) { 41 | opacity = Number(split[0]); 42 | colorProps.color = [split[3], split[2], split[1]]; 43 | colorProps.rgba = [parseInt(split[3], 16), parseInt(split[2], 16), parseInt(split[1], 16)]; 44 | colorProps.inherit = opacity === 2; 45 | } 46 | 47 | return colorProps; 48 | } 49 | 50 | 51 | function colorString(input) { 52 | if (input.inherit) { 53 | return "inherit"; 54 | } 55 | 56 | var func = input.rgba.length === 3 ? 'rgb' : 'rgba'; 57 | return func + '(' + input.rgba.join(',') + ')'; 58 | } 59 | 60 | 61 | // From mirror-style 62 | function readItem (item) { 63 | var backgroundValues = splitColor(item.attr('background')); 64 | var foregroundValues = splitColor(item.attr('foreground')); 65 | 66 | return { 67 | color: colorString(foregroundValues), 68 | background: colorString(backgroundValues), 69 | bold: item.attr('boldfont') === 'Yes' ? true : false 70 | }; 71 | } 72 | 73 | 74 | // Small bits from mirror-style 75 | function parse (themeName, content) { 76 | var deferred = $.Deferred(), 77 | $content = $(content), 78 | props = {}; 79 | var lessParser, currentLessTmpl; 80 | 81 | $('Items > Item', $content).each(function (i, item) { 82 | var $item = $(item), 83 | name = $item.attr('name'), 84 | prop = readItem($item); 85 | 86 | if ($item.length && (prop.color || prop.background)) { 87 | props[ cleanup(name) ] = prop; 88 | } 89 | }); 90 | 91 | props.name = themeName; 92 | lessParser = new (less.Parser)(); 93 | 94 | try { 95 | currentLessTmpl = _.template(mustacheTmpl, props) + lessTmpl; 96 | lessParser.parse(currentLessTmpl, function (e, tree) { 97 | deferred.resolve({ 98 | name: themeName, 99 | fileName: themeName + ".css", 100 | content: tree.toCSS() 101 | }); 102 | }); 103 | } 104 | catch(ex) { 105 | deferred.reject(ex); 106 | } 107 | 108 | return deferred.promise(); 109 | } 110 | 111 | 112 | function loadFile(fileName) { 113 | var file = FileSystem.getFileForPath (fileName); 114 | var deferred = $.Deferred(); 115 | 116 | try { 117 | file.read(function(err, content) { 118 | if (err) { 119 | deferred.reject(err); 120 | return; 121 | } 122 | 123 | var themeName = fileName.split("/").pop().split(".").shift(); 124 | parse(themeName, content) 125 | .done(deferred.resolve) 126 | .fail(deferred.reject); 127 | }); 128 | } 129 | catch(ex) { 130 | deferred.reject(ex); 131 | } 132 | 133 | return deferred.promise(); 134 | } 135 | 136 | 137 | return { 138 | "importFile": loadFile 139 | }; 140 | 141 | }); 142 | -------------------------------------------------------------------------------- /theme/peacock.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme: Peacock 3 | tmTheme: Dayle Rees 4 | CodeMirror CSS: Paweł Chętkowski 5 | */ 6 | /*Main area*/ 7 | .CodeMirror{ 8 | background:#2b2a27; 9 | color:#ede0ce; 10 | font-size: 14px; 11 | }/*Main coding area, without line count.*/ 12 | 13 | .CodeMirror div.CodeMirror-cursor {border-left: 1px solid #ede0ce; z-index: 3;} 14 | 15 | /*Brackets is based on webkit, so you can use scrollbar styling. Example below contains 8px width, grey scrollbar for the main area. You can use it with other section, just remember about z-indexes or things like 'selected' with overlap your scrollbar.*/ 16 | .CodeMirror .CodeMirror-vscrollbar{ width: 14px; bottom:8px !important;} /*Scrollbar vertical. These values MUST be the same as height/width of scrollbars*/ 17 | .CodeMirror .CodeMirror-hscrollbar{ height:14px; right:8px !important;} /*Scrollbar horizontal. These values MUST be the same as height/width of scrollbars*/ 18 | .CodeMirror ::-webkit-scrollbar { width: 8px; height:8px;} /* The width of vertical scrollbars and height of horizontal scrollbars*/ 19 | .CodeMirror-scrollbar-filler {height:8px !important; width:8px !important; background:none;} /* Corner where scrollbars meet. Width and height MUST be the same as that of scrollbars. Background should be the same as that of the scrollbar track*/ 20 | .CodeMirror-gutter-filler{ height:8px !important;background:none;} /* Linenumber area left of horizontal scrollbar. Height MUST be the same as width/height of scrollbars */ 21 | .CodeMirror ::-webkit-scrollbar-track {background: none;} /* The track that scrollbars run in */ 22 | .CodeMirror ::-webkit-scrollbar-thumb {background: #403c37;} /* The scrollbar thumb */ 23 | 24 | .CodeMirror .CodeMirror-scroll .CodeMirror-gutters{background:#2b2a27; border-right:1px solid #403c37;}/*Left vertical bar with line count*/ 25 | 26 | /*Syntax elements & action*/ 27 | .CodeMirror .cm-atom{color:#BCD42A;} /*Atribbute value ex. #f00 in color:#f00;*/ 28 | .CodeMirror .cm-number{color:#BCD42A;} /*Numbers*/ 29 | .CodeMirror .cm-property{color:#FF5D38;} /*Property ex. color in color:#f00;*/ 30 | .CodeMirror .cm-comment{color:#7A7267;} /*Comment*/ 31 | .CodeMirror .cm-string{color:#BCD42A;} /*String elements ex. "description" in name="description" - including quotation*/ 32 | .CodeMirror .cm-qualifier{color:#FF5D38; opacity: 0.75;} /*Final qualifier like css class ex.: .cm-qualifier*/ 33 | .CodeMirror .cm-tag{color:#26A6A6;} /*Tags ex. ul or
    */ 34 | .CodeMirror .cm-attribute{color:#FF5D38;} /*Attribute ex. rel, href, name*/ 35 | .CodeMirror .cm-keyword {color:#26A6A6;} /*Element call ex. array, class, public function, if, elseif, !important*/ 36 | .CodeMirror-selected{background:rgba(255,255,255,0.1) !important;} /*Selected lines - may need !important*/ 37 | .CodeMirror-gutter-elt{background:#2b2a27 !important;} 38 | .CodeMirror-activeline-background{background:rgba(255,255,255,0.1) !important;} /*Active line - may need !important*/ 39 | .CodeMirror .CodeMirror-matchingtag{background:none; text-decoration: none; border-bottom: 1px solid #FF5D38;} /*Matching tags, open/close. Try !important for bg, color etc. if it doesn't work*/ 40 | div.CodeMirror span.CodeMirror-matchingbracket{background:none; text-decoration: none; border-bottom: 1px solid #FF5D38;} /*Matching brackets, open/close*/ 41 | 42 | 43 | /*Status bar - bottom*/ 44 | #status-bar{background:#2b2a27; color:#ede0ce; border-top:1px solid #403c37;}/*Bottom status bar*/ 45 | 46 | /*Modal windows like context-menu, quick-view or hint container*/ 47 | /*#context-menu-bar .dropdown-menu{background:#565656} /*Dropdown menu, available under right-click - may need !important*/ 48 | /*#context-menu-bar .dropdown-menu a{color:rgb(247, 239, 229);} /*Single option, treat it like
  • ex. background*/ 49 | /*#context-menu-bar .dropdown-menu a:hover{background:#403c37;} 50 | 51 | /*#codehint-menu-bar .dropdown-menu{background:#565656;} /*Code hint menu, dropdown visible when writing code.*/ 52 | /*#codehint-menu-bar .dropdown-menu li a{color:#ede0ce;} /*Code hint menu option, dropdown visible when writing code. Treat like
  • */ 53 | /*#codehint-menu-bar .dropdown-menu li a:hover {background:#403c37;} /*Code hint menu option, dropdown visible when writing code. Treat like
  • */ 54 | 55 | /*Inline editor(Ex. Quick Edit - Ctrl + E)*/ 56 | 57 | .cm-s-peacock.CodeMirror .inline-widget{ 58 | background: #403c37; 59 | color: #ccc; 60 | } 61 | .cm-s-peacock.CodeMirror .inline-widget h1, 62 | .cm-s-peacock.CodeMirror .inline-widget h2, 63 | .cm-s-peacock.CodeMirror .inline-widget h3{ 64 | color: #ccc; 65 | } 66 | .cm-s-peacock.CodeMirror .inline-widget p, 67 | .cm-s-peacock.CodeMirror .inline-widget dt, 68 | .cm-s-peacock.CodeMirror .inline-widget li, 69 | .cm-s-peacock.CodeMirror .inline-widget code{ 70 | color: #fff; 71 | } 72 | 73 | .CodeMirror pre {padding: 0 15px 0 5px;} 74 | -------------------------------------------------------------------------------- /theme/dracula.css: -------------------------------------------------------------------------------- 1 | .cm-s-dracula.CodeMirror { background: #282a36 !important; color: #EEE; } 2 | 3 | .CodeMirror div.CodeMirror-cursor { border-left: 1px solid #FFF !important; } 4 | .CodeMirror-selected { background: #3a3d4e !important; color: #eee !important; } 5 | .CodeMirror-lines{ line-height: 14px !important; } 6 | 7 | .cm-s-dracula .cm-keyword { color: #8be9fd !important; font-style: italic; } 8 | 9 | .cm-s-dracula .cm-js-atom { color: #FFF5B4 !important; } 10 | .cm-s-dracula .cm-css-atom { color: #bd93f9 !important; } 11 | 12 | .cm-s-dracula .cm-js-number {color: #bd93f9 !important; } 13 | .cm-s-dracula .cm-css-number {color: #bd93f9 !important; } 14 | 15 | .cm-s-dracula .cm-js-def { color: #8be9fd !important; } 16 | .cm-s-dracula .cm-css-def { color: #bd93f9 !important; } 17 | 18 | .cm-s-dracula .cm-js-variable { color: #ccc !important; } 19 | .cm-s-dracula .cm-js-variable-2 { color: #ccc !important; } 20 | .cm-s-dracula .cm-css-variable { color: #50fa7b !important; } 21 | .cm-s-dracula .cm-css-variable-2 { color: #50fa7b !important; } 22 | 23 | .cm-s-dracula .cm-js-property { color: #50fa7b !important; } 24 | .cm-s-dracula .cm-css-property { color: #6AEDFF !important;} 25 | 26 | .cm-s-dracula .cm-js-operator { color: #bd93f9 !important;} 27 | .cm-s-dracula .cm-css-operator { color: #ccc !important; } 28 | 29 | .cm-s-dracula .cm-js-comment { color: #6272a4 !important; font-style: normal; } 30 | .cm-s-dracula .cm-css-comment { color: #6272a4 !important; font-style: italic; } 31 | .cm-s-dracula .cm-xml-comment { color: #6272a4 !important; font-style: normal !important; } 32 | 33 | .cm-s-dracula .cm-js-string { color: #f1fa8c !important; } 34 | .cm-s-dracula .cm-js-string-2 { color: #f1fa8c !important; } 35 | .cm-s-dracula .cm-css-string { color: #f1fa8c !important;} 36 | .cm-s-dracula .cm-css-string-2 { color: #8be9fd !important; } 37 | 38 | .cm-s-dracula .cm-js-meta { color: #8be9fd !important; } 39 | .cm-s-dracula .cm-css-meta { color: #6AEDFF !important;} 40 | 41 | .cm-s-dracula .cm-qualifier { color: #50fa7b !important; } 42 | 43 | .cm-s-dracula .cm-js-tag { color: #8be9fd !important; } 44 | .cm-s-dracula .cm-css-tag { color: #ff79c6 !important; } 45 | .cm-s-dracula .cm-xml-tag { color: #ff79c6 !important; } 46 | 47 | .cm-s-dracula .cm-js-attribute { color: #50fa7b !important; } 48 | .cm-s-dracula .cm-xml-attribute { color: #ff79c6 !important; } 49 | 50 | div.CodeMirror span.CodeMirror-matchingbracket { border: 1px solid #15CA1A !important; border-radius: 4px; color: #ccc !important;} 51 | 52 | div.CodeMirror span.cm-matchhighlight.CodeMirror-searching.CodeMirror-selectedtext { background-color: #3a3d4e !important;} 53 | 54 | /* */ 55 | .cm-execution-line { background-color: rgba(137,245,162,.2) !important; outline: 1px solid #181818 !important;} 56 | .cm-js-hr { color: #AEAEAE !important; } 57 | .cm-js-link { color: #8be9fd !important; } 58 | .CodeMirror-linenumber { border-right: none !important;} 59 | .cm-xml-error { color: #bf4c4c !important; } 60 | .cm-xml-string { color: #f1fa8c !important; } 61 | .cm-xml-link { color: #f1fa8c !important; } 62 | .cm-comment { color: #6272a4 !important; font-style: normal !important; } 63 | .cm-error { color: #bf4c4c !important; } 64 | .cm-string { color: #f1fa8c !important; } 65 | .cm-tag { color: #ff79c6 !important; } 66 | .cm-attribute { color: #50fa7b !important; } 67 | .cm-link { color: #f1fa8c !important; } 68 | 69 | 70 | /*--GLOBAL EDITOR STYLES--*/ 71 | .cm-breakpoint .CodeMirror-gutter-elt { color: #000 !important; font-weight: 700 !important;} 72 | .CodeMirror-cursor { border-left: 1px solid #FFF !important; } 73 | .cm-error { background: #9D1E15 !important; border-radius: 2px !important; color: #eee !important;} 74 | .CodeMirror-gutter-elt { color: #888 !important;} 75 | .CodeMirror-gutters {background: #282828 !important; border-right: 2px solid #2b2b2b !important; } 76 | .CodeMirror-selected { background: #3a3d4e !important; color: #eee !important; } 77 | .CodeMirror-nonmatchingbracket { border: 1px solid #db0404 !important; border-radius: 4px; color: #ccc !important;} 78 | .cm-search-highlight-start:before { border-color: #94a3dd !important;} 79 | .cm-search-highlight-end:before { border-color: #94a3dd !important;} 80 | .cm-search-highlight:before { border-color: #94a3dd !important; padding: 2px !important;} 81 | .cm-line-with-selection .cm-column-with-selection.cm-search-highlight:before { background-color: #94a3dd !important; border-radius: 2px !important;} 82 | span.cm-token-highlight { background-color: transparent !important; padding: 0px !important;} 83 | span.cm-token-highlight:before { border-color: #94a3dd !important; } 84 | .cm-line-with-selection span.cm-column-with-selection { color: #000 !important; background-color: #94a3dd !important; } 85 | .cm-whitespace:before { color: #555 !important;} 86 | .cm-tab:before { border-bottom: 1px solid #555 !important;} 87 | 88 | .cm-highlight { 89 | -webkit-animation: "fadeout-revised" 3s 0s !important; 90 | } 91 | 92 | .cm-highlight *:not(.CodeMirror-linenumber){ 93 | color: #000 !important; 94 | } 95 | 96 | .CodeMirror .webkit-html-warning-message{ 97 | color: #411f07 !important; 98 | } 99 | -------------------------------------------------------------------------------- /MenuManager.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Brackets Themes Copyright (c) 2014 Miguel Castillo. 3 | * 4 | * Licensed under MIT 5 | */ 6 | 7 | 8 | define(function (require, exports, module) { 9 | "use strict"; 10 | 11 | var _ = brackets.getModule("thirdparty/lodash"), 12 | Menus = brackets.getModule("command/Menus"), 13 | CommandManager = brackets.getModule("command/CommandManager"), 14 | PreferencesManager = brackets.getModule("preferences/PreferencesManager"), 15 | prefs = PreferencesManager.getExtensionPrefs("themes"), 16 | SettingsManager = require("SettingsManager"); 17 | 18 | var menu = Menus.addMenu("Themes", "editortheme", Menus.BEFORE, Menus.AppMenuBar.HELP_MENU), 19 | SETTINGS_COMMAND_ID = "theme.settings", 20 | allCommands = {}, 21 | loadedThemes = {}, 22 | currentTheme = prefs.get("theme"); 23 | 24 | // Register menu event... 25 | CommandManager.register("Settings", SETTINGS_COMMAND_ID, SettingsManager.openDialog); 26 | 27 | 28 | // Load in the settings menu 29 | function init() { 30 | // Add theme menu item 31 | menu.addMenuItem(SETTINGS_COMMAND_ID); 32 | 33 | prefs.on("change", "theme", function() { 34 | var theme = prefs.get("theme"); 35 | if (currentTheme !== theme) { 36 | syncMenuSelection(false, currentTheme); 37 | syncMenuSelection(true, theme); 38 | currentTheme = theme; 39 | } 40 | }); 41 | } 42 | 43 | 44 | function registerCommand(theme) { 45 | // Create the command id used by the menu 46 | var THEME_COMMAND_ID = "theme." + theme.name; 47 | 48 | var command = { 49 | id: THEME_COMMAND_ID, 50 | name: theme.name, 51 | fn: function() { 52 | prefs.set("theme", theme.name); 53 | } 54 | }; 55 | 56 | // Register menu event... 57 | CommandManager.register(theme.displayName, THEME_COMMAND_ID, command.fn); 58 | return command; 59 | } 60 | 61 | 62 | /** 63 | * Create theme objects and add them to the global themes container. 64 | */ 65 | function loadThemes(themes, group) { 66 | var addDivider = !allCommands[group]; 67 | var commands = allCommands[group] || (allCommands[group] = {}); 68 | var lastEntry = commands[_.keys(commands)[0]]; 69 | 70 | currentTheme = prefs.get("theme"); 71 | 72 | // Filter out themes that have already been loaded 73 | themes = _.filter(themes, function(theme) { 74 | return !loadedThemes[theme.name]; 75 | }); 76 | 77 | if (themes.length !== 0 && addDivider) { 78 | menu.addMenuDivider(); 79 | } 80 | 81 | /* 82 | * Really wish we could add menu items relative to dividers 83 | * https://github.com/adobe/brackets/issues/8240 84 | */ 85 | /* 86 | var divider; 87 | if (themes.length !== 0 && addDivider) { 88 | if (settingsManager.customPath === group) { 89 | divider = menu.addMenuDivider(Menus.AFTER, SETTINGS_COMMAND_ID); 90 | lastEntry = { 91 | id: divider.dividerId 92 | }; 93 | } 94 | else { 95 | divider = menu.addMenuDivider(); 96 | lastEntry = { 97 | id: divider.dividerId 98 | }; 99 | } 100 | } 101 | */ 102 | 103 | // 104 | // Iterate through each name in the themes and make them theme objects 105 | // 106 | _.each(themes, function (theme) { 107 | // Create the command id used by the menu 108 | var command = registerCommand(theme); 109 | 110 | if (lastEntry) { 111 | // Add theme menu item 112 | if (theme.name > lastEntry.name || !lastEntry.name) { 113 | menu.addMenuItem(command.id, "", Menus.AFTER, lastEntry.id); 114 | } 115 | else { 116 | menu.addMenuItem(command.id, "", Menus.BEFORE, lastEntry.id); 117 | } 118 | } 119 | else { 120 | // Add theme menu item 121 | menu.addMenuItem(command.id); 122 | } 123 | 124 | commands[theme.name] = command; 125 | 126 | // Keep track of last menu entry to make sure we have the right place for 127 | // the next menu item 128 | lastEntry = command; 129 | 130 | // Make sure to init the menu entry when loading the themes. 131 | if (currentTheme === theme.name) { 132 | syncMenuSelection(true, theme.name); 133 | } 134 | }); 135 | } 136 | 137 | 138 | function syncMenuSelection(val, theme) { 139 | var command = CommandManager.get("theme." + theme); 140 | if (command) { 141 | command.setChecked(val); 142 | } 143 | } 144 | 145 | 146 | function clear() { 147 | Menus.removeMenu("editortheme"); 148 | loadedThemes = {}; 149 | } 150 | 151 | 152 | exports.init = init; 153 | exports.loadThemes = loadThemes; 154 | exports.clear = clear; 155 | }); 156 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Brackets-Themes 2 | =============== 3 | 4 | Set CodeMirror and Custom themes in Brackets. 5 | 6 | 7 | Features 8 | =============== 9 | 10 | * Automatic loading of CodeMirror's themes shipped with Brackets. 11 | * Enjoy a variety of custom themes created by other users like yourself! For custom themes 101 primer, please read below. 12 | * Import themes from http://studiostyl.es/. 13 | * Configure font size and font type. 14 | * Disable scrollbars defined in themes. Good if you just want to use the default scrollbars. 15 | * Support for LESS files! 16 | * Auto reload themes upon saving changes made to theme files. 17 | * Configure custom folders to load themes from. This is good if you want to have a folder to hold your custom themes that you want to persist after Brackets/Themes updates. Read this issue if you want to see why sometimes you need this feature. 18 | * Doctype specific styling. See below for an example. 19 | * Auto detection of dark themes so that Brackets can do its dark theme specific styling. 20 | 21 | 22 | Screenshot 23 | =============== 24 | Visual Studio 25 | ![Visual Studio](https://raw.github.com/wiki/MiguelCastillo/Brackets-Themes/images/VisualStudio.png) 26 | 27 | Monokai Dark Soda 28 | ![Monokai Dark Soda theme](https://raw.github.com/wiki/MiguelCastillo/Brackets-Themes/images/MonokaiDarkSoda.png) 29 | 30 | Dracula 31 | ![Dracula](https://raw.github.com/wiki/MiguelCastillo/Brackets-Themes/images/Dracula.png) 32 | 33 | Solarized 34 | ![Obsidian](https://raw.github.com/wiki/MiguelCastillo/Brackets-Themes/images/Solarized.png) 35 | 36 | Delkos 37 | ![Delkos](https://raw.github.com/wiki/MiguelCastillo/Brackets-Themes/images/Delkos.png) 38 | 39 | Obsidian 40 | ![Obsidian](https://raw.github.com/wiki/MiguelCastillo/Brackets-Themes/images/Obsidian.png) 41 | 42 | Zamiere 43 | ![Delkos](https://raw.github.com/wiki/MiguelCastillo/Brackets-Themes/images/Zamiere.png) 44 | 45 | 46 | Doctype styling 47 | =============== 48 | 49 | Themes will add a doctype to the codemirror instance so that you can easily craft css rules to style different document types. 50 | 51 | ``` css 52 | .CodeMirror[doctype=javascript] .cm-property { 53 | color: brown !important; 54 | } 55 | 56 | .CodeMirror[doctype=less] .cm-property, 57 | .CodeMirror[doctype=css] .cm-property { 58 | color: red !important; 59 | } 60 | ``` 61 | 62 | 63 | Custom themes 101 guide 64 | =============== 65 | 66 | Custom themes are codemirror's themes, so you will need to be familiar with codemirror's theme guidelines. I provide a set of steps to get you started below, but for more details please navigate to http://codemirror.net/doc/manual.html and search for "theme". 67 |

    68 | Codemirror's themes are css files. Important requirement is that the file name has to match your css class definition. E.g. If your theme file is called "default", then your primary css class name needs to be "default". Codemirror's guidelines require that the actual css class name starts with ".cm-s-", so your fully qualified css class name will be ".cm-s-default". 69 |

    70 | To get you started, you could use the already existing custom theme "default.css". Let's do the following. 71 |
    72 | - Open the custom theme directory. Navigate to your themes manager directory (extensions directory/themes) and you will find custom themes in the "theme" directory. Brackets provides a quick way of accessing your extensions directory... Help > Show Extensions Folder. 73 | - Copy and paste the file "default.css" and rename it to "my-theme.css". 74 | - Open "my-theme.css" and replace "default" with "my-theme", which should end up looking like ".cm-s-my-theme". You will also have a second class ".CodeMirror", just leave it there and the net result will look like ".cm-s-my-theme.CodeMirror". 75 | - In "my-theme.css", change "background-color: #F8F8F8;" to "backgound-color: red;". 76 | - Relaunch brackets, open a JavaScript file and you should see the document with a red background. 77 |

    78 | For details on what can be customized, please navigate to http://codemirror.net/doc/manual.html and search for "Customized Styling". As you will notice, the documentation isn't exhautive but they suggest you use "codemirror.css" as a reference. Give it a try, it is pretty straight forward. 79 |

    80 | If you have a cool theme you created and want to share, please send it my way and I will gladly add it to the custom themes. 81 | 82 | 83 | FAQ 84 | =============== 85 | 86 | * Why disabling/enabling the scrollbars don't always take effect? 87 | - This due to the fact that CodeMirror builds "fake" scrollbars that only get created when the document is loaded. So toggling the scrollbars with the document open might not take effect as expected. To get around this behavior, reopen the document or restart Brackets. 88 | 89 | * How can I use Themes with Edge Code? 90 | - You can install using this URL `https://github.com/MiguelCastillo/Brackets-Themes/archive/v1.0.4.zip` 91 | 92 | 93 | How to 94 | =============== 95 | 96 | * Set a theme? Find the Themes menu and make a selection. 97 | ![Themes Menu](https://raw.github.com/wiki/MiguelCastillo/Brackets-Themes/images/SetTheme.png) 98 | 99 | Credit 100 | ============== 101 | Corey Gwin: Monokai Dark Soda
    102 | Kulcsár Kázmér: Zamiere
    103 | Diego Alvarez: Aquaman
    104 | Felipe K. de Mello: Dracula
    105 | Fernando Hurtado: Nando
    106 | Jordan Hess: Pixie
    107 | John Hamm: Hammsidian
    108 | Christopher Kelly (scriptmunkee) for additions to reset.css
    109 | 110 | Contact me 111 | =============== 112 | 113 | If you have any issues or want to just drop in a line, you can use my personal email at manchagnu@gmail.com 114 | 115 | License 116 | =============== 117 | 118 | Licensed under MIT 119 | -------------------------------------------------------------------------------- /theme/aquaman.css: -------------------------------------------------------------------------------- 1 | 2 | /* Made with love by @DiegoAlvarezA */ 3 | 4 | #main-toolbar { 5 | background:#3c3f41; 6 | } 7 | 8 | #sidebar #working-set-header , 9 | #sidebar #open-files-container ul li.selected a , 10 | #sidebar #open-files-container ul li a:hover, 11 | #sidebar #project-files-header, 12 | #sidebar #project-files-header #project-dropdown-toggle { 13 | color:#f8cb4f; 14 | } 15 | 16 | 17 | #sidebar #open-files-container { 18 | color:#fafafa; 19 | } 20 | 21 | 22 | #sidebar #open-files-container ul li a span.extension, 23 | #sidebar #project-files-container ul li a span.extension { 24 | color:#fce8b1 25 | } 26 | 27 | 28 | #sidebar #project-files-container ul li a { 29 | color:#fafafa; 30 | -webkit-transition:all 0.1s ease-in-out; 31 | } 32 | 33 | #sidebar #project-files-container ul li a.jstree-hovered { 34 | color:#f8cb4f; 35 | -webkit-transform:translateX(5px); 36 | } 37 | 38 | 39 | 40 | .cm-s-aquaman.CodeMirror{ 41 | background:#242424; 42 | color:#e0e0e0; 43 | } 44 | 45 | .cm-s-aquaman .CodeMirror-gutters { 46 | background-color: #242424; 47 | border-right:0; 48 | } 49 | 50 | .cm-s-aquaman .CodeMirror-activeline .CodeMirror-gutter-elt { 51 | color: #eeeeee; 52 | } 53 | 54 | .cm-s-aquaman .CodeMirror-hscrollbar{ 55 | bottom: 2px; 56 | border-color: #202020; 57 | } 58 | 59 | .cm-s-aquaman .CodeMirror-vscrollbar{ 60 | right: 2px; 61 | border-color: #202020; 62 | } 63 | 64 | .cm-s-aquaman .CodeMirror-hscrollbar::-webkit-scrollbar { 65 | height: 10px; 66 | } 67 | 68 | .cm-s-aquaman .CodeMirror-vscrollbar::-webkit-scrollbar { 69 | width: 10px; 70 | } 71 | .cm-s-aquaman .CodeMirror-vscrollbar::-webkit-scrollbar-track , 72 | .cm-s-aquaman .CodeMirror-hscrollbar::-webkit-scrollbar-track { 73 | background: transparent; 74 | } 75 | .cm-s-aquaman .CodeMirror-vscrollbar::-webkit-scrollbar-thumb , 76 | .cm-s-aquaman .CodeMirror-hscrollbar::-webkit-scrollbar-thumb { 77 | background: #3c3f41; 78 | 79 | } 80 | .cm-s-aquaman .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover , 81 | .cm-s-aquaman .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover { 82 | background: #dd8440; 83 | } 84 | .cm-s-aquaman .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:active , 85 | .cm-s-aquaman .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:active{ 86 | background: #4bd278; 87 | } 88 | 89 | .cm-s-aquaman .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { 90 | background-color: transparent; 91 | } 92 | 93 | 94 | .cm-s-aquaman .cm-keyword {color: #f6bf28;} 95 | .cm-s-aquaman .cm-number {color: #f8cb4f;} 96 | .cm-s-aquaman .cm-variable {color: #dd8440;} 97 | .cm-s-aquaman .cm-variable-2 {color: #f8cb4f;} 98 | .cm-s-aquaman .cm-variable-3 {color: #f8cb4f;} 99 | .cm-s-aquaman .cm-property {color: #fcc6a0;} 100 | .cm-s-aquaman .cm-operator {color: #e0e0e0;} 101 | .cm-s-aquaman .cm-atom {color: #f8cb4f;} 102 | .cm-s-aquaman .cm-comment {color: #4b4b4b; /* background:#d6d6d6; */} 103 | .cm-s-aquaman .cm-comment:hover {color: #242424; background:#d6d6d6;} 104 | .cm-s-aquaman .cm-string {color: #f8cb4f;} 105 | .cm-s-aquaman .cm-string-2 {color: #f8cb4f;} 106 | .cm-s-aquaman .cm-def {color: #41cf70;} 107 | .cm-s-aquaman .cm-meta {color: #f8cb4f;} 108 | .cm-s-aquaman .cm-qualifier {color: #41cf70;} 109 | .cm-s-aquaman .cm-tag {color: #dd8440;} 110 | .cm-s-aquaman .cm-builtin {color: #45cf5e;} 111 | .cm-s-aquaman .cm-attribute {color: #45cf5e;} 112 | .cm-s-aquaman .cm-link {color: #dd8440;} 113 | 114 | 115 | .cm-s-aquaman .CodeMirror-selected { 116 | background: #dd8440!important; 117 | opacity:0.2; 118 | 119 | } 120 | 121 | 122 | .cm-s-aquaman .cm-matchhighlight { 123 | background: #dd8440; 124 | color:#2c2c2c!important; 125 | border-radius:0px; 126 | 127 | } 128 | 129 | 130 | .cm-s-aquaman .CodeMirror-matchingtag { 131 | color: #4bd164 !important; 132 | text-decoration:underline; 133 | 134 | } 135 | 136 | .cm-s-aquaman span.CodeMirror-searching { 137 | background: #4bd278; 138 | color:#2c2c2c !important; 139 | border-radius:0px; 140 | } 141 | 142 | 143 | .cm-s-aquaman .cm-matchhighlight.CodeMirror-searching.CodeMirror-selectedtext { 144 | background: #dd8440 ; 145 | color:#2c2c2c !important; 146 | border-radius:0px; 147 | } 148 | 149 | 150 | .cm-s-aquaman span.CodeMirror-matchingbracket { 151 | color: #f7c741 !important; 152 | background:transparent; 153 | font-weight: bold; 154 | backface-visibility: hidden; 155 | 156 | } 157 | 158 | .cm-s-aquaman span.CodeMirror-nonmatchingbracket { 159 | color: #f7c741 !important; 160 | backface-visibility: hidden; 161 | 162 | } 163 | 164 | 165 | .cm-s-aquaman div.CodeMirror-cursor , 166 | .cm-s-aquaman div.CodeMirror-secondarycursor { 167 | border-left: 2px solid #ff8833; 168 | z-index:5; 169 | } 170 | 171 | 172 | #status-bar { 173 | border-top:1px solid #484b4d; 174 | background:#3c3f41; 175 | 176 | } 177 | 178 | #status-bar #status-info { 179 | color:#f7c741; 180 | 181 | } 182 | 183 | #status-bar #status-indicators{ 184 | background:#3c3f41; 185 | 186 | } 187 | 188 | #status-bar #status-indicators #status-language { 189 | color:#dd8440; 190 | } 191 | 192 | 193 | #status-bar #status-indicators #status-indent { 194 | color:#41cf70; 195 | } 196 | 197 | #status-indicators #status-overwrite { 198 | color: #ddd; 199 | } 200 | 201 | #context-menu-bar .dropdown-menu a{color:#3c3f41} 202 | #context-menu-bar .dropdown-menu a:hover{background:#f8cb4f} 203 | 204 | 205 | .inline-widget .CodeMirror-gutter { 206 | background: #242424 !important; 207 | 208 | } 209 | 210 | .inline-editor-header{ 211 | box-shadow: inset 0 0 5px #1f1f1f; 212 | background:#242424; 213 | height:30px; 214 | width:100%; 215 | } 216 | 217 | 218 | .inline-editor-header a.filename span.line-number{ 219 | color:#e0e0e0 !important; 220 | } 221 | 222 | 223 | .inline-editor-header a.filename { 224 | color:#f8cb4f !important; 225 | } 226 | 227 | 228 | .inline-widget .color-editor ul.swatches li span.value{color:#525252} 229 | 230 | 231 | 232 | -------------------------------------------------------------------------------- /theme/Earth.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Theme Earth Copyright (c) 2014 "Denisov21". 3 | * v 2.5.0 4 | * Licensed under MIT 5 | * 6 | */ 7 | 8 | /*Main area*/ 9 | .CodeMirror, .CodeMirror .CodeMirror-scroll {background: #2b2a27; color: #34a84f;} 10 | 11 | /************** Cursor e OVR cursor **************/ 12 | .CodeMirror-cursor {border-left: 1px solid #ede0ce;} 13 | .CodeMirror .CodeMirror-overwrite .CodeMirror-cursor {border-left: none; border-bottom: 2px solid #ede0ce;} 14 | 15 | .CodeMirror .CodeMirror-scroll .CodeMirror-gutters{background:#2b2a27; border-right:1px solid #000;}/*Left vertical bar with line count*/ 16 | 17 | /*Syntax elements & action*/ 18 | .cm-atom, .cm-link{color:#BCD42A;} /*Attribute value ex. #f00 in color:#f00; Link;*/ 19 | .cm-def{color: inherit;} /*variable definition*/ 20 | .cm-number{color:#BCD42A;} /*Numbers*/ 21 | .cm-variable{color: inherit;} /*Variable name ex. class Variable_name */ 22 | .cm-variable-2{color: #FF5D38;} /*Variable declaration ex. $variable */ 23 | .cm-variable-3{color: #5C5C5C;} 24 | .cm-property{color:#FF5D38;} /*Property ex. color in color:#f00;*/ 25 | .cm-operator{color: inherit;} /*Operators ex. dots (:) between property and atom value */ 26 | .cm-comment{color:#c18c23;} /*Comment*/ 27 | .cm-string{color:#BCD42A;} /*String elements ex. "description" in name="description" - including quotation*/ 28 | .cm-meta{color: #00ffce; } /*Meta elements like ex.: */ 29 | .cm-qualifier{color:#BCD42A; /*opacity 0.75;*/ font-weight: bolder;} /*Final qualifier like css class ex.: .cm-qualifier*/ 30 | .cm-builtin{color:#00a8c6; font-weight: bolder;} /*Final qualifier like css id ex.: #context-menu-bar*/ 31 | .cm-tag{color:#26A6A6;} /*Tags ex. ul or
      */ 32 | .cm-attribute{color:#FF5D38;} /*Attribute ex. rel, href, name*/ 33 | .cm-keyword {color:#26A6A6;} /*Element call ex. array, class, public function, if, elseif, !important*/ 34 | .cm-matchingtag{background-color:#2b2a27 ;} 35 | .cm-error{ font-style: italic; border-bottom: 2px dotted #ff3292; } 36 | .cm-header{color: #BCD42A; font-weight: bolder;} /*Element in md file ex. # title*/ 37 | .CodeMirror-selected{background-color: rgb(224,240,250); background-color: rgba(224, 240, 250, 0.2) !important;} /*Selected lines - may need !important*/ 38 | .CodeMirror-activeline-background{background:rgb(255,255,255); background:rgba(255, 255, 255, 0.1) !important; border-bottom: 1px solid #ed900e; border-top: 1px solid #ed900e;} /*Active line - may need !important*/ 39 | .CodeMirror-matchingtag{background:none; text-decoration:underline; font-weight: bold; color: #38b2ff !important;} /*Matching tags, open/close. Try !important for bg, color etc. if it doesn't work*/ 40 | .CodeMirror-matchingbracket{background-color:#f00; font-weight: bold;} /*Matching brackets, open/close*/ 41 | .cm-attribute{color: #FF5D38; } /*class in file md*/ 42 | .CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt {color: #f00; background-color: transparent !important;} 43 | 44 | /*Inline editor(Ex. Quick Edit - Ctrl + E)*/ 45 | 46 | .CodeMirror .inline-widget{background: #6a6560; color: #ccc;} 47 | 48 | /********* Quick Documentation - Ctrl + K - CSS*********/ 49 | .inline-widget .css-prop-defn { color: white !important; } 50 | .inline-widget .css-prop-defn h1 { color: #FF5D38 !important; } 51 | .inline-widget .css-prop-defn dt { color: #48adff !important; } 52 | .inline-widget .css-prop-defn b { color: #37ad3e !important; } 53 | .inline-widget .css-prop-defn code { color: #ea7e06 !important; } 54 | .inline-widget .css-prop-defn .divider-holder.no-focus .divider { border-color: #5C5C5C; } /* Stripe in the middle */ 55 | 56 | .CodeMirror .CodeMirror-linenumber {padding-right: 5px; padding-left: 1px; color: #00A8C6;} 57 | 58 | /************** Layouts die mehrere bereiche abdecken **************/ 59 | /******* all scrollbars - 60 | * for individual design for the scrollbars in difrent areas use fowllowing id's and classes: 61 | * #caniuse(extension canIUse), .CodeMirror(working area), #sidebar, #problems-panel(code lint menu), 62 | * #codehint-menu-bar, #search-files-results *******/ 63 | 64 | /* Scrollbar gutter for the sidebar*/ 65 | #sidebar ::-webkit-scrollbar-track { background-color: transparent; } 66 | 67 | /* Schrollbar ::-webkit-scrollbar" in the main area */ 68 | ::-webkit-scrollbar {width: 11px !important; height: 11px !important;} 69 | 70 | .CodeMirror-scrollbar-filler {height: 11px !important;width: 11px !important; background: #5C5C5C;} 71 | 72 | 73 | .CodeMirror-vscrollbar{bottom: 11px !important; top: 11px ;border-right: thin solid #999;} 74 | 75 | .CodeMirror .CodeMirror-hscrollbar{ height: 11px; right: 11px !important;} 76 | 77 | /* Scrollbar gutter - Scrollbar rinne */ 78 | ::-webkit-scrollbar-track {background-color: #5C5C5C;} 79 | 80 | /* Scroll object - "background-color" dont work use border to change color*/ 81 | ::-webkit-scrollbar-thumb {border: 6px solid #2b2a27; border-radius: 2px;} 82 | 83 | ::-webkit-scrollbar-thumb:hover { border: 6px solid #1C2020; } 84 | ::-webkit-scrollbar-thumb:active { border: 6px solid #101010; } 85 | 86 | /* the "x" to close, shout work for all avalibal classes */ 87 | .close {color: #2b2a27 !important; opacity: 0.5; } 88 | .close:hover { opacity: 1; } 89 | 90 | /*************************************** Main area***************************************/ 91 | 92 | 93 | /* Show Whitespace (https://github.com/DennisKehrig/brackets-show-whitespace)*/ 94 | .CodeMirror .cm-dk-whitespace-space::before, 95 | .CodeMirror .cm-dk-whitespace-tab::before, 96 | .CodeMirror .cm-dk-whitespace-leading-space::before, 97 | .CodeMirror .cm-dk-whitespace-leading-tab::before, 98 | .CodeMirror .cm-dk-whitespace-trailing-space::before, 99 | .CodeMirror .cm-dk-whitespace-trailing-tab::before { 100 | background-color: #00a8c6 !important; 101 | } 102 | 103 | /* Code Folding (https://github.com/thehogfather/brackets-code-folding) and Brackets 1.3 (Code Folding)*/ 104 | .CodeMirror-foldgutter, 105 | .CodeMirror-foldgutter-blank, 106 | .CodeMirror-foldgutter-folded, 107 | .CodeMirror-foldgutter-open, 108 | 109 | .CodeMirror-foldgutter-folded:after{ 110 | color: #00a8c6; 111 | } 112 | 113 | .CodeMirror-foldgutter-open:after {/*content: "\25bd";*/ color: #f00;} 114 | .CodeMirror-foldmarker {background-color: #00A8C6; border-color: #5C5C5C; color: #ede0ce; padding: 0 10px;} 115 | 116 | 117 | /* New Class for Brackets 0.43 (searching)*/ 118 | 119 | .CodeMirror-searching {background-color: #38b2ff; border-bottom: 2px solid #FF5D38; font-weight: bolder;} 120 | .searching-current-match {background-color: #ede0ce;} 121 | .quick-view-highlight{background-color: rgb(56, 178, 255); background-color: rgba(56, 178, 255, 0.26);border-bottom: 1px solid #FF5D38; } 122 | 123 | -------------------------------------------------------------------------------- /mirror-style/template.less: -------------------------------------------------------------------------------- 1 | .CodeMirror { 2 | .documentBackground(); 3 | .documentFontColor(); 4 | background: @backgroundColor; 5 | color: @fontColor; 6 | } 7 | 8 | .CodeMirror-gutters { 9 | background-color: @guttersBackground; 10 | border-right: 0; 11 | } 12 | 13 | .CodeMirror-focused .CodeMirror-linenumber, 14 | .CodeMirror-linenumber { 15 | color: @linenumberColor; 16 | border-right: 0; 17 | } 18 | 19 | .cm-keyword { 20 | color: @keywordColor; 21 | } 22 | 23 | .cm-number { 24 | color: @numberColor; 25 | } 26 | 27 | .cm-variable { 28 | color: @variableColor; 29 | } 30 | 31 | .cm-variable-2 { 32 | color: @variable2Color; 33 | } 34 | 35 | .cm-variable-3 { 36 | color: @variable3Color; 37 | } 38 | 39 | .cm-property { 40 | color: @propertyColor; 41 | } 42 | 43 | .cm-operator { 44 | color: @operatorColor; 45 | } 46 | 47 | .cm-atom { 48 | color: @atomColor; 49 | } 50 | 51 | .cm-comment { 52 | color: @commentColor; 53 | background: @commentBackground; 54 | } 55 | 56 | .cm-string { 57 | color: @stringColor; 58 | } 59 | 60 | .cm-string-2 { 61 | color: @string2Color; 62 | } 63 | 64 | .cm-def { 65 | color: @definitionColor; 66 | } 67 | 68 | .cm-meta { 69 | color: @metaColor; 70 | } 71 | 72 | .cm-qualifier { 73 | color: @qualifierColor; 74 | } 75 | 76 | .cm-tag { 77 | color: @tagColor; 78 | } 79 | 80 | .cm-builtin { 81 | color: @builtingColor; 82 | } 83 | 84 | .cm-attribute { 85 | color: @attributeColor; 86 | } 87 | 88 | .cm-link { 89 | color: @linkColor; 90 | } 91 | 92 | 93 | .doctype-css { 94 | //@cssCommentColor: <%= CSSComment.color %>; 95 | //@cssCommentBackground: <%= CSSComment.background %>; 96 | //@cssKeywordColor: <%= CSSKeyword.color %>; 97 | //@cssPropertyColor: <%= CSSPropertyName.color %>; 98 | //@cssAtomColor: <%= CSSPropertyValue.color %>; 99 | //@cssQualifierColor: <%= CSSSelector.color %>; 100 | //@cssStringColor: <%= CSSStringValue.color %>; 101 | //@cssNumberColor: <%= CSSStringValue.color %>; 102 | //@cssMetaColor: <%= CSSSelector.color %>; 103 | //@cssTagColor: <%= CSSSelector.color %>; 104 | 105 | 106 | .cm-keyword { 107 | color: @cssKeywordColor; 108 | } 109 | 110 | .cm-number { 111 | color: @cssNumberColor; 112 | } 113 | 114 | .cm-property { 115 | color: @cssPropertyColor; 116 | } 117 | 118 | .cm-atom { 119 | color: @cssAtomColor; 120 | } 121 | 122 | .cm-comment { 123 | color: @cssCommentColor; 124 | background: @cssCommentBackground; 125 | } 126 | 127 | .cm-string { 128 | color: @cssStringColor; 129 | } 130 | 131 | .cm-meta { 132 | color: @cssMetaColor; 133 | } 134 | 135 | .cm-qualifier { 136 | color: @cssQualifierColor; 137 | } 138 | 139 | .cm-tag { 140 | color: @cssTagColor; 141 | } 142 | } 143 | 144 | .doctype-less:extend(.doctype-css all) { 145 | } 146 | 147 | .doctype-html { 148 | // HTML definitions 149 | // 150 | //@htmlAttributeColor: <%= HTMLAttribute.color %>; 151 | //@htmlAttributeValueColor: <%= HTMLAttributeValue.color %>; 152 | //@htmlCommentColor: <%= HTMLComment.color %>; 153 | //@htmlCommentBackground: <%= HTMLComment.background %>; 154 | //@htmlElementNameColor: <%= HTMLElementName.color %>; 155 | //@htmlEntityColor: <%= HTMLEntity.color %>; 156 | //@htmlOperatorColor: <%= HTMLOperator.color %>; 157 | //@htmlOperatorBackground: <%= HTMLOperator.background %>; 158 | //@htmlTagDelimiterColor: <%= HTMLTagDelimeter.color %>; 159 | 160 | .cm-tag { 161 | color: @htmlElementNameColor; 162 | } 163 | 164 | .cm-comment { 165 | color: @htmlCommentColor; 166 | background-color: @htmlCommentBackground; 167 | } 168 | 169 | .cm-bracket { 170 | color: @htmlTagDelimiterColor; 171 | } 172 | 173 | .cm-string { 174 | color: @htmlAttributeValueColor; 175 | } 176 | 177 | .cm-attribute { 178 | color: @htmlAttributeColor; 179 | } 180 | } 181 | 182 | .doctype-htmlmixed:extend(.doctype-html all) { 183 | } 184 | 185 | .CodeMirror-selected { 186 | background: @selectedTextBackground !important; 187 | opacity: @selectedTextOpacity; 188 | } 189 | 190 | .cm-matchhighlight { 191 | background: @matchHightlightBackground; 192 | color: @matchHightlightColor !important; 193 | border-radius: 0px; 194 | } 195 | 196 | .CodeMirror-matchingtag { 197 | .documentBackground(); 198 | background-color: darken(@backgroundColor, 10%) !important; 199 | } 200 | 201 | .CodeMirror-searching { 202 | background: #4bd278; 203 | color: #2c2c2c !important; 204 | border-radius: 0px; 205 | } 206 | 207 | .cm-matchhighlight.CodeMirror-searching.CodeMirror-selectedtext { 208 | background: #dd8440; 209 | color: #2c2c2c !important; 210 | border-radius: 0px; 211 | } 212 | 213 | .CodeMirror-matchingbracket { 214 | color: @matchingBracketColor !important; 215 | background: transparent; 216 | font-weight: bold; 217 | backface-visibility: hidden; 218 | } 219 | 220 | .CodeMirror-nonmatchingbracket { 221 | color: @nonmatchingBracketColor !important; 222 | backface-visibility: hidden; 223 | } 224 | 225 | .CodeMirror-cursor, 226 | .CodeMirror-secondarycursor { 227 | .documentBackground(); 228 | border-left: 1px solid contrast(@backgroundColor) !important; 229 | } 230 | 231 | #status-bar { 232 | .documentBackground(); 233 | .documentFontColor(); 234 | 235 | background: @backgroundColor; 236 | 237 | #status-info { 238 | color: lighten(@fontColor, 10%); 239 | } 240 | 241 | #status-indicators { 242 | background: @backgroundColor; 243 | color: @fontColor; 244 | } 245 | 246 | #status-overwrite { 247 | background: @backgroundColor; 248 | color: @fontColor; 249 | } 250 | 251 | #status-language { 252 | } 253 | 254 | #status-indent { 255 | } 256 | } 257 | 258 | #context-menu-bar { 259 | .dropdown-menu a { 260 | color: #3c3f41 261 | } 262 | 263 | .dropdown-menu a:hover { 264 | background: #f8cb4f 265 | } 266 | } 267 | 268 | .inline-widget .CodeMirror-gutter { 269 | background: #242424 !important; 270 | 271 | .color-editor ul.swatches li span.value { 272 | color: #525252 273 | } 274 | } 275 | 276 | .inline-editor-header { 277 | box-shadow: inset 0 0 5px #1f1f1f; 278 | background: #242424; 279 | height: 30px; 280 | width: 100%; 281 | 282 | a.filename span.line-number { 283 | color: #e0e0e0 !important; 284 | } 285 | 286 | a.filename { 287 | color: #f8cb4f !important; 288 | } 289 | } 290 | -------------------------------------------------------------------------------- /views/settings.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Brackets Themes Copyright (c) 2014 Miguel Castillo. 3 | * 4 | * Licensed under MIT 5 | */ 6 | 7 | 8 | define(function(require, exports, module) { 9 | "use strict"; 10 | 11 | var _ = brackets.getModule("thirdparty/lodash"); 12 | var Dialogs = brackets.getModule("widgets/Dialogs"), 13 | DefaultDialogs = brackets.getModule("widgets/DefaultDialogs"), 14 | FileSystem = brackets.getModule("filesystem/FileSystem"), 15 | StringUtils = brackets.getModule("utils/StringUtils"), 16 | Strings = brackets.getModule("strings"), 17 | ko = require("lib/knockout-3.0.0"), 18 | koFactory = require("lib/ko.factory"), 19 | importer = require("mirror-style/main"), 20 | packageInfo = JSON.parse(require("text!package.json")), 21 | tmpl = { 22 | "main": require("text!views/settings.html"), 23 | "paths": require("text!views/paths.html"), 24 | "import": require("text!views/import.html"), 25 | "schedule": require("text!views/schedule.html"), 26 | "about": require("text!views/about.html") 27 | }; 28 | 29 | // Make sure koFactory get a reference to ko... 30 | koFactory.ko = ko; 31 | koFactory.$ = $; 32 | 33 | // Setup all the templates so that we can easily render them with Mustache 34 | var $settings = $(tmpl.main).addClass("themeSettings"); 35 | $("#pathsSettings", $settings).html(tmpl.paths); 36 | $("#importSettings", $settings).html(tmpl.import); 37 | $("#scheduleSettings", $settings).html(tmpl.schedule); 38 | $("#aboutSettings", $settings).html(tmpl.about); 39 | 40 | 41 | function openDialog(path, openFile, title) { 42 | var result = $.Deferred(); 43 | title = openFile ? Strings.OPEN_FILE : Strings.CHOOSE_FOLDER; 44 | 45 | FileSystem.showOpenDialog(false, !openFile, title, path, null, function (err, files) { 46 | var errorMessage; 47 | 48 | if (!err) { 49 | // If length == 0, user canceled the dialog; length should never be > 1 50 | if (files.length > 0) { 51 | result.resolve(files[0]); 52 | } 53 | else { 54 | result.reject("User canceled"); 55 | } 56 | } 57 | else { 58 | errorMessage = openFile ? "Error opening file " + path : "Error opening directory " + path; 59 | result.reject(errorMessage); 60 | Dialogs.showModalDialog( 61 | DefaultDialogs.DIALOG_ID_ERROR, 62 | errorMessage, 63 | StringUtils.format(Strings.OPEN_DIALOG_ERROR, err) 64 | ); 65 | } 66 | }); 67 | 68 | return result.promise(); 69 | } 70 | 71 | 72 | function getViewModel(settingsManager) { 73 | function defaults() { 74 | var settings = settingsManager.getAll(); 75 | return $.extend(true, {}, {settings: settings, package: packageInfo, imported: []}); 76 | } 77 | 78 | var viewModel = koFactory.serialize(defaults()); 79 | 80 | viewModel.reset = function() { 81 | settingsManager.reset(); 82 | koFactory.serialize(defaults(), viewModel); 83 | }; 84 | 85 | viewModel.addPath = function() { 86 | openDialog("").done(function(newpath) { 87 | viewModel.settings.paths.push(koFactory({path:newpath})); 88 | }); 89 | }; 90 | 91 | viewModel.removePath = function() { 92 | viewModel.settings.paths.remove(this); 93 | }; 94 | 95 | viewModel.editPath = function() { 96 | openDialog(this.path()).done(function(newpath) { 97 | this.path(newpath); 98 | }.bind(this)); 99 | }; 100 | 101 | viewModel.importStudioStyle = function() { 102 | // This is really important. If the default folder to place custom themes 103 | // does not exist, then we need to create one so that we have a place to 104 | // put these default themes to prevent them from being deleted when updates 105 | // take place. 106 | var directory = FileSystem.getDirectoryForPath(settingsManager.customPath); 107 | directory.exists(function(err, exists) { 108 | if (!err && !exists) { 109 | directory.create(); 110 | } 111 | }); 112 | 113 | function importTheme(themeFile) { 114 | return importer.importFile(themeFile).fail(function(err) { 115 | viewModel.imported.push({fileName: themeFile, err: !!err}); 116 | console.log("Failure importing theme", themeFile, "- " + err); 117 | }); 118 | } 119 | 120 | function saveTheme(theme) { 121 | var fileName = settingsManager.customPath + "/" + theme.fileName; 122 | var file = FileSystem.getFileForPath (fileName); 123 | 124 | file.write(theme.content, {}, function(err) { 125 | viewModel.imported.push({fileName: theme.fileName, err: !!err}); 126 | 127 | if (err) { 128 | console.log("Failure importing theme", theme.fileName, "- " + err); 129 | } 130 | }); 131 | } 132 | 133 | openDialog("", true) 134 | .then(importTheme) 135 | .then(saveTheme); 136 | }; 137 | 138 | return viewModel; 139 | } 140 | 141 | 142 | function open(settings) { 143 | var viewModel = getViewModel(settings); 144 | var $template = $settings.clone(); 145 | 146 | $template.find("[data-toggle=tab].default").tab("show"); 147 | koFactory.bind($template, viewModel); 148 | 149 | Dialogs.showModalDialogUsingTemplate($template).done(function( id ) { 150 | if (id === "save") { 151 | var model = koFactory.deserialize(viewModel); 152 | var newSettings = model.settings; 153 | var settingsValues = settings.getAll(); 154 | 155 | var imported = _.filter(model.imported, function(item) { 156 | return !item.err; 157 | }); 158 | 159 | for (var i in newSettings) { 160 | if (settingsValues.hasOwnProperty(i)) { 161 | settings.setValue(i, newSettings[i]); 162 | } 163 | } 164 | 165 | if (imported.length) { 166 | $(settings).triggerHandler("imported", [imported]); 167 | } 168 | } 169 | }); 170 | } 171 | 172 | 173 | exports.open = open; 174 | }); 175 | 176 | -------------------------------------------------------------------------------- /theme/pixie.css: -------------------------------------------------------------------------------- 1 | .panel { 2 | background:#2b2b2b; 3 | } 4 | 5 | #main-toolbar, 6 | #status-bar, 7 | #status-indicators { 8 | background:#242424; 9 | color:#ccc; 10 | } 11 | 12 | /*#sidebar { 13 | position: inherit !important; 14 | } 15 | #working-set-header { 16 | display: none !important; 17 | } 18 | #open-files-container { 19 | width: 100% !important; 20 | position: absolute !important; 21 | z-index: 10 !important; 22 | max-height: auto !important; 23 | height: auto !important; 24 | overflow: hidden !important; 25 | } 26 | #open-files-container li { 27 | float: left; 28 | }*/ 29 | 30 | #status-info { 31 | color:#ccc; 32 | } 33 | 34 | #open-files-container, 35 | #working-set-header { 36 | color:#aaa; 37 | background:#111; 38 | } 39 | #project-files-header { 40 | color:#aaa; 41 | background:#222; 42 | } 43 | .recent-folder, 44 | #open-folder-link { 45 | color:#ddd; 46 | } 47 | #project-dropdown.dropdown-menu a.selected { 48 | background: #0081c2; 49 | } 50 | .dropdown-menu { 51 | background: #333; 52 | color: #aaa; 53 | } 54 | .dropdown-menu .divider { 55 | background: #222; 56 | border-bottom: 1px solid #444; 57 | } 58 | .sidebar-selection { 59 | background: #1a1a1a; 60 | } 61 | .sidebar-selection-triangle { 62 | display: none !important; 63 | } 64 | 65 | .jstree-brackets li.jstree-closed > a, 66 | .jstree-brackets li.jstree-open > a { 67 | color:#ccc; 68 | } 69 | 70 | #open-files-container .extension, 71 | .jstree-brackets li .extension { 72 | color:#aaa; 73 | } 74 | 75 | .cm-s-pixie.CodeMirror { 76 | background-color:#202020; 77 | color:#fff; 78 | } 79 | 80 | .cm-s-pixie.CodeMirror div.CodeMirror-cursor { 81 | border-left:1px solid #f8f8f0; 82 | z-index:3; 83 | } 84 | 85 | .cm-s-pixie .CodeMirror-selected { 86 | background:#3d3d3d; 87 | opacity:.5; 88 | } 89 | 90 | .cm-s-pixie .CodeMirror-activeline .CodeMirror-gutter-elt { 91 | color: #eeeeee; 92 | } 93 | 94 | .cm-s-pixie .cm-keyword {color:#CC7833;} 95 | .cm-s-pixie .cm-atom {color:#A5C261;} 96 | .cm-s-pixie .cm-number {color:#A5C261;} 97 | .cm-s-pixie .cm-def {color:#A0BD2D;} 98 | .cm-s-pixie .cm-variable {color:#FFCC33;} 99 | .cm-s-pixie .cm-variable-2 {color:#DA4939;} 100 | .cm-s-pixie .cm-property {color:#DAD6CD;} 101 | .cm-s-pixie .cm-operator {color:#34A2D9;} 102 | .cm-s-pixie .cm-comment {color:#BC9458;} 103 | .cm-s-pixie .cm-string {color:#A0BD2D;} 104 | .cm-s-pixie .cm-string-2 {color:#A5C261;} 105 | .cm-s-pixie .cm-meta {color:#CC7833;} 106 | .cm-s-pixie .cm-qualifier {color:#FFCC33;} 107 | .cm-s-pixie .cm-bracket {color:#FF3333;} 108 | .cm-s-pixie .cm-tag {color:#E8BF6A;} 109 | .cm-s-pixie .cm-attribute {color:#FFCC33;} 110 | .cm-s-pixie .cm-builtin {color:#CC7833;} 111 | 112 | .cm-s-pixie .cm-matchhighlight { 113 | background:#00CCFF; 114 | box-shadow:0 0 5px #00CCFF; 115 | color:#000; 116 | border-radius:2px; 117 | } 118 | 119 | .cm-s-pixie.CodeMirror span.CodeMirror-nonmatchingbracket { 120 | color:#FF3333; 121 | text-shadow: none; 122 | border-bottom: 1px solid #FF3333; 123 | } 124 | 125 | .cm-s-pixie.CodeMirror span.CodeMirror-matchingbracket { 126 | color:#DAD6CD; 127 | text-shadow: none; 128 | border-bottom: 1px solid #DAD6CD; 129 | } 130 | 131 | .cm-s-pixie.CodeMirror span.cm-matchhighlight.CodeMirror-searching.CodeMirror-selectedtext { 132 | background-color:#FFCC33; 133 | color:#000; 134 | border:0; 135 | box-shadow:0 0 5px #FFCC33; 136 | border-radius:2px; 137 | } 138 | 139 | .cm-s-pixie.CodeMirror span.CodeMirror-matchingtag { 140 | color: #E8BF6A !important; 141 | background-color: #222222 !important; 142 | } 143 | 144 | .cm-s-pixie.CodeMirror span.CodeMirror-searching { 145 | background-color:#00CCFF; 146 | box-shadow:0 0 5px #00CCFF; 147 | color:#000; 148 | border-radius:2px; 149 | } 150 | 151 | .cm-s-pixie .CodeMirror-activeline-background { 152 | background:hsla(0,0%,0%,0.5)!important; 153 | margin:-1px -10px; 154 | } 155 | 156 | .cm-s-pixie div.CodeMirror-gutter { 157 | color:#ccc; 158 | } 159 | 160 | .cm-s-pixie div.CodeMirror-gutters { 161 | background-color:#333435; 162 | box-shadow:0 0 10px hsla(0,0%,0%,.8); 163 | padding:0 15px 20px 10px; 164 | border-right:0; 165 | } 166 | 167 | .cm-s-pixie span.CodeMirror-widget { 168 | margin:-3px 0px; 169 | display:inline-block; 170 | } 171 | .cm-s-pixie span.CodeMirror-foldmarker { 172 | display:inline-table; 173 | background:#ccc; 174 | border:0; 175 | color:#000; 176 | border-radius:3px; 177 | font-size:20px; 178 | margin:3px; 179 | padding:0px 5px; 180 | height:15px; 181 | line-height:15px; 182 | overflow:hidden; 183 | white-space:nowrap; 184 | } 185 | 186 | /* Let's get this party started */ 187 | ::-webkit-scrollbar { 188 | -webkit-appearance: none; 189 | width: 12px; 190 | } 191 | 192 | /* Track */ 193 | ::-webkit-scrollbar-track { 194 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 195 | -webkit-border-radius: 10px; 196 | border-radius: 10px; 197 | background-color: #1a1a1a; 198 | } 199 | 200 | /* Handle */ 201 | ::-webkit-scrollbar-thumb { 202 | -webkit-border-radius: 10px; 203 | border-radius: 10px; 204 | background: rgba(100,100,100,1); 205 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 206 | } 207 | ::-webkit-scrollbar-thumb:window-inactive { 208 | background: rgba(55,55,55,0.9); 209 | } 210 | 211 | .extension-manager-dialog .modal-header, 212 | .extension-manager-dialog .modal-footer { 213 | background: #222; 214 | } 215 | .extension-manager-dialog .modal-body { 216 | background: #1a1a1a; 217 | } 218 | .extension-manager-dialog .modal-footer { 219 | border-color: #1a1a1a; 220 | } 221 | .extension-manager-dialog .modal-header .nav-tabs > li > a { 222 | color: #eee; 223 | } 224 | .extension-manager-dialog .modal-header .nav-tabs > .active > a, 225 | .extension-manager-dialog .modal-header .nav-tabs > .active > a:hover { 226 | background: #333; 227 | border-color: #1a1a1a #1a1a1a transparent #1a1a1a; 228 | } 229 | .table-striped tbody tr:nth-child(odd) td, 230 | .table-striped tbody tr:nth-child(odd) th { 231 | background: #333; 232 | color: #eee; 233 | } 234 | .table-striped tbody tr:nth-child(even) td, 235 | .table-striped tbody tr:nth-child(even) th { 236 | background: #2a2a2a; 237 | color: #eee; 238 | } 239 | body.platform-win .extension-manager-dialog .modal-body .extension-list .ext-name, 240 | body.platform-win .extension-manager-dialog .modal-body .extension-list .ext-desc { 241 | color: #eee; 242 | } 243 | .extension-manager-dialog .modal-header .nav-tabs { 244 | border-color: #1a1a1a; 245 | } 246 | .extension-manager-dialog .modal-body .info-message { 247 | background: #1a1a1a; 248 | color: #888; 249 | } 250 | #project-dropdown-toggle { 251 | width: auto; 252 | } 253 | #devdocs-viewer-iframe ._header { 254 | background-color: #222; 255 | } 256 | .toolbar .nav .dropdown-menu li a, 257 | .context-menu .dropdown-menu li a, 258 | .codehint-menu .dropdown-menu li a { 259 | color: #bbb; 260 | } 261 | .toolbar .nav .dropdown-menu li a:hover, 262 | .context-menu .dropdown-menu li a:hover, 263 | .codehint-menu .dropdown-menu li a:hover, 264 | .toolbar .nav .dropdown-menu li a.highlight, 265 | .context-menu .dropdown-menu li a.highlight, 266 | .codehint-menu .dropdown-menu li a.highlight { 267 | color: #eee; 268 | background: #0081c2; 269 | } 270 | 271 | #status-overwrite { 272 | color:white; 273 | } 274 | -------------------------------------------------------------------------------- /theme/visual-studio-2012.css: -------------------------------------------------------------------------------- 1 | /* Main UI */ 2 | *:focus { 3 | outline: none !important; 4 | box-shadow: none !important; 5 | } 6 | 7 | #sidebar{ 8 | background:#D6DBE9; 9 | text-shadow:none; 10 | } 11 | 12 | #working-set-header { 13 | background:#D6DBE9; 14 | border-bottom: 4px solid #293955; 15 | color: #60728C; 16 | text-shadow: none; 17 | 18 | } 19 | #open-files-container{ /* Working files */ 20 | background: #293955; 21 | color: #fff; 22 | } 23 | 24 | #project-files-header {/* "working files" header and folder header*/ 25 | color:#777!important; 26 | } 27 | 28 | #working-set-option-btn, #project-dropdown-toggle, #main-toolbar a, .btn { 29 | color:#60728C; 30 | } 31 | #working-set-option-btn {background-color:#D6DBE9;} 32 | .btn { 33 | color:#000; 34 | border: 1px solid #ACACAC; 35 | border-radius: 0px; 36 | box-shadow: none; 37 | text-shadow: none; 38 | } 39 | .btn.primary { 40 | border-color: #E5C365; 41 | } 42 | .btn.active { 43 | background: none; 44 | background-color:#FFF0D0 !important; 45 | border-color: #E5C365; 46 | color: #E5C365 !important; 47 | } 48 | .btn:not([disabled]):hover { 49 | background: none; 50 | } 51 | #working-set-option-btn:hover, #project-dropdown-toggle:hover, #main-toolbar a:hover { /* Open url when hover */ 52 | color:#000; 53 | background-color:#FFF0D0 !important; 54 | border: 1px solid #E5C365; 55 | border-radius: 0px; 56 | } 57 | .btn:not([disabled]):hover 58 | { 59 | color:#000; 60 | background-color:#FFF0D0; 61 | border: 1px solid #E5C365; 62 | border-radius: 0px; 63 | } 64 | .status-language .btn:hover {background-color: #293955;} 65 | 66 | input { 67 | border: 1px solid #ACACAC; 68 | background-color: #f0f0f0; 69 | border-radius: 0px; 70 | } 71 | input:focus { 72 | border: 1px solid #E5C365; 73 | } 74 | 75 | #main-toolbar a { 76 | margin-left: 2px; 77 | margin-top: 6px; 78 | margin-bottom: -1px; 79 | border: 1px solid transparent; 80 | } 81 | 82 | #project-files-container { 83 | padding-top: 5px; 84 | background: #293955; 85 | } 86 | 87 | .jstree-brackets li a, /* Files, folder */ 88 | #open-files-container li a, 89 | #open-files-container li a.jstree-clicked { /* Files, folder in "working fiels"*/ 90 | color:#fff; 91 | } 92 | .jstree-brackets li a .extension, 93 | #open-files-container li a .extension, 94 | .jstree-brackets li.selected a .extension, 95 | .jstree-brackets li a.jstree-clicked .extension, 96 | #open-files-container li.selected a .extension 97 | { 98 | color: #ADACAC; 99 | } 100 | .jstree-brackets li.selected a, 101 | .jstree-brackets li a.jstree-clicked, /* Files, folder */ 102 | #open-files-container li.selected a, 103 | #open-files-container li.selected a.jstree-clicked { /* Files, folder in "working fiels"*/ 104 | color:#000; 105 | } 106 | 107 | .sidebar-selection{ /* Selected file or folder */ 108 | background:#A78B51; 109 | margin-left:0px; 110 | } 111 | 112 | .sidebar-selection-triangle{ /* ^ the cool arrow */ 113 | background:transparent; 114 | } 115 | 116 | .sidebar-selection-triangle.triangle-visible::before{ 117 | border-left:12px solid #FFF0D0; 118 | display:none; 119 | } 120 | 121 | #main-toolbar{ /* Toolbar to the right */ 122 | background:#D6DBE9; 123 | } 124 | 125 | #status-bar{ /* Bottom status bar */ 126 | background:#293955; 127 | } 128 | 129 | #status-indicators, 130 | #status-info{ /* Status bar text */ 131 | background:transparent; 132 | color: #fff; 133 | } 134 | 135 | /* Context menu */ 136 | .dropdown-menu { 137 | background-color: red; 138 | border: 1px solid #9ba7b7 !important; 139 | border-radius: none !important; 140 | background: linear-gradient(to bottom, #e9ecee 0%, #d0d7e2 100%) !important; 141 | } 142 | .dropdown-menu .divider { 143 | border: none !important; 144 | background-color: #bec3cb; 145 | } 146 | .dropdown-menu a { 147 | color: #3f3f3f; 148 | border: 1px solid transparent; 149 | margin: 1px 4px !important; 150 | padding-top: 2px !important; 151 | padding-bottom: 2px !important; 152 | } 153 | .dropdown-menu a:hover, .dropdown-menu a.highlight { 154 | color:#000; 155 | background-color:#FFF0D0 !important; 156 | border: 1px solid #E5C365; 157 | margin: 1px 4px !important; 158 | border-radius: 0px; 159 | } 160 | 161 | /* Code Editor */ 162 | .cm-s-visual-studio-2012.CodeMirror 163 | { 164 | border-left: 2px solid #FFF0D0; 165 | background-color: #fefefe; 166 | color:black; 167 | font-family: consolas !important; 168 | } 169 | 170 | .cm-s-visual-studio-2012.CodeMirror .CodeMirror-gutters 171 | { 172 | background-color: #fefefe; 173 | } 174 | 175 | .cm-s-visual-studio-2012.CodeMirror .CodeMirror-linenumber 176 | { 177 | color: #BAC1D6; 178 | background-color: #fefefe; 179 | font-family: consolas !important; 180 | } 181 | 182 | .cm-s-visual-studio-2012.CodeMirror .CodeMirror-matchingbracket 183 | { 184 | color: black; 185 | background-color: #dedede; 186 | } 187 | 188 | .cm-s-visual-studio-2012.CodeMirror .CodeMirror-linebackground 189 | { 190 | outline: 2px solid #dddddd; 191 | z-index: 3; 192 | } 193 | 194 | .cm-s-visual-studio-2012 .CodeMirror-activeline-background, 195 | .cm-s-visual-studio-2012 .CodeMirror-activeline .CodeMirror-gutter-elt 196 | { 197 | background: transparent !important; 198 | } 199 | 200 | .cm-s-visual-studio-2012 .CodeMirror-activeline-background 201 | { 202 | outline: 2px solid #dddddd; 203 | } 204 | 205 | .cm-s-visual-studio-2012 .CodeMirror-activeline .CodeMirror-gutter-elt 206 | { 207 | outline: 0px; 208 | } 209 | 210 | 211 | .cm-s-visual-studio-2012.CodeMirror .cm-matchhighlight 212 | { 213 | background-color: yellow; 214 | } 215 | 216 | .cm-s-visual-studio-2012.CodeMirror .CodeMirror-selectedtext 217 | { 218 | background-color: #ADD6FF; 219 | } 220 | 221 | .cm-s-visual-studio-2012.CodeMirror .CodeMirror-selected, 222 | .cm-s-visual-studio-2012.CodeMirror-focused .CodeMirror-selected 223 | { 224 | background: #dedede; 225 | } 226 | 227 | 228 | .cm-s-visual-studio-2012.CodeMirror .cm-atom, 229 | .cm-s-visual-studio-2012.CodeMirror .cm-qualifier, 230 | .cm-s-visual-studio-2012.CodeMirror .cm-def, 231 | .cm-s-visual-studio-2012.CodeMirror .cm-keyword { 232 | color: #0000FF; 233 | } 234 | 235 | /* css */ 236 | /* css selectors */ 237 | .doctype-css .cm-s-visual-studio-2012.CodeMirror .cm-qualifier /* .class */ { color: #800000; } 238 | .doctype-css .cm-s-visual-studio-2012.CodeMirror .cm-builtin /* #id */ { color: #ff0000; } 239 | .doctype-css .cm-s-visual-studio-2012.CodeMirror .cm-tag /* tag */ { color: #8063d4; } 240 | .doctype-css .cm-s-visual-studio-2012.CodeMirror .cm-variable-3 /* :pseudo */ { color: #af552b; } 241 | 242 | 243 | /* css values */ 244 | .doctype-css .cm-s-visual-studio-2012.CodeMirror .cm-number { color: #2B91AF; } 245 | .doctype-css .cm-s-visual-studio-2012.CodeMirror .cm-keyword /* !important */ { color: #FF0000; } 246 | .doctype-css .cm-s-visual-studio-2012.CodeMirror .cm-variable /* other value, like font name */ { color: #3399ff; } 247 | 248 | /*CodeMirror does not add notation for css... Which would be really nice. */ 249 | /*.cm-s-visual-studio-2012.CodeMirror .cm-property { color: red; }*/ 250 | 251 | .cm-s-visual-studio-2012.CodeMirror .cm-comment { color: green; } 252 | .cm-s-visual-studio-2012.CodeMirror .cm-string {color: #800000;} 253 | .cm-s-visual-studio-2012.CodeMirror .cm-string-2 {color: #800000;} 254 | .cm-s-visual-studio-2012.CodeMirror .cm-variable { color: black; } 255 | .cm-s-visual-studio-2012.CodeMirror .cm-variable-2 { color: #2B91AF; } 256 | .cm-s-visual-studio-2012.CodeMirror .cm-tag { color: #800000; } 257 | .cm-s-visual-studio-2012.CodeMirror .cm-attribute { color: red; } 258 | .cm-s-visual-studio-2012.CodeMirror .cm-property { color: black; } 259 | 260 | #status-overwrite { color:white; } 261 | -------------------------------------------------------------------------------- /theme/NightLion.css: -------------------------------------------------------------------------------- 1 | /* 2 | BearTheme is bare theme for styling Adobe Brackets (Code Mirror) editor. Some elements need be overwritien, if you find comment with "may need !important", give it a try. 3 | Good luck, have fun! 4 | */ 5 | 6 | /*Sidebar*/ 7 | 8 | #sidebar{} /*General sidebar style*/ 9 | #sidebar #working-set-header{} /*"Working files" header*/ 10 | #sidebar #open-files-container{} /*Working files style*/ 11 | #sidebar #open-files-container ul li.selected a{} /*Selected working file*/ 12 | #sidebar #open-files-container ul li.selected a span.extension{} /*Selected working file's extension*/ 13 | #sidebar #open-files-container ul li .file-status-icon{} /*Icon next to a file, dot, X etc.*/ 14 | 15 | 16 | /*Project file header*/ 17 | #sidebar #project-files-header{} /*Browser header, path select, search, X etc.*/ 18 | #sidebar #project-files-header #project-dropdown-toggle{} /*Path select toggle*/ 19 | #sidebar #project-files-header #project-dropdown-toggle #project-title{} /*Currently selected project title*/ 20 | #sidebar #project-files-header #project-dropdown-toggle .dropdown-arrow{} /*Select toggle arrow - SVG image*/ 21 | #sidebar #project-files-header #closeAllFolders{} /*Close all icon*/ 22 | #sidebar #project-files-header #search-files-button{} /*Search file icon*/ 23 | 24 | 25 | /*Project files container*/ 26 | #sidebar #project-files-container{} /*Project files - WITHOUT header*/ 27 | #sidebar #project-files-container .jstree-icon{} /*Icon next to files (left side), like close/open arrow for parent element*/ 28 | #sidebar #project-files-container li.jstree-closed{} /*Closed tree element*/ 29 | #sidebar #project-files-container li.jstree-open{} /*Open tree element*/ 30 | #sidebar #project-files-container ul li a{} /*Project container file*/ 31 | #sidebar #project-files-container ul li a.jstree-hovered{} /*Project container file hovered*/ 32 | #sidebar #project-files-container ul li a span.extension{} /*Project container file's extension*/ 33 | 34 | 35 | /*Main area*/ 36 | .CodeMirror{background-color: #1a1a1a; color: #777; }/*Main coding area, without line count.*/ 37 | .CodeMirror-lines{}/*Code lines, syntax coloring has higher priority then .CodeMirror-lines*/ 38 | 39 | .CodeMirror div.CodeMirror-cursor { border-left: 1px solid #b4b4b4; z-index: 3;} /*Cursor stling*/ 40 | .CodeMirror div.CodeMirror-secondarycursor {} /* Shown when moving in bi-directional text - from CM docs*/ 41 | 42 | /*Brackets is based on webkit, so you can use scrollbar styling. Example below contains 8px width, grey scrollbar for the main area. You can use it with other section, just remember about z-indexes or things like 'selected' with overlap your scrollbar.*/ 43 | .CodeMirror .CodeMirror-vscrollbar{ width: 8px; bottom:8px !important;} /*Scrollbar vertical. These values MUST be the same as height/width of scrollbars*/ 44 | .CodeMirror .CodeMirror-hscrollbar{ height:8px; right:8px !important;} /*Scrollbar horizontal. These values MUST be the same as height/width of scrollbars*/ 45 | 46 | .CodeMirror ::-webkit-scrollbar { width: 12px; height:12px;} /* The width of vertical scrollbars and height of horizontal scrollbars*/ 47 | .CodeMirror ::-webkit-scrollbar-track {background-color: #333 !important;} /* The track that scrollbars run in */ 48 | .CodeMirror ::-webkit-scrollbar-thumb {background-color: #a5a4a4 !important; border-radius: 4px} /* The scrollbar thumb */ 49 | 50 | .CodeMirror-scrollbar-filler {height:8px !important; width:8px !important; background:none;} /* Corner where scrollbars meet. Width and height MUST be the same as that of scrollbars. Background should be the same as that of the scrollbar track*/ 51 | .CodeMirror-gutter-filler{ height:8px !important;} /* Linenumber area left of horizontal scrollbar. Height MUST be the same as width/height of scrollbars */ 52 | 53 | .CodeMirror-activeline .CodeMirror-gutter-elt { color: #eeeeee; } 54 | 55 | .CodeMirror .CodeMirror-scroll .CodeMirror-gutters{background-color: #545454; color:#ffffff;}/*Left vertical bar with line count*/ 56 | .CodeMirror-gutter{color:#ffffff;} /*Left bar with line count - it will affect global line count, BUT line count in inline editor won't be changed.*/ 57 | .CodeMirror-linenumbers{color:#ffffff;} /*Line count bar only, without "gutter"*/ 58 | .CodeMirror-foldgutter{color:#ffffff;} /*It's exactly .CodeMirror-gutter{} without .CodeMirror-linenumbers{}.*/ 59 | 60 | 61 | /*Syntax elements & action*/ 62 | .CodeMirror .cm-atom{color: #40D5B9 ;} /*Atribbute value ex. #f00 in color:#f00;*/ 63 | .CodeMirror .cm-def{color: #F995E0 ;} /*variable definition*/ 64 | .CodeMirror .cm-number{ color: #76B8EB;} /*Numbers*/ 65 | .CodeMirror .cm-variable{ color: #e6e6e6;} /*Variable name ex. class Variable_name */ 66 | .CodeMirror .cm-variable-2{color: #76B8EB ;} /*Variable declaration ex. $variable */ 67 | .CodeMirror .cm-property{color: #e6e6e6;} /*Property ex. color in color:#f00;*/ 68 | .CodeMirror .cm-operator{color: #666666;} /*Operators ex. dots (:) between property and atom value */ 69 | .CodeMirror .cm-comment{color: #4F6B85;} /*Comment*/ 70 | .CodeMirror .cm-string{color: #40D5B9 ;} /*String elements ex. "description" in name="description" - including quotation*/ 71 | .CodeMirror .cm-meta{color: #9E9E9E;} /*Meta elements like ex.: */ 72 | .CodeMirror .cm-qualifier{color: #40D5B9;} /*Final qualifier like css class ex.: .cm-qualifier*/ 73 | .CodeMirror .cm-tag{color: #999 ;} /*Tags ex. ul or
        */ 74 | .CodeMirror .cm-attribute{color: #76B8EB ;} /*Attribute ex. rel, href, name*/ 75 | .CodeMirror .cm-keyword {color: #e6e6e6;} /*Element call ex. array, class, public function, if, elseif, !important*/ 76 | .CodeMirror .cm-matchingtag{color: #FFD37F;} 77 | 78 | .CodeMirror .CodeMirror-matchingtag{} /*Matching tags, open/close. Try !important for bg, color etc. if it doesn't work*/ 79 | div.CodeMirror span.CodeMirror-matchingbracket{} /*Matching brackets, open/close*/ 80 | 81 | .CodeMirror-selected{background-color: #2D3F4F; color: #000000 !important;} /*Selected lines - may need !important*/ 82 | .CodeMirror-activeline-background{;} /*Active line - may need !important*/ 83 | .CodeMirror-gutter-elt{} /*Active line, line count section*/ 84 | div.CodeMirror span.CodeMirror-searching{background-color: #ffffff !important;} /*Search result highlight- may need !important*/ 85 | 86 | 87 | /*Status bar - bottom*/ 88 | #status-bar{}/*Bottom status bar*/ 89 | #status-bar #status-info{}/*Line & column info*/ 90 | #status-bar #status-indicators{}/*Second part of the status bar*/ 91 | #status-bar #status-indicators{} #status-indent{} /*Indent status info*/ 92 | #status-bar #status-indicators{} #status-language{} /*Language info*/ 93 | #status-bar #status-indicators{} #fileSizeInfo{} /*File size*/ 94 | #status-bar #status-indicators{} #filePathInfo{} /*File path*/ 95 | 96 | /*Status bar - ex. debug area*/ 97 | #problems-panel{} /*Bottom error panel main wrapper*/ 98 | #problems-panel .toolbar{} /*Error panel toolbar with title and X*/ 99 | #problems-panel .toolbar .title{} /*Error panel toolbar title eg. "JSLint Errors"*/ 100 | #problems-panel .toolbar .close{} /*X to close error panel*/ 101 | #problems-panel .toolbar .table-container{} /*Table container with errors*/ 102 | #problems-panel .table .tbody{} /*Table with errors - additional classes for look: table-striped table-condensed row-highlight, fimilar for people working with Boostrap*/ 103 | #problems-panel .table .tbody tr{} /*Single row containing line number, "error" message and code info*/ 104 | #problems-panel .table .tbody tr td.line-number{} /*Line number for error row*/ 105 | /*There are no separated classes for error and code excerpt, the only hint I can give is: error is second child and excerpt is 3rd chaild of tr.*/ 106 | 107 | /*Right toolbar - live preview, extensions*/ 108 | #main-toolbar{} /*Whole toolbar*/ 109 | #main-toolbar .buttons{} /*Buttons group*/ 110 | 111 | 112 | /*Modal windows like context-menu, quick-view or hint container*/ 113 | #context-menu-bar .dropdown-menu{} /*Dropdown menu, available under right-click - may need !important*/ 114 | #context-menu-bar .dropdown-menu a{} /*Single option, treat it like
      • ex. background*/ 115 | #context-menu-bar .dropdown-menu a:hover{} /*Single option, treat it like
      • ex. background - hover state. RGBA is not working!*/ 116 | 117 | /*If you need different dropdown style for different sections, use IDs below.*/ 118 | #context-menu-bar #project-context-menu .dropdown-menu{} /*Dropdown menu for project files section*/ 119 | #context-menu-bar #editor-context-menu .dropdown-menu{} /*Dropdown menu for editor section*/ 120 | #context-menu-bar #inline-editor-context-menu .dropdown-menu{} /*Dropdown menu for inline editor like Quick Edit*/ 121 | /*--back to general--*/ 122 | 123 | #codehint-menu-bar .dropdown-menu{} /*Code hint menu, dropdown visible when writing code.*/ 124 | #codehint-menu-bar .dropdown-menu li a{} /*Code hint menu option, dropdown visible when writing code. Treat like
      • */ 125 | #codehint-menu-bar .dropdown-menu li a span.code-hint-item{} /*Single hint in dropdown menu, automaticlly puts already typed text into */ 126 | 127 | /*Inline editor(Ex. Quick Edit - Ctrl + E)*/ 128 | .inline-widget{} /*Inline widget wrap, won't affect line count bar*/ 129 | .inline-text-editor{} /*Whole editing area - without active rule*/ 130 | .inline-text-editor .CodeMirror-lines{}/*Code lines in inline editor, syntax coloring has higher priority then .CodeMirror-lines*/ 131 | .inline-editor-header{} /*Inline text editor header, includes info about inline editor file*/ 132 | .inline-editor-header a.filename{} /*Filename visible in inline editor - may need !important*/ 133 | .inline-editor-header a.filename span.line-number{} /*Line number next to filename - may need !important*/ 134 | .inline-editor-header button.btn{} /*Button responsible for "New rule"*/ 135 | 136 | /*Global rules apply to inline editor scroll, just use .inline-widget class to target only bar options of this area. Example below.*/ 137 | .inline-widget .CodeMirror-gutter{} /*Inline editor "gutter", won't affect line count in inline editor*/ 138 | .inline-widget .CodeMirror-linenumbers{} /*Inline editor line numbers bar - no "gutter"*/ 139 | 140 | .inline-widget .related-container{} /*Related container with similar rules*/ 141 | .inline-widget .related-container .selection {} /*Currently selected style rule*/ 142 | .inline-widget .related-container ul li.selected {} /*Currently selected style rule from related container - text*/ 143 | .inline-widget .related-container .related ul li{} /*List element with rule*/ 144 | .inline-widget .related-container .related ul li .related-file{} /*File information for rule*/ 145 | 146 | /*Inline widget - extended color picker*/ 147 | .inline-widget .color-editor{} /*Extended color editor area*/ 148 | 149 | .inline-widget .color-editor .sliders .color-selection-field{} /*Color selection square - big one*/ 150 | .inline-widget .color-editor .hue-slider{} /*Hue slider*/ 151 | .inline-widget .color-editor .opacity-slider{} /*Opacity slider*/ 152 | 153 | .inline-widget .color-editor input.color-value{} /*Input for color value*/ 154 | .inline-widget .color-editor ul.button-bar{} /*Buttons for RGBa, HEX, HSLA*/ 155 | .inline-widget .color-editor ul.button-bar li a{} /*Single buttons
      • */ 156 | .inline-widget .color-editor ul.button-bar li a.rgba{} /*RGBa button*/ 157 | .inline-widget .color-editor ul.button-bar li a.hex{} /*HEX button*/ 158 | .inline-widget .color-editor ul.button-bar li a.hsla{} /*HSLA button*/ 159 | 160 | .inline-widget .color-editor .large-swatches{} /*Big swatches with currently picked and original color*/ 161 | .inline-widget .color-editor .large-swatches .current-color{} /*Current color swatch*/ 162 | .inline-widget .color-editor .large-swatches .original-color{} /*Original color swatch*/ 163 | 164 | .inline-widget .color-editor ul.swatches{} /*Small swatches with color suggestions*/ 165 | .inline-widget .color-editor ul.swatches li .swatch-bg{} /*Swatch sample*/ 166 | .inline-widget .color-editor ul.swatches li span.value{} /*Swatch label with color value*/ 167 | -------------------------------------------------------------------------------- /lib/spromise.js: -------------------------------------------------------------------------------- 1 | /** 2 | * spromise Copyright (c) 2014 Miguel Castillo. 3 | * Licensed under MIT 4 | * 5 | * https://github.com/MiguelCastillo/spromise 6 | */ 7 | 8 | 9 | (function (root, factory) { 10 | if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') { 11 | // CommonJS support 12 | module.exports = factory(); 13 | } 14 | else if (typeof define === 'function' && define.amd) { 15 | // Do AMD support 16 | define(factory); 17 | } else { 18 | // Non AMD loading 19 | root.spromise = factory(); 20 | } 21 | }(this, function () { 22 | 23 | 24 | /** 25 | * almond 0.2.6 Copyright (c) 2011-2012, The Dojo Foundation All Rights Reserved. 26 | * Available via the MIT or new BSD license. 27 | * see: http://github.com/jrburke/almond for details 28 | */ 29 | //Going sloppy to avoid 'use strict' string cost, but strict practices should 30 | //be followed. 31 | /*jslint sloppy: true */ 32 | /*global setTimeout: false */ 33 | 34 | var requirejs, require, define; 35 | (function (undef) { 36 | var main, req, makeMap, handlers, 37 | defined = {}, 38 | waiting = {}, 39 | config = {}, 40 | defining = {}, 41 | hasOwn = Object.prototype.hasOwnProperty, 42 | aps = [].slice; 43 | 44 | function hasProp(obj, prop) { 45 | return hasOwn.call(obj, prop); 46 | } 47 | 48 | /** 49 | * Given a relative module name, like ./something, normalize it to 50 | * a real name that can be mapped to a path. 51 | * @param {String} name the relative name 52 | * @param {String} baseName a real name that the name arg is relative 53 | * to. 54 | * @returns {String} normalized name 55 | */ 56 | function normalize(name, baseName) { 57 | var nameParts, nameSegment, mapValue, foundMap, 58 | foundI, foundStarMap, starI, i, j, part, 59 | baseParts = baseName && baseName.split("/"), 60 | map = config.map, 61 | starMap = (map && map['*']) || {}; 62 | 63 | //Adjust any relative paths. 64 | if (name && name.charAt(0) === ".") { 65 | //If have a base name, try to normalize against it, 66 | //otherwise, assume it is a top-level require that will 67 | //be relative to baseUrl in the end. 68 | if (baseName) { 69 | //Convert baseName to array, and lop off the last part, 70 | //so that . matches that "directory" and not name of the baseName's 71 | //module. For instance, baseName of "one/two/three", maps to 72 | //"one/two/three.js", but we want the directory, "one/two" for 73 | //this normalization. 74 | baseParts = baseParts.slice(0, baseParts.length - 1); 75 | 76 | name = baseParts.concat(name.split("/")); 77 | 78 | //start trimDots 79 | for (i = 0; i < name.length; i += 1) { 80 | part = name[i]; 81 | if (part === ".") { 82 | name.splice(i, 1); 83 | i -= 1; 84 | } else if (part === "..") { 85 | if (i === 1 && (name[2] === '..' || name[0] === '..')) { 86 | //End of the line. Keep at least one non-dot 87 | //path segment at the front so it can be mapped 88 | //correctly to disk. Otherwise, there is likely 89 | //no path mapping for a path starting with '..'. 90 | //This can still fail, but catches the most reasonable 91 | //uses of .. 92 | break; 93 | } else if (i > 0) { 94 | name.splice(i - 1, 2); 95 | i -= 2; 96 | } 97 | } 98 | } 99 | //end trimDots 100 | 101 | name = name.join("/"); 102 | } else if (name.indexOf('./') === 0) { 103 | // No baseName, so this is ID is resolved relative 104 | // to baseUrl, pull off the leading dot. 105 | name = name.substring(2); 106 | } 107 | } 108 | 109 | //Apply map config if available. 110 | if ((baseParts || starMap) && map) { 111 | nameParts = name.split('/'); 112 | 113 | for (i = nameParts.length; i > 0; i -= 1) { 114 | nameSegment = nameParts.slice(0, i).join("/"); 115 | 116 | if (baseParts) { 117 | //Find the longest baseName segment match in the config. 118 | //So, do joins on the biggest to smallest lengths of baseParts. 119 | for (j = baseParts.length; j > 0; j -= 1) { 120 | mapValue = map[baseParts.slice(0, j).join('/')]; 121 | 122 | //baseName segment has config, find if it has one for 123 | //this name. 124 | if (mapValue) { 125 | mapValue = mapValue[nameSegment]; 126 | if (mapValue) { 127 | //Match, update name to the new value. 128 | foundMap = mapValue; 129 | foundI = i; 130 | break; 131 | } 132 | } 133 | } 134 | } 135 | 136 | if (foundMap) { 137 | break; 138 | } 139 | 140 | //Check for a star map match, but just hold on to it, 141 | //if there is a shorter segment match later in a matching 142 | //config, then favor over this star map. 143 | if (!foundStarMap && starMap && starMap[nameSegment]) { 144 | foundStarMap = starMap[nameSegment]; 145 | starI = i; 146 | } 147 | } 148 | 149 | if (!foundMap && foundStarMap) { 150 | foundMap = foundStarMap; 151 | foundI = starI; 152 | } 153 | 154 | if (foundMap) { 155 | nameParts.splice(0, foundI, foundMap); 156 | name = nameParts.join('/'); 157 | } 158 | } 159 | 160 | return name; 161 | } 162 | 163 | function makeRequire(relName, forceSync) { 164 | return function () { 165 | //A version of a require function that passes a moduleName 166 | //value for items that may need to 167 | //look up paths relative to the moduleName 168 | return req.apply(undef, aps.call(arguments, 0).concat([relName, forceSync])); 169 | }; 170 | } 171 | 172 | function makeNormalize(relName) { 173 | return function (name) { 174 | return normalize(name, relName); 175 | }; 176 | } 177 | 178 | function makeLoad(depName) { 179 | return function (value) { 180 | defined[depName] = value; 181 | }; 182 | } 183 | 184 | function callDep(name) { 185 | if (hasProp(waiting, name)) { 186 | var args = waiting[name]; 187 | delete waiting[name]; 188 | defining[name] = true; 189 | main.apply(undef, args); 190 | } 191 | 192 | if (!hasProp(defined, name) && !hasProp(defining, name)) { 193 | throw new Error('No ' + name); 194 | } 195 | return defined[name]; 196 | } 197 | 198 | //Turns a plugin!resource to [plugin, resource] 199 | //with the plugin being undefined if the name 200 | //did not have a plugin prefix. 201 | function splitPrefix(name) { 202 | var prefix, 203 | index = name ? name.indexOf('!') : -1; 204 | if (index > -1) { 205 | prefix = name.substring(0, index); 206 | name = name.substring(index + 1, name.length); 207 | } 208 | return [prefix, name]; 209 | } 210 | 211 | /** 212 | * Makes a name map, normalizing the name, and using a plugin 213 | * for normalization if necessary. Grabs a ref to plugin 214 | * too, as an optimization. 215 | */ 216 | makeMap = function (name, relName) { 217 | var plugin, 218 | parts = splitPrefix(name), 219 | prefix = parts[0]; 220 | 221 | name = parts[1]; 222 | 223 | if (prefix) { 224 | prefix = normalize(prefix, relName); 225 | plugin = callDep(prefix); 226 | } 227 | 228 | //Normalize according 229 | if (prefix) { 230 | if (plugin && plugin.normalize) { 231 | name = plugin.normalize(name, makeNormalize(relName)); 232 | } else { 233 | name = normalize(name, relName); 234 | } 235 | } else { 236 | name = normalize(name, relName); 237 | parts = splitPrefix(name); 238 | prefix = parts[0]; 239 | name = parts[1]; 240 | if (prefix) { 241 | plugin = callDep(prefix); 242 | } 243 | } 244 | 245 | //Using ridiculous property names for space reasons 246 | return { 247 | f: prefix ? prefix + '!' + name : name, //fullName 248 | n: name, 249 | pr: prefix, 250 | p: plugin 251 | }; 252 | }; 253 | 254 | function makeConfig(name) { 255 | return function () { 256 | return (config && config.config && config.config[name]) || {}; 257 | }; 258 | } 259 | 260 | handlers = { 261 | require: function (name) { 262 | return makeRequire(name); 263 | }, 264 | exports: function (name) { 265 | var e = defined[name]; 266 | if (typeof e !== 'undefined') { 267 | return e; 268 | } else { 269 | return (defined[name] = {}); 270 | } 271 | }, 272 | module: function (name) { 273 | return { 274 | id: name, 275 | uri: '', 276 | exports: defined[name], 277 | config: makeConfig(name) 278 | }; 279 | } 280 | }; 281 | 282 | main = function (name, deps, callback, relName) { 283 | var cjsModule, depName, ret, map, i, 284 | args = [], 285 | usingExports; 286 | 287 | //Use name if no relName 288 | relName = relName || name; 289 | 290 | //Call the callback to define the module, if necessary. 291 | if (typeof callback === 'function') { 292 | 293 | //Pull out the defined dependencies and pass the ordered 294 | //values to the callback. 295 | //Default to [require, exports, module] if no deps 296 | deps = !deps.length && callback.length ? ['require', 'exports', 'module'] : deps; 297 | for (i = 0; i < deps.length; i += 1) { 298 | map = makeMap(deps[i], relName); 299 | depName = map.f; 300 | 301 | //Fast path CommonJS standard dependencies. 302 | if (depName === "require") { 303 | args[i] = handlers.require(name); 304 | } else if (depName === "exports") { 305 | //CommonJS module spec 1.1 306 | args[i] = handlers.exports(name); 307 | usingExports = true; 308 | } else if (depName === "module") { 309 | //CommonJS module spec 1.1 310 | cjsModule = args[i] = handlers.module(name); 311 | } else if (hasProp(defined, depName) || 312 | hasProp(waiting, depName) || 313 | hasProp(defining, depName)) { 314 | args[i] = callDep(depName); 315 | } else if (map.p) { 316 | map.p.load(map.n, makeRequire(relName, true), makeLoad(depName), {}); 317 | args[i] = defined[depName]; 318 | } else { 319 | throw new Error(name + ' missing ' + depName); 320 | } 321 | } 322 | 323 | ret = callback.apply(defined[name], args); 324 | 325 | if (name) { 326 | //If setting exports via "module" is in play, 327 | //favor that over return value and exports. After that, 328 | //favor a non-undefined return value over exports use. 329 | if (cjsModule && cjsModule.exports !== undef && 330 | cjsModule.exports !== defined[name]) { 331 | defined[name] = cjsModule.exports; 332 | } else if (ret !== undef || !usingExports) { 333 | //Use the return value from the function. 334 | defined[name] = ret; 335 | } 336 | } 337 | } else if (name) { 338 | //May just be an object definition for the module. Only 339 | //worry about defining if have a module name. 340 | defined[name] = callback; 341 | } 342 | }; 343 | 344 | requirejs = require = req = function (deps, callback, relName, forceSync, alt) { 345 | if (typeof deps === "string") { 346 | if (handlers[deps]) { 347 | //callback in this case is really relName 348 | return handlers[deps](callback); 349 | } 350 | //Just return the module wanted. In this scenario, the 351 | //deps arg is the module name, and second arg (if passed) 352 | //is just the relName. 353 | //Normalize module name, if it contains . or .. 354 | return callDep(makeMap(deps, callback).f); 355 | } else if (!deps.splice) { 356 | //deps is a config object, not an array. 357 | config = deps; 358 | if (callback.splice) { 359 | //callback is an array, which means it is a dependency list. 360 | //Adjust args if there are dependencies 361 | deps = callback; 362 | callback = relName; 363 | relName = null; 364 | } else { 365 | deps = undef; 366 | } 367 | } 368 | 369 | //Support require(['a']) 370 | callback = callback || function () {}; 371 | 372 | //If relName is a function, it is an errback handler, 373 | //so remove it. 374 | if (typeof relName === 'function') { 375 | relName = forceSync; 376 | forceSync = alt; 377 | } 378 | 379 | //Simulate async callback; 380 | if (forceSync) { 381 | main(undef, deps, callback, relName); 382 | } else { 383 | //Using a non-zero value because of concern for what old browsers 384 | //do, and latest browsers "upgrade" to 4 if lower value is used: 385 | //http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#dom-windowtimers-settimeout: 386 | //If want a value immediately, use require('id') instead -- something 387 | //that works in almond on the global level, but not guaranteed and 388 | //unlikely to work in other AMD implementations. 389 | setTimeout(function () { 390 | main(undef, deps, callback, relName); 391 | }, 4); 392 | } 393 | 394 | return req; 395 | }; 396 | 397 | /** 398 | * Just drops the config on the floor, but returns req in case 399 | * the config return value is used. 400 | */ 401 | req.config = function (cfg) { 402 | config = cfg; 403 | if (config.deps) { 404 | req(config.deps, config.callback); 405 | } 406 | return req; 407 | }; 408 | 409 | /** 410 | * Expose module registry for debugging and tooling 411 | */ 412 | requirejs._defined = defined; 413 | 414 | define = function (name, deps, callback) { 415 | 416 | //This module may not have dependencies 417 | if (!deps.splice) { 418 | //deps is not an array, so probably means 419 | //an object literal or factory function for 420 | //the value. Adjust args. 421 | callback = deps; 422 | deps = []; 423 | } 424 | 425 | if (!hasProp(defined, name) && !hasProp(waiting, name)) { 426 | waiting[name] = [name, deps, callback]; 427 | } 428 | }; 429 | 430 | define.amd = { 431 | jQuery: true 432 | }; 433 | }()); 434 | 435 | define("lib/js/almond", function(){}); 436 | 437 | /** 438 | * spromise Copyright (c) 2014 Miguel Castillo. 439 | * Licensed under MIT 440 | */ 441 | 442 | 443 | define( 'src/async',[],function() { 444 | var _self = this; 445 | 446 | var nextTick; 447 | if ( _self.setImmediate ) { 448 | nextTick = _self.setImmediate; 449 | } 450 | else if ( _self.process && typeof _self.process.nextTick === "function" ) { 451 | nextTick = _self.process.nextTick; 452 | } 453 | else { 454 | nextTick = function(cb) { 455 | _self.setTimeout(cb, 0); 456 | }; 457 | } 458 | 459 | return nextTick; 460 | }); 461 | 462 | /** 463 | * spromise Copyright (c) 2014 Miguel Castillo. 464 | * Licensed under MIT 465 | */ 466 | 467 | 468 | define('src/promise',[ 469 | "src/async" 470 | ], function (Async) { 471 | 472 | 473 | var states = { 474 | "pending": 0, 475 | "always": 1, 476 | "resolved": 2, 477 | "rejected": 3, 478 | "notify": 4 479 | }; 480 | 481 | var strStates = [ 482 | "pending", 483 | "", 484 | "resolved", 485 | "rejected", 486 | "" 487 | ]; 488 | 489 | 490 | /** 491 | * Small Promise 492 | */ 493 | function Promise(resolver, options) { 494 | if ( this instanceof Promise === false ) { 495 | return new Promise(resolver, options); 496 | } 497 | 498 | var target = this; 499 | var stateManager = new StateManager(target, options || {}); 500 | 501 | /** 502 | * callback registration (then, done, fail, always) must be synchrounous so 503 | * that the callbacks can be registered in the order they come in. 504 | */ 505 | 506 | function then(onResolved, onRejected) { 507 | return stateManager.then(onResolved, onRejected); 508 | } 509 | 510 | // Setup a way to verify an spromise object 511 | then.constructor = Promise; 512 | then.stateManager = stateManager; 513 | 514 | function done(cb) { 515 | stateManager.enqueue(states.resolved, cb); 516 | return target.promise; 517 | } 518 | 519 | function fail(cb) { 520 | stateManager.enqueue(states.rejected, cb); 521 | return target.promise; 522 | } 523 | 524 | function always(cb) { 525 | stateManager.enqueue(states.always, cb); 526 | return target.promise; 527 | } 528 | 529 | function notify(cb) { 530 | stateManager.enqueue(states.notify, cb); 531 | return target.promise; 532 | } 533 | 534 | function state() { 535 | return strStates[stateManager.state]; 536 | } 537 | 538 | function resolve() { 539 | stateManager.transition(states.resolved, this, arguments); 540 | return target; 541 | } 542 | 543 | function reject() { 544 | stateManager.transition(states.rejected, this, arguments); 545 | return target; 546 | } 547 | 548 | target.always = always; 549 | target.done = done; 550 | target.fail = fail; 551 | target.notify = notify; 552 | target.resolve = resolve; 553 | target.reject = reject; 554 | target.then = then; 555 | target.state = state; 556 | target.promise = { 557 | always: always, 558 | done: done, 559 | fail: fail, 560 | notify: notify, 561 | then: then, 562 | state: state 563 | }; 564 | 565 | // Interface to allow to post pone calling the resolver as long as its not needed 566 | if ( typeof(resolver) === "function" ) { 567 | resolver.call(target, target.resolve, target.reject); 568 | } 569 | } 570 | 571 | /** 572 | * Interface to play nice with libraries like when and q. 573 | */ 574 | Promise.defer = function () { 575 | return new Promise(); 576 | }; 577 | 578 | /** 579 | * Interface to create a promise and link it to a thenable object. The assumption is that 580 | * the object passed in is a thenable. If it isn't, there is no check so an exption might 581 | * be going your way. 582 | */ 583 | Promise.thenable = function (thenable) { 584 | return new Promise(thenable.then); 585 | }; 586 | 587 | /** 588 | * Create a promise that's already rejected 589 | */ 590 | Promise.rejected = function () { 591 | return new Promise(null, { 592 | context: this, 593 | value: arguments, 594 | state: states.rejected 595 | }); 596 | }; 597 | 598 | /** 599 | * Create a promise that's already resolved 600 | */ 601 | Promise.resolved = function () { 602 | return new Promise(null, { 603 | context: this, 604 | value: arguments, 605 | state: states.resolved 606 | }); 607 | }; 608 | 609 | 610 | /** 611 | * StateManager is the state manager for a promise 612 | */ 613 | function StateManager(promise, options) { 614 | // Initial state is pending 615 | this.state = states.pending; 616 | 617 | // If a state is passed in, then we go ahead and initialize the state manager with it 618 | if (options.state) { 619 | this.transition(options.state, options.context, options.value); 620 | } 621 | } 622 | 623 | // Queue will figure out if the promise is pending/resolved/rejected and do the appropriate 624 | // action with the callback based on that. 625 | StateManager.prototype.enqueue = function (state, cb, sync) { 626 | var _self = this, 627 | _state = _self.state; 628 | 629 | if (!_state) { 630 | (this.queue || (this.queue = [])).push({ 631 | state: state, 632 | cb: cb 633 | }); 634 | } 635 | 636 | // If resolved, then lets try to execute the queue 637 | else if (_state === state || states.always === state) { 638 | if ( sync ) { 639 | cb.apply(_self.context, _self.value); 640 | } 641 | else { 642 | Async(function queuecb() { 643 | cb.apply(_self.context, _self.value); 644 | }); 645 | } 646 | } 647 | 648 | // Do proper notify events 649 | else if (states.notify === state) { 650 | if ( sync ) { 651 | cb.call(_self.context, _self.state, _self.value); 652 | } 653 | else { 654 | Async(function queuecb() { 655 | cb.call(_self.context, _self.state, _self.value); 656 | }); 657 | } 658 | } 659 | }; 660 | 661 | // Sets the state of the promise and call the callbacks as appropriate 662 | StateManager.prototype.transition = function (state, context, value, sync) { 663 | if (this.state) { 664 | return; 665 | } 666 | 667 | this.state = state; 668 | this.context = context; 669 | this.value = value; 670 | 671 | // Process queue if anything is waiting to be notified 672 | if (this.queue) { 673 | var queue = this.queue, 674 | length = queue.length, 675 | i = 0, 676 | item; 677 | 678 | this.queue = null; 679 | 680 | for ( ; i < length; i++ ) { 681 | item = queue[i]; 682 | this.enqueue(item.state, item.cb, sync); 683 | } 684 | } 685 | }; 686 | 687 | // Links together the resolution of promise1 to promise2 688 | StateManager.prototype.then = function (onResolved, onRejected) { 689 | var resolution; 690 | onResolved = typeof (onResolved) === "function" ? onResolved : null; 691 | onRejected = typeof (onRejected) === "function" ? onRejected : null; 692 | 693 | if ((!onResolved && this.state === states.resolved) || 694 | (!onRejected && this.state === states.rejected)) { 695 | return new Promise(null, this); 696 | } 697 | 698 | resolution = new Resolution(new Promise()); 699 | this.enqueue( states.notify, resolution.notify(onResolved, onRejected) ); 700 | return resolution.promise; 701 | }; 702 | 703 | 704 | /** 705 | * Thenable resolution 706 | */ 707 | function Resolution(promise) { 708 | this.promise = promise; 709 | } 710 | 711 | // Notify when a promise has change state. 712 | Resolution.prototype.notify = function(onResolved, onRejected) { 713 | var _self = this; 714 | return function notify(state, value) { 715 | var handler = (onResolved || onRejected) && (state === states.resolved ? (onResolved || onRejected) : (onRejected || onResolved)); 716 | try { 717 | _self.context = this; 718 | _self.finalize(state, handler ? [handler.apply(this, value)] : value); 719 | } 720 | catch(ex) { 721 | _self.promise.reject.call(_self.context, ex); 722 | } 723 | }; 724 | }; 725 | 726 | // Promise.chain DRYs onresolved and onrejected operations. Handler is onResolved or onRejected 727 | // This chain is partcularly used when dealing with external promises where we just just have to 728 | // resolve the result 729 | Resolution.prototype.chain = function (state) { 730 | var _self = this; 731 | return function resolve() { 732 | try { 733 | // Handler can only be called once! 734 | if ( !_self.resolved ) { 735 | _self.resolved = true; 736 | _self.context = this; 737 | _self.finalize(state, arguments); 738 | } 739 | } 740 | catch(ex) { 741 | _self.promise.reject.call(_self.context, ex); 742 | } 743 | }; 744 | }; 745 | 746 | // Routine to resolve a thenable. Data is in the form of an arguments object (array) 747 | Resolution.prototype.finalize = function (state, data) { 748 | var input = data[0], 749 | then = (input && input.then), 750 | promise = this.promise, 751 | context = this.context, 752 | resolution, thenableType; 753 | 754 | // 2.3.1 755 | if (input === this.promise) { 756 | throw new TypeError("Resolution input must not be the promise being resolved"); 757 | } 758 | 759 | // 2.3.2 760 | // Shortcut if the incoming promise is an instance of SPromise 761 | if (then && then.constructor === Promise) { 762 | return then.stateManager.enqueue(states.notify, this.notify(), true); 763 | } 764 | 765 | // 2.3.3 766 | // If thenable is function or object, then try to resolve using that. 767 | thenableType = then && (typeof (then) === "function" && typeof (input)); 768 | if (thenableType === "function" || thenableType === "object") { 769 | try { 770 | resolution = new Resolution(promise); 771 | then.call(input, resolution.chain(states.resolved), resolution.chain(states.rejected)); 772 | } 773 | catch (ex) { 774 | if (!resolution.resolved) { 775 | promise.reject.call(context, ex); 776 | } 777 | } 778 | } 779 | 780 | // 2.3.4 781 | // Just resolve the promise 782 | else { 783 | promise.then.stateManager.transition(state, context, data); 784 | } 785 | }; 786 | 787 | // Expose enums for the states 788 | Promise.states = states; 789 | return Promise; 790 | }); 791 | 792 | /** 793 | * spromise Copyright (c) 2014 Miguel Castillo. 794 | * Licensed under MIT 795 | */ 796 | 797 | 798 | define('src/when',[ 799 | "src/promise", 800 | "src/async" 801 | ], function(Promise, Async) { 802 | 803 | 804 | function _result(input, args, context) { 805 | if (typeof(input) === "function") { 806 | return input.apply(context, args||[]); 807 | } 808 | return input; 809 | } 810 | 811 | /** 812 | * Interface to allow multiple promises to be synchronized 813 | */ 814 | function When( ) { 815 | // The input is the queue of items that need to be resolved. 816 | var queue = Array.prototype.slice.call(arguments), 817 | promise = Promise.defer(), 818 | context = this, 819 | i, item, remaining, queueLength; 820 | 821 | if ( !queue.length ) { 822 | return promise.resolve(null); 823 | } 824 | 825 | // 826 | // Check everytime a new resolved promise occurs if we are done processing all 827 | // the dependent promises. If they are all done, then resolve the when promise 828 | // 829 | function checkPending() { 830 | if ( remaining ) { 831 | remaining--; 832 | } 833 | 834 | if ( !remaining ) { 835 | promise.resolve.apply(context, queue); 836 | } 837 | } 838 | 839 | // Wrap the resolution to keep track of the proper index in the closure 840 | function resolve( index ) { 841 | return function() { 842 | // We will replace the item in the queue with result to make 843 | // it easy to send all the data into the resolve interface. 844 | queue[index] = arguments.length === 1 ? arguments[0] : arguments; 845 | checkPending(); 846 | }; 847 | } 848 | 849 | function reject() { 850 | promise.reject.apply(this, arguments); 851 | } 852 | 853 | function processQueue() { 854 | queueLength = remaining = queue.length; 855 | for ( i = 0; i < queueLength; i++ ) { 856 | item = queue[i]; 857 | 858 | if ( item && typeof item.then === "function" ) { 859 | item.then(resolve(i), reject); 860 | } 861 | else { 862 | queue[i] = _result(item); 863 | checkPending(); 864 | } 865 | } 866 | } 867 | 868 | // Process the promises and callbacks 869 | Async(processQueue); 870 | return promise; 871 | } 872 | 873 | return When; 874 | }); 875 | 876 | 877 | /** 878 | * spromise Copyright (c) 2014 Miguel Castillo. 879 | * Licensed under MIT 880 | */ 881 | 882 | 883 | define('src/spromise',[ 884 | "src/promise", 885 | "src/async", 886 | "src/when" 887 | ], function(promise, async, when) { 888 | promise.when = when; 889 | promise.async = async; 890 | return promise; 891 | }); 892 | 893 | return require("src/spromise"); 894 | })); 895 | -------------------------------------------------------------------------------- /lib/tinycolor.js: -------------------------------------------------------------------------------- 1 | // TinyColor v1.0.0 2 | // https://github.com/bgrins/TinyColor 3 | // Brian Grinstead, MIT License 4 | 5 | (function() { 6 | 7 | var trimLeft = /^[\s,#]+/, 8 | trimRight = /\s+$/, 9 | tinyCounter = 0, 10 | math = Math, 11 | mathRound = math.round, 12 | mathMin = math.min, 13 | mathMax = math.max, 14 | mathRandom = math.random; 15 | 16 | var tinycolor = function tinycolor (color, opts) { 17 | 18 | color = (color) ? color : ''; 19 | opts = opts || { }; 20 | 21 | // If input is already a tinycolor, return itself 22 | if (color instanceof tinycolor) { 23 | return color; 24 | } 25 | // If we are called as a function, call using new instead 26 | if (!(this instanceof tinycolor)) { 27 | return new tinycolor(color, opts); 28 | } 29 | 30 | var rgb = inputToRGB(color); 31 | this._r = rgb.r, 32 | this._g = rgb.g, 33 | this._b = rgb.b, 34 | this._a = rgb.a, 35 | this._roundA = mathRound(100*this._a) / 100, 36 | this._format = opts.format || rgb.format; 37 | this._gradientType = opts.gradientType; 38 | 39 | // Don't let the range of [0,255] come back in [0,1]. 40 | // Potentially lose a little bit of precision here, but will fix issues where 41 | // .5 gets interpreted as half of the total, instead of half of 1 42 | // If it was supposed to be 128, this was already taken care of by `inputToRgb` 43 | if (this._r < 1) { this._r = mathRound(this._r); } 44 | if (this._g < 1) { this._g = mathRound(this._g); } 45 | if (this._b < 1) { this._b = mathRound(this._b); } 46 | 47 | this._ok = rgb.ok; 48 | this._tc_id = tinyCounter++; 49 | }; 50 | 51 | tinycolor.prototype = { 52 | isDark: function() { 53 | return this.getBrightness() < 128; 54 | }, 55 | isLight: function() { 56 | return !this.isDark(); 57 | }, 58 | isValid: function() { 59 | return this._ok; 60 | }, 61 | getFormat: function() { 62 | return this._format; 63 | }, 64 | getAlpha: function() { 65 | return this._a; 66 | }, 67 | getBrightness: function() { 68 | var rgb = this.toRgb(); 69 | return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000; 70 | }, 71 | setAlpha: function(value) { 72 | this._a = boundAlpha(value); 73 | this._roundA = mathRound(100*this._a) / 100; 74 | return this; 75 | }, 76 | toHsv: function() { 77 | var hsv = rgbToHsv(this._r, this._g, this._b); 78 | return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a }; 79 | }, 80 | toHsvString: function() { 81 | var hsv = rgbToHsv(this._r, this._g, this._b); 82 | var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100); 83 | return (this._a == 1) ? 84 | "hsv(" + h + ", " + s + "%, " + v + "%)" : 85 | "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")"; 86 | }, 87 | toHsl: function() { 88 | var hsl = rgbToHsl(this._r, this._g, this._b); 89 | return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a }; 90 | }, 91 | toHslString: function() { 92 | var hsl = rgbToHsl(this._r, this._g, this._b); 93 | var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100); 94 | return (this._a == 1) ? 95 | "hsl(" + h + ", " + s + "%, " + l + "%)" : 96 | "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")"; 97 | }, 98 | toHex: function(allow3Char) { 99 | return rgbToHex(this._r, this._g, this._b, allow3Char); 100 | }, 101 | toHexString: function(allow3Char) { 102 | return '#' + this.toHex(allow3Char); 103 | }, 104 | toHex8: function() { 105 | return rgbaToHex(this._r, this._g, this._b, this._a); 106 | }, 107 | toHex8String: function() { 108 | return '#' + this.toHex8(); 109 | }, 110 | toRgb: function() { 111 | return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a }; 112 | }, 113 | toRgbString: function() { 114 | return (this._a == 1) ? 115 | "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : 116 | "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")"; 117 | }, 118 | toPercentageRgb: function() { 119 | return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a }; 120 | }, 121 | toPercentageRgbString: function() { 122 | return (this._a == 1) ? 123 | "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" : 124 | "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")"; 125 | }, 126 | toName: function() { 127 | if (this._a === 0) { 128 | return "transparent"; 129 | } 130 | 131 | if (this._a < 1) { 132 | return false; 133 | } 134 | 135 | return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; 136 | }, 137 | toFilter: function(secondColor) { 138 | var hex8String = '#' + rgbaToHex(this._r, this._g, this._b, this._a); 139 | var secondHex8String = hex8String; 140 | var gradientType = this._gradientType ? "GradientType = 1, " : ""; 141 | 142 | if (secondColor) { 143 | var s = tinycolor(secondColor); 144 | secondHex8String = s.toHex8String(); 145 | } 146 | 147 | return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")"; 148 | }, 149 | toString: function(format) { 150 | var formatSet = !!format; 151 | format = format || this._format; 152 | 153 | var formattedString = false; 154 | var hasAlpha = this._a < 1 && this._a >= 0; 155 | var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "name"); 156 | 157 | if (needsAlphaFormat) { 158 | // Special case for "transparent", all other non-alpha formats 159 | // will return rgba when there is transparency. 160 | if (format === "name" && this._a === 0) { 161 | return this.toName(); 162 | } 163 | return this.toRgbString(); 164 | } 165 | if (format === "rgb") { 166 | formattedString = this.toRgbString(); 167 | } 168 | if (format === "prgb") { 169 | formattedString = this.toPercentageRgbString(); 170 | } 171 | if (format === "hex" || format === "hex6") { 172 | formattedString = this.toHexString(); 173 | } 174 | if (format === "hex3") { 175 | formattedString = this.toHexString(true); 176 | } 177 | if (format === "hex8") { 178 | formattedString = this.toHex8String(); 179 | } 180 | if (format === "name") { 181 | formattedString = this.toName(); 182 | } 183 | if (format === "hsl") { 184 | formattedString = this.toHslString(); 185 | } 186 | if (format === "hsv") { 187 | formattedString = this.toHsvString(); 188 | } 189 | 190 | return formattedString || this.toHexString(); 191 | }, 192 | 193 | _applyModification: function(fn, args) { 194 | var color = fn.apply(null, [this].concat([].slice.call(args))); 195 | this._r = color._r; 196 | this._g = color._g; 197 | this._b = color._b; 198 | this.setAlpha(color._a); 199 | return this; 200 | }, 201 | lighten: function() { 202 | return this._applyModification(lighten, arguments); 203 | }, 204 | brighten: function() { 205 | return this._applyModification(brighten, arguments); 206 | }, 207 | darken: function() { 208 | return this._applyModification(darken, arguments); 209 | }, 210 | desaturate: function() { 211 | return this._applyModification(desaturate, arguments); 212 | }, 213 | saturate: function() { 214 | return this._applyModification(saturate, arguments); 215 | }, 216 | greyscale: function() { 217 | return this._applyModification(greyscale, arguments); 218 | }, 219 | spin: function() { 220 | return this._applyModification(spin, arguments); 221 | }, 222 | 223 | _applyCombination: function(fn, args) { 224 | return fn.apply(null, [this].concat([].slice.call(args))); 225 | }, 226 | analogous: function() { 227 | return this._applyCombination(analogous, arguments); 228 | }, 229 | complement: function() { 230 | return this._applyCombination(complement, arguments); 231 | }, 232 | monochromatic: function() { 233 | return this._applyCombination(monochromatic, arguments); 234 | }, 235 | splitcomplement: function() { 236 | return this._applyCombination(splitcomplement, arguments); 237 | }, 238 | triad: function() { 239 | return this._applyCombination(triad, arguments); 240 | }, 241 | tetrad: function() { 242 | return this._applyCombination(tetrad, arguments); 243 | } 244 | }; 245 | 246 | // If input is an object, force 1 into "1.0" to handle ratios properly 247 | // String input requires "1.0" as input, so 1 will be treated as 1 248 | tinycolor.fromRatio = function(color, opts) { 249 | if (typeof color == "object") { 250 | var newColor = {}; 251 | for (var i in color) { 252 | if (color.hasOwnProperty(i)) { 253 | if (i === "a") { 254 | newColor[i] = color[i]; 255 | } 256 | else { 257 | newColor[i] = convertToPercentage(color[i]); 258 | } 259 | } 260 | } 261 | color = newColor; 262 | } 263 | 264 | return tinycolor(color, opts); 265 | }; 266 | 267 | // Given a string or object, convert that input to RGB 268 | // Possible string inputs: 269 | // 270 | // "red" 271 | // "#f00" or "f00" 272 | // "#ff0000" or "ff0000" 273 | // "#ff000000" or "ff000000" 274 | // "rgb 255 0 0" or "rgb (255, 0, 0)" 275 | // "rgb 1.0 0 0" or "rgb (1, 0, 0)" 276 | // "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1" 277 | // "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1" 278 | // "hsl(0, 100%, 50%)" or "hsl 0 100% 50%" 279 | // "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1" 280 | // "hsv(0, 100%, 100%)" or "hsv 0 100% 100%" 281 | // 282 | function inputToRGB(color) { 283 | 284 | var rgb = { r: 0, g: 0, b: 0 }; 285 | var a = 1; 286 | var ok = false; 287 | var format = false; 288 | 289 | if (typeof color == "string") { 290 | color = stringInputToObject(color); 291 | } 292 | 293 | if (typeof color == "object") { 294 | if (color.hasOwnProperty("r") && color.hasOwnProperty("g") && color.hasOwnProperty("b")) { 295 | rgb = rgbToRgb(color.r, color.g, color.b); 296 | ok = true; 297 | format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; 298 | } 299 | else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("v")) { 300 | color.s = convertToPercentage(color.s); 301 | color.v = convertToPercentage(color.v); 302 | rgb = hsvToRgb(color.h, color.s, color.v); 303 | ok = true; 304 | format = "hsv"; 305 | } 306 | else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("l")) { 307 | color.s = convertToPercentage(color.s); 308 | color.l = convertToPercentage(color.l); 309 | rgb = hslToRgb(color.h, color.s, color.l); 310 | ok = true; 311 | format = "hsl"; 312 | } 313 | 314 | if (color.hasOwnProperty("a")) { 315 | a = color.a; 316 | } 317 | } 318 | 319 | a = boundAlpha(a); 320 | 321 | return { 322 | ok: ok, 323 | format: color.format || format, 324 | r: mathMin(255, mathMax(rgb.r, 0)), 325 | g: mathMin(255, mathMax(rgb.g, 0)), 326 | b: mathMin(255, mathMax(rgb.b, 0)), 327 | a: a 328 | }; 329 | } 330 | 331 | 332 | // Conversion Functions 333 | // -------------------- 334 | 335 | // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from: 336 | // 337 | 338 | // `rgbToRgb` 339 | // Handle bounds / percentage checking to conform to CSS color spec 340 | // 341 | // *Assumes:* r, g, b in [0, 255] or [0, 1] 342 | // *Returns:* { r, g, b } in [0, 255] 343 | function rgbToRgb(r, g, b){ 344 | return { 345 | r: bound01(r, 255) * 255, 346 | g: bound01(g, 255) * 255, 347 | b: bound01(b, 255) * 255 348 | }; 349 | } 350 | 351 | // `rgbToHsl` 352 | // Converts an RGB color value to HSL. 353 | // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] 354 | // *Returns:* { h, s, l } in [0,1] 355 | function rgbToHsl(r, g, b) { 356 | 357 | r = bound01(r, 255); 358 | g = bound01(g, 255); 359 | b = bound01(b, 255); 360 | 361 | var max = mathMax(r, g, b), min = mathMin(r, g, b); 362 | var h, s, l = (max + min) / 2; 363 | 364 | if(max == min) { 365 | h = s = 0; // achromatic 366 | } 367 | else { 368 | var d = max - min; 369 | s = l > 0.5 ? d / (2 - max - min) : d / (max + min); 370 | switch(max) { 371 | case r: h = (g - b) / d + (g < b ? 6 : 0); break; 372 | case g: h = (b - r) / d + 2; break; 373 | case b: h = (r - g) / d + 4; break; 374 | } 375 | 376 | h /= 6; 377 | } 378 | 379 | return { h: h, s: s, l: l }; 380 | } 381 | 382 | // `hslToRgb` 383 | // Converts an HSL color value to RGB. 384 | // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100] 385 | // *Returns:* { r, g, b } in the set [0, 255] 386 | function hslToRgb(h, s, l) { 387 | var r, g, b; 388 | 389 | h = bound01(h, 360); 390 | s = bound01(s, 100); 391 | l = bound01(l, 100); 392 | 393 | function hue2rgb(p, q, t) { 394 | if(t < 0) t += 1; 395 | if(t > 1) t -= 1; 396 | if(t < 1/6) return p + (q - p) * 6 * t; 397 | if(t < 1/2) return q; 398 | if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; 399 | return p; 400 | } 401 | 402 | if(s === 0) { 403 | r = g = b = l; // achromatic 404 | } 405 | else { 406 | var q = l < 0.5 ? l * (1 + s) : l + s - l * s; 407 | var p = 2 * l - q; 408 | r = hue2rgb(p, q, h + 1/3); 409 | g = hue2rgb(p, q, h); 410 | b = hue2rgb(p, q, h - 1/3); 411 | } 412 | 413 | return { r: r * 255, g: g * 255, b: b * 255 }; 414 | } 415 | 416 | // `rgbToHsv` 417 | // Converts an RGB color value to HSV 418 | // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1] 419 | // *Returns:* { h, s, v } in [0,1] 420 | function rgbToHsv(r, g, b) { 421 | 422 | r = bound01(r, 255); 423 | g = bound01(g, 255); 424 | b = bound01(b, 255); 425 | 426 | var max = mathMax(r, g, b), min = mathMin(r, g, b); 427 | var h, s, v = max; 428 | 429 | var d = max - min; 430 | s = max === 0 ? 0 : d / max; 431 | 432 | if(max == min) { 433 | h = 0; // achromatic 434 | } 435 | else { 436 | switch(max) { 437 | case r: h = (g - b) / d + (g < b ? 6 : 0); break; 438 | case g: h = (b - r) / d + 2; break; 439 | case b: h = (r - g) / d + 4; break; 440 | } 441 | h /= 6; 442 | } 443 | return { h: h, s: s, v: v }; 444 | } 445 | 446 | // `hsvToRgb` 447 | // Converts an HSV color value to RGB. 448 | // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100] 449 | // *Returns:* { r, g, b } in the set [0, 255] 450 | function hsvToRgb(h, s, v) { 451 | 452 | h = bound01(h, 360) * 6; 453 | s = bound01(s, 100); 454 | v = bound01(v, 100); 455 | 456 | var i = math.floor(h), 457 | f = h - i, 458 | p = v * (1 - s), 459 | q = v * (1 - f * s), 460 | t = v * (1 - (1 - f) * s), 461 | mod = i % 6, 462 | r = [v, q, p, p, t, v][mod], 463 | g = [t, v, v, q, p, p][mod], 464 | b = [p, p, t, v, v, q][mod]; 465 | 466 | return { r: r * 255, g: g * 255, b: b * 255 }; 467 | } 468 | 469 | // `rgbToHex` 470 | // Converts an RGB color to hex 471 | // Assumes r, g, and b are contained in the set [0, 255] 472 | // Returns a 3 or 6 character hex 473 | function rgbToHex(r, g, b, allow3Char) { 474 | 475 | var hex = [ 476 | pad2(mathRound(r).toString(16)), 477 | pad2(mathRound(g).toString(16)), 478 | pad2(mathRound(b).toString(16)) 479 | ]; 480 | 481 | // Return a 3 character hex if possible 482 | if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) { 483 | return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); 484 | } 485 | 486 | return hex.join(""); 487 | } 488 | // `rgbaToHex` 489 | // Converts an RGBA color plus alpha transparency to hex 490 | // Assumes r, g, b and a are contained in the set [0, 255] 491 | // Returns an 8 character hex 492 | function rgbaToHex(r, g, b, a) { 493 | 494 | var hex = [ 495 | pad2(convertDecimalToHex(a)), 496 | pad2(mathRound(r).toString(16)), 497 | pad2(mathRound(g).toString(16)), 498 | pad2(mathRound(b).toString(16)) 499 | ]; 500 | 501 | return hex.join(""); 502 | } 503 | 504 | // `equals` 505 | // Can be called with any tinycolor input 506 | tinycolor.equals = function (color1, color2) { 507 | if (!color1 || !color2) { return false; } 508 | return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); 509 | }; 510 | tinycolor.random = function() { 511 | return tinycolor.fromRatio({ 512 | r: mathRandom(), 513 | g: mathRandom(), 514 | b: mathRandom() 515 | }); 516 | }; 517 | 518 | 519 | // Modification Functions 520 | // ---------------------- 521 | // Thanks to less.js for some of the basics here 522 | // 523 | 524 | function desaturate(color, amount) { 525 | amount = (amount === 0) ? 0 : (amount || 10); 526 | var hsl = tinycolor(color).toHsl(); 527 | hsl.s -= amount / 100; 528 | hsl.s = clamp01(hsl.s); 529 | return tinycolor(hsl); 530 | } 531 | 532 | function saturate(color, amount) { 533 | amount = (amount === 0) ? 0 : (amount || 10); 534 | var hsl = tinycolor(color).toHsl(); 535 | hsl.s += amount / 100; 536 | hsl.s = clamp01(hsl.s); 537 | return tinycolor(hsl); 538 | } 539 | 540 | function greyscale(color) { 541 | return tinycolor(color).desaturate(100); 542 | } 543 | 544 | function lighten (color, amount) { 545 | amount = (amount === 0) ? 0 : (amount || 10); 546 | var hsl = tinycolor(color).toHsl(); 547 | hsl.l += amount / 100; 548 | hsl.l = clamp01(hsl.l); 549 | return tinycolor(hsl); 550 | } 551 | 552 | function brighten(color, amount) { 553 | amount = (amount === 0) ? 0 : (amount || 10); 554 | var rgb = tinycolor(color).toRgb(); 555 | rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100)))); 556 | rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100)))); 557 | rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100)))); 558 | return tinycolor(rgb); 559 | } 560 | 561 | function darken (color, amount) { 562 | amount = (amount === 0) ? 0 : (amount || 10); 563 | var hsl = tinycolor(color).toHsl(); 564 | hsl.l -= amount / 100; 565 | hsl.l = clamp01(hsl.l); 566 | return tinycolor(hsl); 567 | } 568 | 569 | // Spin takes a positive or negative amount within [-360, 360] indicating the change of hue. 570 | // Values outside of this range will be wrapped into this range. 571 | function spin(color, amount) { 572 | var hsl = tinycolor(color).toHsl(); 573 | var hue = (mathRound(hsl.h) + amount) % 360; 574 | hsl.h = hue < 0 ? 360 + hue : hue; 575 | return tinycolor(hsl); 576 | } 577 | 578 | // Combination Functions 579 | // --------------------- 580 | // Thanks to jQuery xColor for some of the ideas behind these 581 | // 582 | 583 | function complement(color) { 584 | var hsl = tinycolor(color).toHsl(); 585 | hsl.h = (hsl.h + 180) % 360; 586 | return tinycolor(hsl); 587 | } 588 | 589 | function triad(color) { 590 | var hsl = tinycolor(color).toHsl(); 591 | var h = hsl.h; 592 | return [ 593 | tinycolor(color), 594 | tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), 595 | tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }) 596 | ]; 597 | } 598 | 599 | function tetrad(color) { 600 | var hsl = tinycolor(color).toHsl(); 601 | var h = hsl.h; 602 | return [ 603 | tinycolor(color), 604 | tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), 605 | tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), 606 | tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }) 607 | ]; 608 | } 609 | 610 | function splitcomplement(color) { 611 | var hsl = tinycolor(color).toHsl(); 612 | var h = hsl.h; 613 | return [ 614 | tinycolor(color), 615 | tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}), 616 | tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l}) 617 | ]; 618 | } 619 | 620 | function analogous(color, results, slices) { 621 | results = results || 6; 622 | slices = slices || 30; 623 | 624 | var hsl = tinycolor(color).toHsl(); 625 | var part = 360 / slices; 626 | var ret = [tinycolor(color)]; 627 | 628 | for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) { 629 | hsl.h = (hsl.h + part) % 360; 630 | ret.push(tinycolor(hsl)); 631 | } 632 | return ret; 633 | } 634 | 635 | function monochromatic(color, results) { 636 | results = results || 6; 637 | var hsv = tinycolor(color).toHsv(); 638 | var h = hsv.h, s = hsv.s, v = hsv.v; 639 | var ret = []; 640 | var modification = 1 / results; 641 | 642 | while (results--) { 643 | ret.push(tinycolor({ h: h, s: s, v: v})); 644 | v = (v + modification) % 1; 645 | } 646 | 647 | return ret; 648 | } 649 | 650 | // Utility Functions 651 | // --------------------- 652 | 653 | tinycolor.mix = function(color1, color2, amount) { 654 | amount = (amount === 0) ? 0 : (amount || 50); 655 | 656 | var rgb1 = tinycolor(color1).toRgb(); 657 | var rgb2 = tinycolor(color2).toRgb(); 658 | 659 | var p = amount / 100; 660 | var w = p * 2 - 1; 661 | var a = rgb2.a - rgb1.a; 662 | 663 | var w1; 664 | 665 | if (w * a == -1) { 666 | w1 = w; 667 | } else { 668 | w1 = (w + a) / (1 + w * a); 669 | } 670 | 671 | w1 = (w1 + 1) / 2; 672 | 673 | var w2 = 1 - w1; 674 | 675 | var rgba = { 676 | r: rgb2.r * w1 + rgb1.r * w2, 677 | g: rgb2.g * w1 + rgb1.g * w2, 678 | b: rgb2.b * w1 + rgb1.b * w2, 679 | a: rgb2.a * p + rgb1.a * (1 - p) 680 | }; 681 | 682 | return tinycolor(rgba); 683 | }; 684 | 685 | 686 | // Readability Functions 687 | // --------------------- 688 | // 689 | 690 | // `readability` 691 | // Analyze the 2 colors and returns an object with the following properties: 692 | // `brightness`: difference in brightness between the two colors 693 | // `color`: difference in color/hue between the two colors 694 | tinycolor.readability = function(color1, color2) { 695 | var c1 = tinycolor(color1); 696 | var c2 = tinycolor(color2); 697 | var rgb1 = c1.toRgb(); 698 | var rgb2 = c2.toRgb(); 699 | var brightnessA = c1.getBrightness(); 700 | var brightnessB = c2.getBrightness(); 701 | var colorDiff = ( 702 | Math.max(rgb1.r, rgb2.r) - Math.min(rgb1.r, rgb2.r) + 703 | Math.max(rgb1.g, rgb2.g) - Math.min(rgb1.g, rgb2.g) + 704 | Math.max(rgb1.b, rgb2.b) - Math.min(rgb1.b, rgb2.b) 705 | ); 706 | 707 | return { 708 | brightness: Math.abs(brightnessA - brightnessB), 709 | color: colorDiff 710 | }; 711 | }; 712 | 713 | // `readable` 714 | // http://www.w3.org/TR/AERT#color-contrast 715 | // Ensure that foreground and background color combinations provide sufficient contrast. 716 | // *Example* 717 | // tinycolor.isReadable("#000", "#111") => false 718 | tinycolor.isReadable = function(color1, color2) { 719 | var readability = tinycolor.readability(color1, color2); 720 | return readability.brightness > 125 && readability.color > 500; 721 | }; 722 | 723 | // `mostReadable` 724 | // Given a base color and a list of possible foreground or background 725 | // colors for that base, returns the most readable color. 726 | // *Example* 727 | // tinycolor.mostReadable("#123", ["#fff", "#000"]) => "#000" 728 | tinycolor.mostReadable = function(baseColor, colorList) { 729 | var bestColor = null; 730 | var bestScore = 0; 731 | var bestIsReadable = false; 732 | for (var i=0; i < colorList.length; i++) { 733 | 734 | // We normalize both around the "acceptable" breaking point, 735 | // but rank brightness constrast higher than hue. 736 | 737 | var readability = tinycolor.readability(baseColor, colorList[i]); 738 | var readable = readability.brightness > 125 && readability.color > 500; 739 | var score = 3 * (readability.brightness / 125) + (readability.color / 500); 740 | 741 | if ((readable && ! bestIsReadable) || 742 | (readable && bestIsReadable && score > bestScore) || 743 | ((! readable) && (! bestIsReadable) && score > bestScore)) { 744 | bestIsReadable = readable; 745 | bestScore = score; 746 | bestColor = tinycolor(colorList[i]); 747 | } 748 | } 749 | return bestColor; 750 | }; 751 | 752 | 753 | // Big List of Colors 754 | // ------------------ 755 | // 756 | var names = tinycolor.names = { 757 | aliceblue: "f0f8ff", 758 | antiquewhite: "faebd7", 759 | aqua: "0ff", 760 | aquamarine: "7fffd4", 761 | azure: "f0ffff", 762 | beige: "f5f5dc", 763 | bisque: "ffe4c4", 764 | black: "000", 765 | blanchedalmond: "ffebcd", 766 | blue: "00f", 767 | blueviolet: "8a2be2", 768 | brown: "a52a2a", 769 | burlywood: "deb887", 770 | burntsienna: "ea7e5d", 771 | cadetblue: "5f9ea0", 772 | chartreuse: "7fff00", 773 | chocolate: "d2691e", 774 | coral: "ff7f50", 775 | cornflowerblue: "6495ed", 776 | cornsilk: "fff8dc", 777 | crimson: "dc143c", 778 | cyan: "0ff", 779 | darkblue: "00008b", 780 | darkcyan: "008b8b", 781 | darkgoldenrod: "b8860b", 782 | darkgray: "a9a9a9", 783 | darkgreen: "006400", 784 | darkgrey: "a9a9a9", 785 | darkkhaki: "bdb76b", 786 | darkmagenta: "8b008b", 787 | darkolivegreen: "556b2f", 788 | darkorange: "ff8c00", 789 | darkorchid: "9932cc", 790 | darkred: "8b0000", 791 | darksalmon: "e9967a", 792 | darkseagreen: "8fbc8f", 793 | darkslateblue: "483d8b", 794 | darkslategray: "2f4f4f", 795 | darkslategrey: "2f4f4f", 796 | darkturquoise: "00ced1", 797 | darkviolet: "9400d3", 798 | deeppink: "ff1493", 799 | deepskyblue: "00bfff", 800 | dimgray: "696969", 801 | dimgrey: "696969", 802 | dodgerblue: "1e90ff", 803 | firebrick: "b22222", 804 | floralwhite: "fffaf0", 805 | forestgreen: "228b22", 806 | fuchsia: "f0f", 807 | gainsboro: "dcdcdc", 808 | ghostwhite: "f8f8ff", 809 | gold: "ffd700", 810 | goldenrod: "daa520", 811 | gray: "808080", 812 | green: "008000", 813 | greenyellow: "adff2f", 814 | grey: "808080", 815 | honeydew: "f0fff0", 816 | hotpink: "ff69b4", 817 | indianred: "cd5c5c", 818 | indigo: "4b0082", 819 | ivory: "fffff0", 820 | khaki: "f0e68c", 821 | lavender: "e6e6fa", 822 | lavenderblush: "fff0f5", 823 | lawngreen: "7cfc00", 824 | lemonchiffon: "fffacd", 825 | lightblue: "add8e6", 826 | lightcoral: "f08080", 827 | lightcyan: "e0ffff", 828 | lightgoldenrodyellow: "fafad2", 829 | lightgray: "d3d3d3", 830 | lightgreen: "90ee90", 831 | lightgrey: "d3d3d3", 832 | lightpink: "ffb6c1", 833 | lightsalmon: "ffa07a", 834 | lightseagreen: "20b2aa", 835 | lightskyblue: "87cefa", 836 | lightslategray: "789", 837 | lightslategrey: "789", 838 | lightsteelblue: "b0c4de", 839 | lightyellow: "ffffe0", 840 | lime: "0f0", 841 | limegreen: "32cd32", 842 | linen: "faf0e6", 843 | magenta: "f0f", 844 | maroon: "800000", 845 | mediumaquamarine: "66cdaa", 846 | mediumblue: "0000cd", 847 | mediumorchid: "ba55d3", 848 | mediumpurple: "9370db", 849 | mediumseagreen: "3cb371", 850 | mediumslateblue: "7b68ee", 851 | mediumspringgreen: "00fa9a", 852 | mediumturquoise: "48d1cc", 853 | mediumvioletred: "c71585", 854 | midnightblue: "191970", 855 | mintcream: "f5fffa", 856 | mistyrose: "ffe4e1", 857 | moccasin: "ffe4b5", 858 | navajowhite: "ffdead", 859 | navy: "000080", 860 | oldlace: "fdf5e6", 861 | olive: "808000", 862 | olivedrab: "6b8e23", 863 | orange: "ffa500", 864 | orangered: "ff4500", 865 | orchid: "da70d6", 866 | palegoldenrod: "eee8aa", 867 | palegreen: "98fb98", 868 | paleturquoise: "afeeee", 869 | palevioletred: "db7093", 870 | papayawhip: "ffefd5", 871 | peachpuff: "ffdab9", 872 | peru: "cd853f", 873 | pink: "ffc0cb", 874 | plum: "dda0dd", 875 | powderblue: "b0e0e6", 876 | purple: "800080", 877 | red: "f00", 878 | rosybrown: "bc8f8f", 879 | royalblue: "4169e1", 880 | saddlebrown: "8b4513", 881 | salmon: "fa8072", 882 | sandybrown: "f4a460", 883 | seagreen: "2e8b57", 884 | seashell: "fff5ee", 885 | sienna: "a0522d", 886 | silver: "c0c0c0", 887 | skyblue: "87ceeb", 888 | slateblue: "6a5acd", 889 | slategray: "708090", 890 | slategrey: "708090", 891 | snow: "fffafa", 892 | springgreen: "00ff7f", 893 | steelblue: "4682b4", 894 | tan: "d2b48c", 895 | teal: "008080", 896 | thistle: "d8bfd8", 897 | tomato: "ff6347", 898 | turquoise: "40e0d0", 899 | violet: "ee82ee", 900 | wheat: "f5deb3", 901 | white: "fff", 902 | whitesmoke: "f5f5f5", 903 | yellow: "ff0", 904 | yellowgreen: "9acd32" 905 | }; 906 | 907 | // Make it easy to access colors via `hexNames[hex]` 908 | var hexNames = tinycolor.hexNames = flip(names); 909 | 910 | 911 | // Utilities 912 | // --------- 913 | 914 | // `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }` 915 | function flip(o) { 916 | var flipped = { }; 917 | for (var i in o) { 918 | if (o.hasOwnProperty(i)) { 919 | flipped[o[i]] = i; 920 | } 921 | } 922 | return flipped; 923 | } 924 | 925 | // Return a valid alpha value [0,1] with all invalid values being set to 1 926 | function boundAlpha(a) { 927 | a = parseFloat(a); 928 | 929 | if (isNaN(a) || a < 0 || a > 1) { 930 | a = 1; 931 | } 932 | 933 | return a; 934 | } 935 | 936 | // Take input from [0, n] and return it as [0, 1] 937 | function bound01(n, max) { 938 | if (isOnePointZero(n)) { n = "100%"; } 939 | 940 | var processPercent = isPercentage(n); 941 | n = mathMin(max, mathMax(0, parseFloat(n))); 942 | 943 | // Automatically convert percentage into number 944 | if (processPercent) { 945 | n = parseInt(n * max, 10) / 100; 946 | } 947 | 948 | // Handle floating point rounding errors 949 | if ((math.abs(n - max) < 0.000001)) { 950 | return 1; 951 | } 952 | 953 | // Convert into [0, 1] range if it isn't already 954 | return (n % max) / parseFloat(max); 955 | } 956 | 957 | // Force a number between 0 and 1 958 | function clamp01(val) { 959 | return mathMin(1, mathMax(0, val)); 960 | } 961 | 962 | // Parse a base-16 hex value into a base-10 integer 963 | function parseIntFromHex(val) { 964 | return parseInt(val, 16); 965 | } 966 | 967 | // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 968 | // 969 | function isOnePointZero(n) { 970 | return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1; 971 | } 972 | 973 | // Check to see if string passed in is a percentage 974 | function isPercentage(n) { 975 | return typeof n === "string" && n.indexOf('%') != -1; 976 | } 977 | 978 | // Force a hex value to have 2 characters 979 | function pad2(c) { 980 | return c.length == 1 ? '0' + c : '' + c; 981 | } 982 | 983 | // Replace a decimal with it's percentage value 984 | function convertToPercentage(n) { 985 | if (n <= 1) { 986 | n = (n * 100) + "%"; 987 | } 988 | 989 | return n; 990 | } 991 | 992 | // Converts a decimal to a hex value 993 | function convertDecimalToHex(d) { 994 | return Math.round(parseFloat(d) * 255).toString(16); 995 | } 996 | // Converts a hex value to a decimal 997 | function convertHexToDecimal(h) { 998 | return (parseIntFromHex(h) / 255); 999 | } 1000 | 1001 | var matchers = (function() { 1002 | 1003 | // 1004 | var CSS_INTEGER = "[-\\+]?\\d+%?"; 1005 | 1006 | // 1007 | var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; 1008 | 1009 | // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. 1010 | var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; 1011 | 1012 | // Actual matching. 1013 | // Parentheses and commas are optional, but not required. 1014 | // Whitespace can take the place of commas or opening paren 1015 | var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; 1016 | var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; 1017 | 1018 | return { 1019 | rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), 1020 | rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), 1021 | hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), 1022 | hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), 1023 | hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), 1024 | hex3: /^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, 1025 | hex6: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, 1026 | hex8: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ 1027 | }; 1028 | })(); 1029 | 1030 | // `stringInputToObject` 1031 | // Permissive string parsing. Take in a number of formats, and output an object 1032 | // based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}` 1033 | function stringInputToObject(color) { 1034 | 1035 | color = color.replace(trimLeft,'').replace(trimRight, '').toLowerCase(); 1036 | var named = false; 1037 | if (names[color]) { 1038 | color = names[color]; 1039 | named = true; 1040 | } 1041 | else if (color == 'transparent') { 1042 | return { r: 0, g: 0, b: 0, a: 0, format: "name" }; 1043 | } 1044 | 1045 | // Try to match string input using regular expressions. 1046 | // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] 1047 | // Just return an object and let the conversion functions handle that. 1048 | // This way the result will be the same whether the tinycolor is initialized with string or object. 1049 | var match; 1050 | if ((match = matchers.rgb.exec(color))) { 1051 | return { r: match[1], g: match[2], b: match[3] }; 1052 | } 1053 | if ((match = matchers.rgba.exec(color))) { 1054 | return { r: match[1], g: match[2], b: match[3], a: match[4] }; 1055 | } 1056 | if ((match = matchers.hsl.exec(color))) { 1057 | return { h: match[1], s: match[2], l: match[3] }; 1058 | } 1059 | if ((match = matchers.hsla.exec(color))) { 1060 | return { h: match[1], s: match[2], l: match[3], a: match[4] }; 1061 | } 1062 | if ((match = matchers.hsv.exec(color))) { 1063 | return { h: match[1], s: match[2], v: match[3] }; 1064 | } 1065 | if ((match = matchers.hex8.exec(color))) { 1066 | return { 1067 | a: convertHexToDecimal(match[1]), 1068 | r: parseIntFromHex(match[2]), 1069 | g: parseIntFromHex(match[3]), 1070 | b: parseIntFromHex(match[4]), 1071 | format: named ? "name" : "hex8" 1072 | }; 1073 | } 1074 | if ((match = matchers.hex6.exec(color))) { 1075 | return { 1076 | r: parseIntFromHex(match[1]), 1077 | g: parseIntFromHex(match[2]), 1078 | b: parseIntFromHex(match[3]), 1079 | format: named ? "name" : "hex" 1080 | }; 1081 | } 1082 | if ((match = matchers.hex3.exec(color))) { 1083 | return { 1084 | r: parseIntFromHex(match[1] + '' + match[1]), 1085 | g: parseIntFromHex(match[2] + '' + match[2]), 1086 | b: parseIntFromHex(match[3] + '' + match[3]), 1087 | format: named ? "name" : "hex" 1088 | }; 1089 | } 1090 | 1091 | return false; 1092 | } 1093 | 1094 | // Node: Export function 1095 | if (typeof module !== "undefined" && module.exports) { 1096 | module.exports = tinycolor; 1097 | } 1098 | // AMD/requirejs: Define the module 1099 | else if (typeof define === 'function' && define.amd) { 1100 | define(function () {return tinycolor;}); 1101 | } 1102 | // Browser: Expose to window 1103 | else { 1104 | window.tinycolor = tinycolor; 1105 | } 1106 | 1107 | })(); --------------------------------------------------------------------------------