Merge pull request #8505 from MiguelCastillo/themes-scrollbars

Themes scrollbars

Author: dangoor

src/extensions/default/ThorDarkTheme/main.less

@@ -167,10 +167,6 @@
     border-bottom: 9px solid transparent;
 }
 
-.inline-widget {
-    color: #333;
-}
-
 .inline-widget .CodeMirror, .inline-widget .CodeMirror-gutters {
     background: transparent;
 }

src/styles/brackets_theme_default.less

@@ -165,5 +165,14 @@
 
 }
 
+/* Dark theme styling
+ * 
+ * These are overrides to make the UI look better when the editor theme is dark.
+ * Eventually, these will likely be replaced by full-featured UI themes.
+ */
+.dark .inline-widget {
+    color: #333;
+}
+
 /* Variables and Mixins for non-code UI elements that can be styled */
 

src/view/ThemeManager.js

@@ -21,7 +21,7 @@
  *
  */
 
-/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
+/*jslint vars: true, plusplus: true, devel: true, regexp: true, nomen: true, indent: 4, maxerr: 50 */
 /*global $, define, require, less */
 
 define(function (require, exports, module) {
@@ -43,7 +43,7 @@ define(function (require, exports, module) {
         styleNode       = $(ExtensionUtils.addEmbeddedStyleSheet("")),
         defaultTheme    = "thor-light-theme",
         commentRegex    = /\/\*([\s\S]*?)\*\//mg,
-        scrollbarsRegex = /::-webkit-scrollbar(?:[\s\S]*?)\{(?:[\s\S]*?)\}/mg,
+        scrollbarsRegex = /((?:[^}|,]*)::-webkit-scrollbar(?:[^{]*)[{](?:[^}]*?)[}])/mgi,
         stylesPath      = FileUtils.getNativeBracketsDirectoryPath() + "/styles/",
         validExtensions = ["css", "less"];
 
@@ -87,7 +87,7 @@ define(function (require, exports, module) {
         this.file        = file;
         this.name        = options.name  || (options.title || fileName).toLocaleLowerCase().replace(/[\W]/g, '-');
         this.displayName = options.title || toDisplayName(fileName);
-        this.dark        = options.theme && options.theme.dark === true;
+        this.dark        = options.theme !== undefined && options.theme.dark === true;
     }
 
 
@@ -107,7 +107,6 @@ define(function (require, exports, module) {
         // Go through and extract out scrollbar customizations so that we can
         // enable/disable via settings.
         content = content
-            .replace(commentRegex, "")
             .replace(scrollbarsRegex, function (match) {
                 scrollbar.push(match);
                 return "";
@@ -231,15 +230,16 @@ define(function (require, exports, module) {
         var theme = getCurrentTheme();
 
         var pending = theme && FileUtils.readAsText(theme.file)
+            .then(function (lessContent) {
+                return lessifyTheme(lessContent.replace(commentRegex, ""), theme);
+            })
             .then(function (content) {
                 var result = extractScrollbars(content);
                 theme.scrollbar = result.scrollbar;
                 return result.content;
             })
-            .then(function (lessContent) {
-                return lessifyTheme(lessContent, theme);
-            })
             .then(function (cssContent) {
+                $("body").toggleClass("dark", theme.dark);
                 styleNode.text(cssContent);
                 return theme;
             });