Themes in Brackets core

src/brackets.js

@@ -102,6 +102,7 @@ define(function (require, exports, module) {
         NativeApp               = require("utils/NativeApp"),
         DeprecationWarning      = require("utils/DeprecationWarning"),
         ViewCommandHandlers     = require("view/ViewCommandHandlers"),
+        ThemeManager            = require("themes/ThemeManager"),
         _                       = require("thirdparty/lodash");
 
     // DEPRECATED: In future we want to remove the global CodeMirror, but for now we

src/command/Commands.js

@@ -109,6 +109,7 @@ define(function (require, exports, module) {
     exports.SORT_WORKINGSET_BY_NAME     = "view.sortWorkingSetByName";  // WorkingSetSort.js            _handleSortWorkingSetByName()
     exports.SORT_WORKINGSET_BY_TYPE     = "view.sortWorkingSetByType";  // WorkingSetSort.js            _handleSortWorkingSetByType()
     exports.SORT_WORKINGSET_AUTO        = "view.sortWorkingSetAuto";    // WorkingSetSort.js            _handleAutomaticSort()
+    exports.THEMES                      = "view.themes";                // themes
 
     // NAVIGATE
     exports.NAVIGATE_NEXT_DOC           = "navigate.nextDoc";           // DocumentCommandHandlers.js   handleGoNextDoc()

src/command/DefaultMenus.js

@@ -111,6 +111,8 @@ define(function (require, exports, module) {
          * View menu
          */
         menu = Menus.addMenu(Strings.VIEW_MENU, Menus.AppMenuBar.VIEW_MENU);
+        menu.addMenuItem(Commands.THEMES);
+        menu.addMenuDivider();
         menu.addMenuItem(Commands.VIEW_HIDE_SIDEBAR);
         menu.addMenuDivider();
         menu.addMenuItem(Commands.VIEW_INCREASE_FONT_SIZE);

src/themes/CodeMirrorAddons.js

@@ -0,0 +1,37 @@
+/**
+ * Brackets Themes Copyright (c) 2014 Miguel Castillo.
+ *
+ * Licensed under MIT
+ */
+
+
+define(function () {
+    "use strict";
+
+    var CodeMirror = require("thirdparty/CodeMirror2/lib/codemirror");
+
+    function initAddons() {
+        // Set some default value for codemirror...
+        CodeMirror.defaults.highlightSelectionMatches = true;
+        CodeMirror.defaults.styleSelectedText = true;
+    }
+
+    function init() {
+        var deferred = $.Deferred();
+
+        /**
+        *  This is where is all starts to load up...
+        */
+        require([
+            "thirdparty/CodeMirror2/addon/selection/mark-selection",
+            "thirdparty/CodeMirror2/addon/search/match-highlighter"
+        ], deferred.resolve);
+
+        return deferred.done(initAddons).promise();
+    }
+
+    return {
+        ready: init()
+    };
+});
+

src/themes/DefaultSettings.js

@@ -0,0 +1,24 @@
+/**
+ * Brackets Themes Copyright (c) 2014 Miguel Castillo.
+ *
+ * Licensed under MIT
+ */
+
+
+define(function(require) {
+    var FileUtils = require("file/FileUtils");
+    var cm_path = FileUtils.getNativeBracketsDirectoryPath() + "/thirdparty/CodeMirror2";
+
+    return {
+        "fontSize": 12,
+        "lineHeight": '1.3em',
+        "fontType": "'SourceCodePro-Medium', ＭＳ ゴシック, 'MS Gothic', monospace",
+        "customScrollbars": true,
+        "theme": ["default"],
+        "paths": [
+            {path:require.toUrl("./") + "../../themes"},
+            {path:require.toUrl("./theme/")},
+            {path:cm_path + "/theme"}
+        ]
+    };
+});

src/themes/FontCommandsManager.js

@@ -0,0 +1,42 @@
+/**
+ * Brackets Themes Copyright (c) 2014 Miguel Castillo.
+ * @author Brad Gearon
+ *
+ * Licensed under MIT
+ */
+
+
+define(function (require) {
+    "use strict";
+
+    var Settings            = require("themes/Settings"),
+    	DefaultSettings     = require("themes/DefaultSettings"),
+        ViewCommandHandlers = require("view/ViewCommandHandlers"),
+        PreferencesManager  = require("preferences/PreferencesManager");
+
+    function ViewCommandsManager () {
+        $(ViewCommandHandlers).on("fontSizeChange", updateThemeFontSize);
+        $(Settings).on("change:fontSize", updateBracketsFontSize);
+        updateBracketsFontSize();
+    }
+
+    function updateThemeFontSize (evt, adjustment, fontSize /*, lineHeight*/) {
+        Settings.setValue("fontSize", fontSize);
+    }
+
+    function updateBracketsFontSize() {
+        var fontSize = Settings.getValue("fontSize"),
+            fontSizeNumeric = Number(fontSize.replace(/px|em/, "")),
+            fontSizeOffset = fontSizeNumeric - DefaultSettings.fontSize;
+
+        if(!isNaN(fontSizeOffset)) {
+            PreferencesManager.setViewState("fontSizeAdjustment", fontSizeOffset);
+            PreferencesManager.setViewState("fontSizeStyle", fontSize);
+        }
+    }
+
+    // Let's make sure we use Themes fonts by default
+    return {
+    	init: ViewCommandsManager
+    };
+});

src/themes/FontSettings.js

@@ -0,0 +1,62 @@
+/**
+ * Brackets Themes Copyright (c) 2014 Miguel Castillo.
+ *
+ * Licensed under MIT
+ */
+
+
+define(function () {
+    "use strict";
+
+    var $lineHeight = $("<style type='text/css' id='lineHeight'>").appendTo("head"),
+        $fontSize = $("<style type='text/css' id='fontSize'>").appendTo("head"),
+        $fontType = $("<style type='text/css' id='fontType'>").appendTo("head");
+
+    var Settings = null;
+
+
+    function FontSettings(_settings) {
+        Settings = _settings;
+        $(Settings).on("change:lineHeight", FontSettings.updateLineHeight);
+        $(Settings).on("change:fontSize", FontSettings.updateFontSize);
+        $(Settings).on("change:fontType", FontSettings.updateFontType);
+        FontSettings.update();
+    }
+
+
+    FontSettings.updateLineHeight = function () {
+        clearFonts();
+        var value = Settings.getValue("lineHeight");
+        $lineHeight.text(".CodeMirror{" + "line-height: " + value + "; }");
+    };
+
+
+    FontSettings.updateFontSize = function () {
+        clearFonts();
+        var value = Settings.getValue("fontSize");
+        $fontSize.text(".CodeMirror{" + "font-size: " + value + " !important; }");
+    };
+
+
+    FontSettings.updateFontType = function () {
+        clearFonts();
+        var value = Settings.getValue("fontType");
+        $fontType.text(".CodeMirror{" + "font-family: " + value + " !important; }");
+    };
+
+
+    FontSettings.update = function () {
+        clearFonts();
+        FontSettings.updateLineHeight();
+        FontSettings.updateFontSize();
+        FontSettings.updateFontType();
+    };
+
+
+    function clearFonts() {
+        // Remove this tag that is intefering with font settings set in this module
+        $("#codemirror-dynamic-fonts").remove();
+    }
+
+    return FontSettings;
+});

src/themes/Init.js

@@ -0,0 +1,29 @@
+/**
+ * Brackets Themes Copyright (c) 2014 Miguel Castillo.
+ *
+ * Licensed under MIT
+ */
+
+
+define(function (require, exports, module) {
+    "use strict";
+
+    require("themes/String");
+    require("themes/MenuCommands");
+
+    var ExtensionUtils   = require("utils/ExtensionUtils"),
+        ThemeManager     = require("themes/ThemeManager"),
+        CodeMirrorAddons = require("themes/CodeMirrorAddons");
+
+    // Load up reset.css to override brackground settings from brackets because
+    // they make the themes look really bad.
+    ExtensionUtils.loadStyleSheet(module, "reset.css");
+    ExtensionUtils.loadStyleSheet(module, "views/settings.css");
+
+	function init() {
+		CodeMirrorAddons.ready(ThemeManager);
+	}
+
+	exports.init = init;
+});
+

src/themes/LICENSE

@@ -0,0 +1,21 @@
+ Copyright (c) 2014 Miguel Castillo.
+
+ Licensed under MIT
+
+ Permission is hereby granted, free of charge, to any person obtaining a
+ copy of this software and associated documentation files (the "Software"),
+ to deal in the Software without restriction, including without limitation
+ the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ and/or sell copies of the Software, and to permit persons to whom the
+ Software is furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in
+ all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ DEALINGS IN THE SOFTWARE.

src/themes/MenuCommands.js

@@ -0,0 +1,15 @@
+/**
+ * Brackets Themes Copyright (c) 2014 Miguel Castillo.
+ *
+ * Licensed under MIT
+ */
+
+
+define(function(require) {
+    "use strict";
+    var Commands       = require("command/Commands"),
+        CommandManager = require("command/CommandManager"),
+        Settings       = require("themes/Settings");
+
+    CommandManager.register("Themes", Commands.THEMES, Settings.open);
+});

src/themes/README.md

@@ -0,0 +1,87 @@
+Brackets-Themes
+===============
+
+Set CodeMirror and Custom themes in Brackets.
+
+
+Features
+===============
+
+* Automatic loading of CodeMirror's themes shipped with Brackets.
+* Enjoy a variety of <i>custom</i> themes created by other users like yourself! For <i>custom</i> themes 101 primer, please read below.
+* Configure font size and font type.
+* Disable scrollbars defined in themes.  Good if you just want to use the default scrollbars.
+* Support for LESS files!
+* Auto reload themes upon saving changes made to theme files.
+* 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.
+
+
+Screenshot
+===============
+<b>Visual Studio theme</b>
+![Visual Studio theme](https://raw.github.com/wiki/MiguelCastillo/Brackets-Themes/images/VisualStudio.png)
+
+<b>Monokai Dark Soda custom theme by @simpleshadow.</b>
+![Monokai Dark Soda theme](https://raw.github.com/wiki/MiguelCastillo/Brackets-Themes/images/MonokaiDarkSoda.png)
+
+Custom themes 101 guide
+===============
+
+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".
+<br><br>
+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".
+<br><br>
+To get you started, you could use the already existing custom theme "default.css".  Let's do the following.
+<br>
+- 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.
+- Copy and paste the file "default.css" and rename it to "my-theme.css".
+- 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".
+- In "my-theme.css", change "background-color: #F8F8F8;" to "backgound-color: red;".
+- Relaunch brackets, open a JavaScript file and you should see the document with a red background.
+<br><br>
+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.
+<br><br>
+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.
+
+
+FAQ
+===============
+
+* Why disabling/enabling the scrollbars don't always take effect?
+  - 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.
+
+
+How to
+===============
+
+* Install... Open Brackets then copy and paste https://github.com/MiguelCastillo/Brackets-Themes into File->Install Extension.  You don't need to restart Brackets.
+* Set a theme?  Find the Themes menu and make a selection.
+![Themes Menu](https://raw.github.com/wiki/MiguelCastillo/Brackets-Themes/images/SetTheme.png)
+
+Credit
+==============
+Corey Gwin: Monokai Dark Soda<br>
+Kulcsár Kázmér: Zamiere<br>
+Diego Alvarez: Aquaman<br>
+Felipe K. de Mello: Dracula<br>
+Fernando Hurtado: Nando<br>
+Jordan Hess: Pixie<br>
+John Hamm: Hammsidian<br>
+Christopher Kelly (scriptmunkee) for additions to reset.cs<br>
+
+
+Links
+===============
+Brackets? Right here... http://brackets.io/ <br>
+Brackets github? Right here... https://github.com/adobe/brackets
+
+
+Contact me
+===============
+
+If you have any issues or want to just drop in a line, you can use my personal email at manchagnu@gmail.com
+
+License
+===============
+
+Licensed under MIT