feat: new Dark Phoenix theme

Author: abose

src/extensionsIntegrated/Phoenix-live-preview/live-preview.css

@@ -160,9 +160,9 @@
     overflow: hidden;
     white-space: nowrap;
     cursor: pointer;
-    background: #3C3F41;
+    background: transparent;
     box-shadow: none;
-    border: 1px solid #3C3F41;
+    border: 1px solid transparent;
     box-sizing: border-box;
     color: #a0a0a0;
     font-size: 14px;

src/styles/Extn-AIChatPanel.less

@@ -36,7 +36,7 @@
     flex: 1;
     min-height: 0;
     overflow: hidden;
-    background-color: @bc-sidebar-bg;
+    background-color: @bc-ai-sidebar-bg;
     color: @project-panel-text-1;
     font-size: @sidebar-content-font-size;
     container-type: inline-size;
@@ -263,6 +263,7 @@
     -webkit-user-select: text;
     user-select: text;
     cursor: default;
+    background-color: @bc-ai-sidebar-bg;
 }
 
 /* ── Individual messages ────────────────────────────────────────────── */
@@ -1695,14 +1696,15 @@
     .ai-chat-input-wrap {
         display: flex;
         align-items: flex-end;
-        background-color: rgba(255, 255, 255, 0.05);
-        border: 1px solid rgba(255, 255, 255, 0.08);
+        background-color: @bc-ai-input-bg;
+        border: 1px solid @bc-ai-input-border;
         border-radius: 8px;
         transition: border-color 0.15s ease;
         overflow: hidden;
 
         &:focus-within {
-            border-color: @bc-btn-border-focused;
+            background-color: @bc-ai-input-bg-focused;
+            border-color: @bc-ai-input-border-focus;
         }
 
         &.disabled {
@@ -1947,7 +1949,7 @@
     .ai-chat-textarea {
         flex: 1;
         min-width: 0;
-        background: none;
+        background: transparent !important;
         border: none !important;
         color: @project-panel-text-1;
         font-size: @sidebar-content-font-size;

src/styles/Extn-SidebarTabs.less

@@ -23,7 +23,7 @@
 #navTabBar {
     display: none;
     align-items: center;
-    background-color: @bc-sidebar-bg;
+    background-color: @bc-ai-sidebar-bg;
     height: 2rem;
     overflow: hidden;
     user-select: none;

src/styles/brackets.less

@@ -268,6 +268,8 @@ a, img {
         left: @sidebar-width;  // changed dynamically via Resizer
         right: @main-toolbar-width;
         z-index: @z-index-brackets-main-content;
+        border-left: 2px solid rgba(255, 255, 255, 0.10);
+        border-right: 2px solid rgba(255, 255, 255, 0.10);
     }
 
     .force-right-zero {
@@ -1198,7 +1200,7 @@ a, img {
 /* Project panel */
 
 #working-set-list-container {
-    background: @bc-sidebar-bg;
+    background: @bc-working-set-bg;
     display: block;
 
     > div:last-child ul {
@@ -1214,19 +1216,19 @@ a, img {
     position: relative;
     height: 19px;
     padding: 10px 0 9px 12px;
-    background: @bc-sidebar-bg;
+    background: @bc-working-set-bg;
     color: @project-panel-text-2;
     text-shadow: none;
     overflow: hidden;
 
     > span {
-        background: @bc-sidebar-bg;
+        background: @bc-working-set-bg;
         position: relative;
         z-index: 9;
     }
 
     > div {
-        background-color: @dark-bc-sidebar-bg;
+        background-color: @bc-working-set-bg;
         opacity: 1;
     }
 }
@@ -1385,15 +1387,16 @@ a, img {
 #project-files-header {
     display: flex;
     align-items: center;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    border-top: none;
     padding: 6px 0 6px 12px;
     font-size: 15px;
     color: @project-panel-text-2;
+    background-color: @bc-project-files-bg;
     overflow: hidden;
     gap: .5em;
 
     .btn-alt-quiet {
-        background-color: #47484b;
+        background-color: transparent;
 
         // relative positioning plus z-index make sure that the splitview button flows under the left aligned buttons in the project pane when there are no working set files
         position: relative;
@@ -1466,8 +1469,8 @@ a, img {
 
 .sidebar-selection, .filetree-selection {
     background: @bc-sidebar-selection;
-    border-top: 1px solid @bc-shadow-small;
-    border-bottom: 1px solid @bc-highlight;
+    border-top: none;
+    border-bottom: none;
     box-sizing: border-box;
     height: 23px;
     width: 100%;
@@ -1476,8 +1479,8 @@ a, img {
 
 .sidebar-selection-extension, .filetree-selection-extension {
     background: @bc-sidebar-selection;
-    border-top: 1px solid @bc-shadow-small;
-    border-bottom: 1px solid @bc-highlight;
+    border-top: none;
+    border-bottom: none;
     box-sizing: border-box;
     height: 23px;
     width: 9px; /* quiet scrollbar width */
@@ -1511,6 +1514,7 @@ a, img {
 
 #project-files-container {
     .box-flex(1);
+    background-color: @bc-project-files-bg;
 
     div > ul {
         padding-bottom: 24px;
@@ -1521,20 +1525,20 @@ a, img {
 .scroller-shadow {
     background-size: 100%;
     background-repeat: no-repeat;
-    height: 5px;
+    height: 8px;
     position: fixed;
     z-index: @z-index-brackets-scroller-shadow;
     pointer-events: none; // serves as a "click through", so clicks go to the file tree behind (see #12684)
 
     &.top {
-        #gradient > .vertical(rgba(0,0,0,0.1), rgba(0,0,0,0));
-        background-position: 0 -5px;
+        #gradient > .vertical(rgba(0,0,0,0.18), rgba(0,0,0,0));
+        background-position: 0 -8px;
         background-color: transparent; /* override background-color: @endColor from #gradient.vertical */
     }
 
     &.bottom {
-        #gradient > .vertical(rgba(0,0,0,0), rgba(0,0,0,0.1));
-        background-position: 0 5px;
+        #gradient > .vertical(rgba(0,0,0,0), rgba(0,0,0,0.12));
+        background-position: 0 8px;
         background-color: transparent; /* override background-color: @endColor from #gradient.vertical */
     }
 }

src/styles/brackets_core_ui_variables.less

@@ -149,8 +149,8 @@
 
 
 // Sidebar
-@bc-sidebar-bg:                 #3C3F41;
-@bc-sidebar-selection:          #2D2E30;
+@bc-sidebar-bg:                 #252525;
+@bc-sidebar-selection:          #404448;
 
 // images
 @button-icon:                   "images/find-replace-sprites.svg";
@@ -262,11 +262,11 @@
 @dark-bc-secondary-btn-border:       #202020;
 
 // Sidebar
-@dark-bc-sidebar-bg:                 #3C3F41;
-@dark-bc-sidebar-selection:          #2D2E30;
+@dark-bc-sidebar-bg:                 #252525;
+@dark-bc-sidebar-selection:          #404448;
 
 // Plugin panel
-@plugin-panel-bg:                    #3C3F41;
+@plugin-panel-bg:                    #252525;
 
 // images
 @dark-button-icon:                   "images/find-replace-sprites-dark.svg";

src/styles/brackets_patterns_override.less

@@ -259,7 +259,7 @@ a:focus {
     }
 
     .selected-button{
-        background-color: @plugin-panel-bg !important;
+        background-color: rgba(255, 255, 255, 0.12) !important;
         margin-left: 3px !important;
         margin-right: 0 !important;
     }
@@ -280,11 +280,7 @@ a:focus {
         }
 
         > a:hover {
-            background-color: @bc-shadow !important;
-
-            .dark & {
-                background-color: @dark-bc-shadow !important;
-            }
+            background-color: rgba(255, 255, 255, 0.08) !important;
         }
 
         > a:active {

src/styles/brackets_scrollbars.less

@@ -26,7 +26,7 @@
 #project-files-container:hover,
 .ai-chat-messages:hover,
 .ai-session-history-dropdown:hover {
-    background-color: rgba(128, 128, 128, 0);
+    background-color: inherit;
 }
 
 /* Temporary implementation of unobtrusive scrollbars.

src/styles/brackets_theme_default.less

@@ -86,10 +86,17 @@
 @matching-bracket: #cfead6;
 
 /* sidebar/toolbar colors */
-@project-panel-base-color: #47484B;
+@bc-ai-sidebar-bg: #252525;
+@bc-ai-input-bg: #2a2a2a;
+@bc-ai-input-bg-focused: #2d2d2d;
+@bc-ai-input-border: rgba(255, 255, 255, 0.08);
+@bc-ai-input-border-focus: rgba(255, 255, 255, 0.2);
+@project-panel-base-color: @bc-project-files-bg;
+@bc-working-set-bg: #2f2f2f;
+@bc-project-files-bg: #252525;
 @project-panel-text-1: #ffffff;
 @project-panel-text-2: #adb9bd;
-@main-toolbar-background-color: #5D5F60;
+@main-toolbar-background-color: #252525;
 
 /* open working file highlight */
 @open-working-file-name-highlight: #8fddff;