New Dark Phoenix theme

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/nls/root/strings.js

@@ -1929,6 +1929,10 @@ define({
     "AI_CHAT_MODE_PLAN": "Plan Mode",
     "AI_CHAT_MODE_EDIT": "Edit Mode",
     "AI_CHAT_MODE_FULL_AUTO": "Full Auto",
+    "AI_CHAT_MODE_INFO_PLAN": "AI will propose a plan before making changes",
+    "AI_CHAT_MODE_INFO_EDIT": "AI can edit files. Shell commands need approval",
+    "AI_CHAT_MODE_INFO_FULL_AUTO": "AI can edit files and run commands without approval",
+    "AI_CHAT_MODE_SWITCH_HINT": "(Shift+Tab to switch)",
     "AI_CHAT_BASH_CONFIRM_TITLE": "Allow command?",
     "AI_CHAT_BASH_ALLOW": "Allow",
     "AI_CHAT_BASH_DENY": "Deny",

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 {
@@ -1747,6 +1749,22 @@
             color: @project-panel-text-2;
             line-height: 1;
         }
+
+        .ai-permission-info {
+            display: none;
+            margin-left: auto;
+            font-size: 11px;
+            line-height: 1;
+            pointer-events: auto;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: @project-panel-text-2;
+        }
+
+        &:hover .ai-permission-info {
+            display: inline;
+        }
     }
 
     .ai-chat-context-bar {
@@ -1931,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;
@@ -1444,7 +1447,7 @@ a, img {
         height: 16px;
         line-height: 15px;
         margin-left: 18px;
-        padding: 3px 0 3px 0;
+        padding: 4px 0 3px 0;
 
         cursor: default;
 
@@ -1466,18 +1469,18 @@ a, img {
 
 .sidebar-selection, .filetree-selection {
     background: @bc-sidebar-selection;
-    border-top: 1px solid @bc-shadow-small;
-    border-bottom: 1px solid @bc-highlight;
+    border: none;
+    box-shadow: none;
     box-sizing: border-box;
     height: 23px;
     width: 100%;
     position: absolute;
 }
 
 .sidebar-selection-extension, .filetree-selection-extension {
-    background: @bc-sidebar-selection;
-    border-top: 1px solid @bc-shadow-small;
-    border-bottom: 1px solid @bc-highlight;
+    background: transparent;
+    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:          rgba(90, 140, 255, 0.18);
 
 // 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:          rgba(90, 140, 255, 0.18);
 
 // 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.
@@ -85,6 +85,51 @@
 }
 
 
+/* Always-visible scrollbar — same style as quiet-scrollbars but always shown.
+   Add element classes here to opt in. */
+.visible-scrollbars,
+.ai-plan-body {
+    &::-webkit-scrollbar {
+        width: 9px;
+        height: 9px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 999px;
+        box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.6) inset !important;
+        border: 2px solid transparent !important;
+    }
+
+    .dark & {
+        &::-webkit-scrollbar-thumb {
+            box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3) inset !important;
+        }
+    }
+}
+
+/* Dropdown overflow menu needs track bg to match its popup background */
+.dropdown-overflow-menu {
+    &::-webkit-scrollbar {
+        width: 9px;
+        height: 9px;
+        background-color: @bc-menu-bg !important;
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 999px;
+        box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3) inset !important;
+        border: 2px solid transparent !important;
+    }
+
+    .dark & {
+        &::-webkit-scrollbar {
+            background-color: @dark-bc-menu-bg !important;
+        }
+        &::-webkit-scrollbar-thumb {
+            box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3) inset !important;
+        }
+    }
+}
+
 .platform-linux, .platform-mac {
     // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js
 

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;

tracking-repos.json

@@ -1,5 +1,5 @@
 {
   "phoenixPro": {
-    "commitID": "4ca7bc6eea7ad4c94fbf321ae2c854f533fb8bd2"
+    "commitID": "56017ed5a71d6ff22199f9826803ed0cbabaa22e"
   }
 }