Dark Core UI

src/extensions/default/DarkTheme/main.less

@@ -54,7 +54,7 @@
 
 .CodeMirror-focused .CodeMirror-activeline {
     .CodeMirror-gutter-elt {
-        background: #000;
+        background: @background;
         color: #fff;
     }
     .inline-widget .CodeMirror-gutter-elt {
@@ -92,6 +92,10 @@
     border-right: none;
 }
 
+.CodeMirror-linenumber {
+    color: #767676;
+}
+
 .CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt {
     color: #fff;
 }

src/extensions/default/InlineColorEditor/css/main.less

@@ -333,9 +333,9 @@
 
 // Dark UI theme
 
-@dark-bc-bg-highlight: #1671db;
+@dark-bc-bg-highlight: #005ecc;
 @dark-bc-highlight: rgba(255, 255, 255, 0.06);
-@dark-bc-text: #ddd;
+@dark-bc-text: #ccc;
 @dark-bc-text-alt: #fff;
 @dark-bc-highlight-hard: rgba(255, 255, 255, 0.1);
 @dark-bc-btn-bg: #3f3f3f;
@@ -451,4 +451,4 @@
             background-image: @dark-swatch-bg-2x;
         }
     }
-}
+}

src/extensions/default/InlineTimingFunctionEditor/main.less

@@ -89,12 +89,12 @@
 }
 
 .bezier-curve-editor .control-point {
-    background: -webkit-linear-gradient(270deg, rgb(249, 249, 249) 50%, rgb(237, 237, 237) 50%);
+    background: #e5e9e9;
     position: absolute;
     z-index: 2;
     height: 16px;
     width: 16px;
-    border: 1px solid #9c9e9e;
+    border: 1px solid #b2b5b5;
     margin: -8px 0 0 -8px;
     outline: none;
     padding: 0 !important;
@@ -103,12 +103,12 @@
 }
 
 .bezier-curve-editor .control-point:focus {
-    border: 1px solid #0940fd !important;
-    box-shadow: 0 0 0 2px #6fb5f1;
+    border: 1px solid #2893ef !important;
+    box-shadow: 0 0 0 2px #94ceff;
 }
 
 .bezier-curve-editor .P0, .bezier-curve-editor .P3 {
-    background: #1461FC;
+    background: #2893ef;
     border-radius: 0;
     border: none;
     height: 12px;
@@ -301,11 +301,10 @@
 
 /* Dark UI theme */
 
-@dark-bc-bg-highlight: #1671db;
+@dark-bc-bg-highlight: #005ecc;
 @dark-bc-highlight: rgba(255, 255, 255, 0.06);
-@dark-bc-text: #ddd;
+@dark-bc-text: #ccc;
 @dark-bc-text-alt: #fff;
-@dark-bc-highlight-hard: rgba(255, 255, 255, 0.1);
 @dark-bc-btn-bg: #3f3f3f;
 @dark-bc-btn-border: #202020;
 @dark-bc-btn-border-focused: #2893ef;

src/extensions/default/JavaScriptCodeHints/styles/brackets-js-hints.css

@@ -88,3 +88,33 @@
 .brackets-js-hints .current-parameter {
     font-weight: 500;
 }
+
+/* Dark Styles */
+
+.dark .brackets-js-hints.priority-high {
+    color: #a1f200; /* green */
+}
+
+.dark .brackets-js-hints.priority-medium {
+    color: #3ff8ff; /* blue */
+}
+
+.dark .brackets-js-hints.priority-low {
+    color: #e6adff; /* violet */
+}
+
+.dark .brackets-js-hints.priority-lowest {
+    color: #bbb; /* dark grey */
+}
+
+.dark .brackets-js-hints.literal-hint {
+    color: #bbb; /* dark grey */
+    font-family: SourceCodePro;
+}
+
+.dark #function-hint-container {
+    background: #000;
+    border: 1px solid rgba(255,255,255,0.15);
+    color: #fff;
+    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.24);
+}

src/extensions/default/QuickView/QuickView.less

@@ -0,0 +1,139 @@
+@bc-highlight:                  rgba(255, 255, 255, 0.12);
+@bc-panel-bg:                   #dfe2e2;
+@bc-panel-bg-promoted:          #d4d7d7;
+@bc-shadow-large:               rgba(0, 0, 0, 0.5);
+@bc-shadow-small:               rgba(0, 0, 0, 0.06);
+@bc-text:                       #333;
+
+@dark-bc-highlight:             rgba(255, 255, 255, 0.06);
+@dark-bc-panel-bg:              #2c2c2c;
+@dark-bc-panel-bg-promoted:     #222;
+@dark-bc-shadow-large:          rgba(0, 0, 0, 0.5);
+@dark-bc-shadow-small:          rgba(0, 0, 0, 0.06);
+@dark-bc-text:                  #ccc;
+
+#quick-view-container {
+    display: none;
+
+    -webkit-transition: opacity 0.125s ease-in, -webkit-transform 0.125s;
+    transition: opacity 0.125s ease-in, transform 0.125s;
+
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    opacity: 0;
+
+    background: @bc-panel-bg;
+    position: absolute;
+    z-index: 5000;
+    pointer-events: none;
+
+    padding: 8px;
+    text-align: center;
+
+    border-radius: 4px;
+    box-shadow: 0 4px 15px @bc-shadow-large;
+
+    .dark & {
+        background: @dark-bc-panel-bg;
+        box-shadow: 0 4px 15px @dark-bc-shadow-large;
+    }
+}
+
+#quick-view-container.active {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+}
+
+#quick-view-container .preview-content {
+    background-image: url(preview_bg.png);
+    border-radius: 2px;
+    box-shadow: 0 -1px 2px @bc-shadow-small, 0 1px 0 @bc-highlight;
+
+    .dark & {
+        box-shadow: 0 -1px 2px @dark-bc-shadow-small, 0 1px 0 @dark-bc-highlight;
+        background-image: url(preview_bg_dark.png);
+    }
+}
+
+
+#quick-view-container .color-swatch {
+    width: 40px;
+    height: 40px;
+    background-size: 100%;
+}
+
+#quick-view-container .image-preview {
+    line-height: 0;
+}
+
+#quick-view-container .image-preview img {
+    min-width: 100px;
+    max-width: 200px;
+    max-height: 200px;
+}
+
+#quick-view-container .img-size {
+    background-color: @bc-panel-bg-promoted;
+    border-top: 1px solid @bc-highlight;
+    font-size: 0.9em;
+    color: @bc-text;
+    padding-left: 3px;
+    margin-top: 0;
+    text-align: left;
+    text-shadow: 0 1px 0px @bc-highlight;
+
+    .dark & {
+        background-color: @dark-bc-panel-bg-promoted;
+        border-top: 1px solid @dark-bc-highlight;
+        color: @dark-bc-text;
+        text-shadow: 0 1px 0px @dark-bc-highlight;
+    }
+}
+
+#quick-view-container.preview-bubble-above {
+    -webkit-transform-origin: center bottom;
+}
+
+#quick-view-container.preview-bubble-above:before {
+    display: none;
+}
+
+#quick-view-container.preview-bubble-above:after,
+#quick-view-container.preview-bubble-below:before {
+    width: 0;
+    height: 0;
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: -9px;
+    margin-left: -10px;
+    z-index: 999;
+    display: block;
+    border-top: 10px solid @bc-panel-bg;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    -webkit-filter: drop-shadow(0px 1px 0 rgba(0, 0, 0, 0.18));
+
+    .dark & {
+        border-top: 10px solid @dark-bc-panel-bg;
+    }
+}
+
+#quick-view-container.preview-bubble-below {
+    -webkit-transform-origin: center top;
+}
+
+#quick-view-container.preview-bubble-below:before {
+    -webkit-filter: drop-shadow(0px 1px 0 rgba(255, 255, 255, 0.18));
+    -webkit-transform: rotate(180deg);
+    top: -9px;
+}
+
+#quick-view-container.preview-bubble-below:after {
+    display: none;
+}
+
+.quick-view-highlight {
+    background-color: rgba(200, 200, 150, 0.4);
+}

src/extensions/default/QuickView/main.js

@@ -306,7 +306,6 @@ define(function (require, exports, module) {
                     thisSize,
                     i;
 
-
                 // find lower bound                
                 for (i = 0; i < params.length; i++) {
                     args = params[i].split(" ");
@@ -335,7 +334,11 @@ define(function (require, exports, module) {
                 for (i = 0; i < params.length; i++) {
                     args = params[i].split(" ");
                     if (isGradientColorStop(args) && hasLengthInPixels(args)) {
-                        thisSize = ((parseFloat(args[1]) + lowerBound) / upperBound) * 100;
+                        if (upperBound === 0) {
+                            thisSize = 0;
+                        } else {
+                            thisSize = ((parseFloat(args[1]) + lowerBound) / upperBound) * 100;
+                        }
                         args[1] = thisSize + "%";
                     }
                     params[i] = args.join(" ");
@@ -748,7 +751,7 @@ define(function (require, exports, module) {
     $previewContent = $previewContainer.find(".preview-content");
 
     // Load our stylesheet
-    ExtensionUtils.loadStyleSheet(module, "QuickView.css");
+    ExtensionUtils.loadStyleSheet(module, "QuickView.less");
 
     // Register command
     CommandManager.register(Strings.CMD_ENABLE_QUICK_VIEW, CMD_ENABLE_QUICK_VIEW, toggleEnableQuickView);