fix lint

* Temporarily re-enable key based auth for Mongo and Cassandra tests.

* Increase number of shards for playwright tests.

* Another small bump to test shard count.

* click global new... button then collection in playwright tests

* get new table button

* create and delete container for every individual scale test

* for scale and settings, dont create sample data in container

* run scale tests serially

* refactor scale setup and tear down to be within each test

* record network traces

* record network calls on all retries

* when disposing of database during playwright test, refresh tree to remove deleted database

* refresh tree before  opening scale and settings

* When opening scale and settings, refresh databases

* reload all databases before loading offers

* increase time for change partition key request

* increase time for change partition key request

* refresh databases in test instead of product code

* when refreshing containers, open console window to check for status completion

* close notification console window after seeing desired log

* create and delete a container for each individual test

* dont delete database after every test. leave it to the CI

* Don't refresh databases when opening Scale+Settings and only delete database if running locally

* only open scale and settings at the beginning of each test suite

* get it back to working

* change settings.spect.ts from serial to parallel

* don't delete database after each test

* update container creation throughpout to be 5000

* run tests with no throughput limit on the account

* adjust scale test to reflect no throughput limit on account

* remove test container throughput

* don't refresh collections when clicking settings in product code

* refactor and run cleanup during pr check

* copy cleanup accounts

* run cleanup after playwright tests

* run cleanup every three hours

* revert ci.yml

* update cpk test

* remove cpk

* remove cleanup accounts and add cpk

* add cpk

* remove cpk changes

* revert ci.yml

* run cleanup every two hours

---------

Co-authored-by: Jade Welton <jawelton@microsoft.com>
Co-authored-by: Asier Isayas <aisayas@microsoft.com>

.github/workflows/ci.yml

@@ -164,8 +164,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
-        shardTotal: [16]
+        shardTotal: [20]
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js 18.x
@@ -198,18 +198,18 @@ jobs:
             GREMLIN_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-gremlin.documents.azure.com/.default" -o tsv --query accessToken)
             echo "::add-mask::$GREMLIN_TESTACCOUNT_TOKEN"
             echo GREMLIN_TESTACCOUNT_TOKEN=$GREMLIN_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            CASSANDRA_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-cassandra.documents.azure.com/.default" -o tsv --query accessToken)
+            # CASSANDRA_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-cassandra.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$CASSANDRA_TESTACCOUNT_TOKEN"
+            # echo "::add-mask::$CASSANDRA_TESTACCOUNT_TOKEN"
-            echo CASSANDRA_TESTACCOUNT_TOKEN=$CASSANDRA_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            # echo CASSANDRA_TESTACCOUNT_TOKEN=$CASSANDRA_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            MONGO_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo.documents.azure.com/.default" -o tsv --query accessToken)
+            # MONGO_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$MONGO_TESTACCOUNT_TOKEN"
+            # echo "::add-mask::$MONGO_TESTACCOUNT_TOKEN"
-            echo MONGO_TESTACCOUNT_TOKEN=$MONGO_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            # echo MONGO_TESTACCOUNT_TOKEN=$MONGO_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            MONGO32_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo32.documents.azure.com/.default" -o tsv --query accessToken)
+            # MONGO32_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo32.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$MONGO32_TESTACCOUNT_TOKEN"
+            # echo "::add-mask::$MONGO32_TESTACCOUNT_TOKEN"
-            echo MONGO32_TESTACCOUNT_TOKEN=$MONGO32_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            # echo MONGO32_TESTACCOUNT_TOKEN=$MONGO32_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            MONGO_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo-readonly.documents.azure.com/.default" -o tsv --query accessToken)
+            # MONGO_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo-readonly.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$MONGO_READONLY_TESTACCOUNT_TOKEN"
+            # echo "::add-mask::$MONGO_READONLY_TESTACCOUNT_TOKEN"
-            echo MONGO_READONLY_TESTACCOUNT_TOKEN=$MONGO_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            # echo MONGO_READONLY_TESTACCOUNT_TOKEN=$MONGO_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
       - name: Run test shard ${{ matrix['shardIndex'] }} of ${{ matrix['shardTotal']}}
         run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers=3
       - name: Upload blob report to GitHub Actions Artifacts

.github/workflows/cleanup.yml

@@ -6,8 +6,8 @@ on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
   schedule:
-    # Once every hour
+    # Once every two hours
-    - cron: "0 15 * * *"
+    - cron: "0 */2 * * *"
 
 permissions:
   id-token: write

images/DocumentIcon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <path d="M4 4c0-1.1.9-2 2-2h3.59c.4 0 .78.16 1.06.44l3.91 3.91c.28.28.44.67.44 1.06V14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 9 6.5V3H6Zm4 .2v3.3c0 .28.22.5.5.5h3.3L10 3.2ZM17 9a1 1 0 0 0-1-1v6a3 3 0 0 1-3 3H6a1 1 0 0 0 1 1h6.06A3.94 3.94 0 0 0 17 14.06V9Z" />
+</svg>

images/MoonIcon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.85032 3.0153C10.4276 3.21621 12.4563 5.37119 12.4563 8C12.4563 10.7614 10.2177 13 7.45629 13C5.70158 13 4.15722 12.0961 3.26465 10.7271C4.66791 10.3479 6.58077 9.42526 7.42438 7.17555C7.97709 5.70162 8.00857 4.23763 7.85032 3.0153ZM13.4563 8C13.4563 4.68629 10.77 2 7.45629 2C7.38577 2 7.31552 2.00122 7.24555 2.00364C7.09984 2.00867 6.96358 2.07706 6.87247 2.19089C6.78136 2.30471 6.74447 2.45263 6.77147 2.59591C7.00024 3.81021 7.05064 5.32413 6.48805 6.82444C5.68804 8.95787 3.68609 9.66359 2.41062 9.89533C2.25698 9.92325 2.1252 10.0213 2.05438 10.1605C1.98356 10.2997 1.98182 10.4639 2.04969 10.6046C3.01873 12.6128 5.07502 14 7.45629 14C10.77 14 13.4563 11.3137 13.4563 8Z" fill="#0078d4" />
+</svg>

images/SunIcon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 1.33C8.276 1.33 8.5 1.554 8.5 1.83V2.83C8.5 3.106 8.276 3.33 8 3.33C7.724 3.33 7.5 3.106 7.5 2.83V1.83C7.5 1.554 7.724 1.33 8 1.33ZM8 11.33C9.841 11.33 11.33 9.841 11.33 8C11.33 6.159 9.841 4.67 8 4.67C6.159 4.67 4.67 6.159 4.67 8C4.67 9.841 6.159 11.33 8 11.33ZM8 10.33C6.711 10.33 5.67 9.289 5.67 8C5.67 6.711 6.711 5.67 8 5.67C9.289 5.67 10.33 6.711 10.33 8C10.33 9.289 9.289 10.33 8 10.33ZM14.17 8.5C14.446 8.5 14.67 8.276 14.67 8C14.67 7.724 14.446 7.5 14.17 7.5H13.17C12.894 7.5 12.67 7.724 12.67 8C12.67 8.276 12.894 8.5 13.17 8.5H14.17ZM8 12.67C8.276 12.67 8.5 12.894 8.5 13.17V14.17C8.5 14.446 8.276 14.67 8 14.67C7.724 14.67 7.5 14.446 7.5 14.17V13.17C7.5 12.894 7.724 12.67 8 12.67ZM2.83 8.5C3.106 8.5 3.33 8.276 3.33 8C3.33 7.724 3.106 7.5 2.83 7.5H1.83C1.554 7.5 1.33 7.724 1.33 8C1.33 8.276 1.554 8.5 1.83 8.5H2.83ZM2.813 2.813C3.009 2.617 3.325 2.617 3.521 2.813L4.521 3.813C4.717 4.009 4.717 4.325 4.521 4.521C4.325 4.717 4.009 4.717 3.813 4.521L2.813 3.521C2.617 3.325 2.617 3.009 2.813 2.813ZM3.521 13.187C3.325 13.383 3.009 13.383 2.813 13.187C2.617 12.991 2.617 12.675 2.813 12.479L3.813 11.479C4.009 11.283 4.325 11.283 4.521 11.479C4.717 11.675 4.717 11.991 4.521 12.187L3.521 13.187ZM13.187 2.813C12.991 2.617 12.675 2.617 12.479 2.813L11.479 3.813C11.283 4.009 11.283 4.325 11.479 4.521C11.675 4.717 11.991 4.717 12.187 4.521L13.187 3.521C13.383 3.325 13.383 3.009 13.187 2.813ZM12.479 13.187C12.675 13.383 12.991 13.383 13.187 13.187C13.383 12.991 13.383 12.675 13.187 12.479L12.187 11.479C11.991 11.283 11.675 11.283 11.479 11.479C11.283 11.675 11.283 11.991 11.479 12.187L12.479 13.187Z" fill="#0078d4" />
+</svg>

images/moon-blue.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 7.5C4 5.567 5.567 4 7.5 4C8.5 4 9.4 4.4 10 5.1C9.5 4.8 8.9 4.6 8.3 4.6C6.8 4.6 5.6 5.8 5.6 7.3C5.6 8.8 6.8 10 8.3 10C8.9 10 9.5 9.8 10 9.5C9.4 10.2 8.5 10.6 7.5 10.6C5.567 10.6 4 9.033 4 7.1V7.5Z" fill="#0078D4"/>
+</svg>

images/sun-blue.svg

@@ -0,0 +1,11 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 2C6 1.44772 6.44772 1 7 1C7.55228 1 8 1.44772 8 2C8 2.55228 7.55228 3 7 3C6.44772 3 6 2.55228 6 2Z" fill="#0078D4"/>
+<path d="M6 13C6 12.4477 6.44772 12 7 12C7.55228 12 8 12.4477 8 13C8 13.5523 7.55228 14 7 14C6.44772 14 6 13.5523 6 13Z" fill="#0078D4"/>
+<path d="M1 7C1 6.44772 1.44772 6 2 6C2.55228 6 3 6.44772 3 7C3 7.55228 2.55228 8 2 8C1.44772 8 1 7.55228 1 7Z" fill="#0078D4"/>
+<path d="M12 7C12 6.44772 12.4477 6 13 6C13.5523 6 14 6.44772 14 7C14 7.55228 13.5523 8 13 8C12.4477 8 12 7.55228 12 7Z" fill="#0078D4"/>
+<path d="M2.63604 3.63604C3.02656 3.24551 3.65973 3.24551 4.05025 3.63604C4.44078 4.02656 4.44078 4.65973 4.05025 5.05025C3.65973 5.44078 3.02656 5.44078 2.63604 5.05025C2.24551 4.65973 2.24551 4.02656 2.63604 3.63604Z" fill="#0078D4"/>
+<path d="M10.9497 9.94975C11.3403 9.55922 11.9734 9.55922 12.364 9.94975C12.7545 10.3403 12.7545 10.9734 12.364 11.364C11.9734 11.7545 11.3403 11.7545 10.9497 11.364C10.5592 10.9734 10.5592 10.3403 10.9497 9.94975Z" fill="#0078D4"/>
+<path d="M10.9497 5.05025C10.5592 4.65973 10.5592 4.02656 10.9497 3.63604C11.3403 3.24551 11.9734 3.24551 12.364 3.63604C12.7545 4.02656 12.7545 4.65973 12.364 5.05025C11.9734 5.44078 11.3403 5.44078 10.9497 5.05025Z" fill="#0078D4"/>
+<path d="M2.63604 11.364C2.24551 10.9734 2.24551 10.3403 2.63604 9.94975C3.02656 9.55922 3.65973 9.55922 4.05025 9.94975C4.44078 10.3403 4.44078 10.9734 4.05025 11.364C3.65973 11.7545 3.02656 11.7545 2.63604 11.364Z" fill="#0078D4"/>
+<circle cx="7.5" cy="7.5" r="2.5" fill="#0078D4"/>
+</svg>

less/Common/Constants.less

@@ -128,7 +128,7 @@
 @provisionDatabaseThroughputInfo: 200px;
 
 //tabs container
-@ActiveTabHeight: 31px;
+@ActiveTabHeight: 32px;
 @ActiveTabWidth: 141px;
 @TabsHeight: 30px;
 @TabsWidth: 140px;
@@ -237,11 +237,11 @@
 *********************************************************************************************/
 
 .hover() {
-  background-color: @AccentLight;
+  background-color: var(--colorNeutralBackground1Hover);
 }
 
 .active() {
-  background-color: @AccentExtra;
+  background-color: var(--colorNeutralBackground1Hover);
 }
 
 .focus() {

less/documentDB.less

@@ -1740,7 +1740,7 @@ input::-webkit-calendar-picker-indicator {
   flex: 1;
   padding-left: 34px;
   padding-right: 34px;
-  color: @BaseDark;
+  color: var(--colorNeutralForeground1);
   overflow-y: auto;
   overflow-x: auto;
   margin: (2 * @MediumSpace) 0px;
@@ -1749,7 +1749,6 @@ input::-webkit-calendar-picker-indicator {
 .contextual-pane .panelMainContent {
   padding-left: 34px;
   padding-right: 34px;
-  color: @BaseDark;
   margin: (2 * @MediumSpace) 0px;
 }
 
@@ -1914,7 +1913,8 @@ input::-webkit-calendar-picker-indicator::after {
 }
 
 .nav-tabs-margin {
-  background-color: #f2f2f2;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 
   .nav-tabs {
     display: flex;
@@ -1922,11 +1922,19 @@ input::-webkit-calendar-picker-indicator::after {
     align-items: flex-end;
     height: 100%;
     margin-bottom: -0.5px;
+    background-color: var(--colorNeutralBackground1Selected);
 
     li {
-      // Override the bootstrap defaults here to align with our layout constants.
       margin-bottom: 0px;
       height: 32px;
+
+      &:hover {
+        background-color: var(--colorNeutralBackground1Hover);
+      }
+
+      &:active {
+        background-color: var(--colorNeutralBackground1Pressed);
+      }
     }
   }
 }
@@ -1940,8 +1948,9 @@ input::-webkit-calendar-picker-indicator::after {
 .nav.nav-tabs.qslevel > li > a:hover {
   border: none;
   border-radius: 0;
-  background-color: transparent !important;
+  background-color: var(--colorNeutralBackground1Selected);
   border-color: transparent;
+  color: var(--colorNeutralForeground1);
 }
 
 .numbersize {
@@ -2376,6 +2385,8 @@ a:link {
   display: flex;
   flex-direction: column;
   min-width: 0; // This prevents it to grow past the parent's width if its content is too wide
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .tabs {
@@ -2631,14 +2642,16 @@ a:link {
 }
 
 .tabPanesContainer {
-  display: flex;
   flex-grow: 1;
   overflow: hidden;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .tabs-container {
   height: 100%;
   width: 100%;
+  overflow-y: auto;
 }
 
 .paddingspan4 {
@@ -2655,24 +2668,18 @@ a:link {
 .nav-tabs > li.active > .tabNavContentContainer,
 .nav-tabs > li.active > .tabNavContentContainer:focus,
 .nav-tabs > li.active > .tabNavContentContainer:hover {
-  color: #555;
+  color: var(--colorNeutralForeground1);
   cursor: default;
-  background-color: @BaseLight;
+  background-color: var(--colorNeutralBackground1);
-  border-color: @BaseMedium;
+  border-color: var(--colorNeutralStroke1);
-  border-bottom-color: @BaseLight;
   border-style: solid;
   border-width: 1px;
   height: @ActiveTabHeight;
   width: @ActiveTabWidth;
 }
 
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
+.nav-tabs > li.active .contentWrapper .tabNavText  {
-  font-weight: bolder;
+  border-bottom: 2px solid var(--colorCompoundBrandBackground);
-  border-bottom: 2px solid rgba(0, 120, 212, 1);
-}
-
-.nav-tabs > li.active:focus > .tabNavContentContainer {
-  .focus();
 }
 
 .tabNavContentContainer {
@@ -2681,7 +2688,7 @@ a:link {
   justify-content: space-between;
   border-radius: 2px 2px 0 0;
   padding: @DefaultSpace 0px @SmallSpace 0px;
-  color: @BaseHigh;
+  color: var(--colorNeutralForeground1);
   width: @TabsWidth;
   text-align: center;
   position: relative;
@@ -2689,19 +2696,21 @@ a:link {
 
   &:hover {
     text-decoration: none;
-    background-color: @BaseMediumLow;
+    background-color: var(--colorNeutralBackground1Hover);
-    border-color: @BaseMediumLow;
+    border-color: transparent;
   }
 
   &:active {
-    background-color: @BaseMediumLow;
+    background-color: var(--colorNeutralBackground1Pressed);
   }
 
   .tab_Content {
     .flex-display();
     width: @TabsWidth;
-    border-right: @ButtonBorderWidth solid @BaseMedium;
+    border-right: @ButtonBorderWidth solid var(--colorNeutralStroke1);
     white-space: nowrap;
+    color: var(--colorNeutralForeground1);
+
     .contentWrapper {
       .flex-display();
       width: @ContentWrapper;
@@ -2723,9 +2732,8 @@ a:link {
             background-image: url(../images/error_no_outline.svg);
             background-repeat: no-repeat;
             background-position: center;
-            background-size: 3px;
             display: block;
-            margin: 1px 0px 0px 6px;
+            margin: 4px 0px 0px 6px;
           }
         }
 
@@ -2750,39 +2758,60 @@ a:link {
         .loadingIcon {
           width: @LoadingErrorIconSize;
           height: @LoadingErrorIconSize;
-          margin: 0px 0px @SmallSpace @SmallSpace;
+          margin-top: 1px;
+        }
+
+        .warningIconContainer {
+          width: @ErrorIconContainer;
+          height: @ErrorIconContainer;
+          margin-top: 1px;
         }
       }
 
       .tabNavText {
         margin-left: @SmallSpace;
         margin-right: 2px;
-        color: @BaseDark;
+        color: var(--colorNeutralForeground1);
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
         flex-grow: 1;
+        font-size: 12px;
       }
     }
 
     .tabIconSection {
-      width: 29px;
       position: relative;
-      padding-top: 2px;
 
       .cancelButton {
         padding: 0px @SmallSpace 0px @SmallSpace;
+        color: var(--colorNeutralForeground1);
+        width: 16px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
 
         &:hover {
-          .hover();
+          background-color: var(--colorNeutralBackground1Hover);
+          color: var(--colorNeutralForeground1);
         }
 
         &:focus {
-          .focus();
+          background-color: var(--colorNeutralBackground1Pressed);
+          color: var(--colorNeutralForeground1);
         }
 
         &:active {
-          .active();
+          background-color: var(--colorNeutralBackground1Pressed);
+          color: var(--colorNeutralForeground1);
+        }
+
+        &::before {
+          content: "×";
+          font-size: 16px;
+          line-height: 1;
         }
       }
     }
@@ -3137,3 +3166,12 @@ a:link {
 .sidebarContainer {
   height: 100%;
 }
+
+.close-Icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}

less/documentDBFabric.less

@@ -7,6 +7,7 @@ html {
 body {
   font-family: @FabricFont;
   background-color: #f5f5f5;
+  --colorCompoundBrandBackground: @FabricAccentMedium;
 }
 
 a {
@@ -41,7 +42,7 @@ a:focus {
 }
 
 .nav-tabs-margin {
-  padding-top: 5px;
+  padding-top: 0px;
   background-color: #ffffff;
 }
 
@@ -68,17 +69,20 @@ a:focus {
 }
 
 .nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: 2px solid #e0e0e0;
+  border-bottom: none;
 }
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: 2px solid @FabricAccentMedium;
+  border-bottom: none;
 }
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
   border-bottom: 0px none transparent;
 }
+.nav-tabs > li.active .contentWrapper .tabNavText  {
+  border-bottom: 2px solid @FabricAccentMedium;
+}
 
 .tabNavContentContainer {
   padding: @SmallSpace 0px @SmallSpace 0px;
@@ -214,6 +218,7 @@ a:focus {
 
 .tabPanesContainer {
   overflow: auto !important;
+  display: flex;
 }
 
 .tabs-container {

less/forms.less

@@ -79,13 +79,13 @@
 
 .storageCapacityTitle {
   padding: @LargeSpace 0px;
-
 }
 .throughputStorageValue {
   font-size: 12px;
 }
 
-.estimatedCost, .largePartitionKeyEnabled {
+.estimatedCost,
+.largePartitionKeyEnabled {
   padding: @SmallSpace 0px @LargeSpace;
 }
 
@@ -109,18 +109,25 @@
 }
 
 .formTree {
-    border: 1px solid #969696;
+  border: 1px solid var(--colorNeutralStroke1);
-    color: #393939;
+  color: var(--colorNeutralForeground1);
+  background-color: var(--colorNeutralBackground1);
   padding: 0px 12px 1px 8px;
 }
 
 .formTree:hover {
-    border: 1px solid #969696;
+  border: 1px solid var(--colorNeutralStroke1Hover);
-    background-color: #e6f8fe;
+  background-color: var(--colorNeutralBackground1Hover);
+}
+
+.formTree::placeholder {
+  color: var(--colorNeutralForeground2);
+  opacity: 1;
 }
 
 .formTree:active {
-    border: 1px solid #1ebbee;
+  border: 1px solid var(--colorNeutralStroke1Pressed);
+  background-color: var(--colorNeutralBackground1Pressed);
 }
 
 .scaleForm {
@@ -139,7 +146,6 @@
   margin-bottom: 4px;
 }
 
-
 .spUdfTriggerHeader {
   padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace);
 }
@@ -151,33 +157,33 @@
 
 .unselectedRadio {
   background-color: white;
-    border-color: #EEE!important;
+  border-color: #eee !important;
   color: black !important;
 }
 
 .disabledRadio {
-    background-color: #A19F9D;
+  background-color: #a19f9d;
-    border-color: #EEE!important;
+  border-color: #eee !important;
   color: white !important;
 }
 
 .selectedRadio {
   background-color: @AccentMediumHigh;
-    border-color: #EEE!important;
+  border-color: #eee !important;
   color: white !important;
   cursor: pointer;
 }
 
 .selectedRadio:hover {
   background-color: @AccentMediumHigh;
-    border-color: #EEE!important;
+  border-color: #eee !important;
   color: white !important;
   cursor: pointer;
 }
 
 .selectedRadio:active {
   background-color: #0072c6;
-    border-color: #EEE!important;
+  border-color: #eee !important;
   color: white !important;
   cursor: pointer;
   border: 1px solid #0072c6;
@@ -204,8 +210,18 @@
 
 .trigger-field {
   width: 40%;
-    margin-top: 10px
+  margin-top: 10px;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
+
+.trigger-field input::placeholder {
+  color: var(--colorNeutralForeground3);
+  opacity: 1;
+}
+
 .trigger-form {
-    padding: 10px 30px 10px 30px;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+  padding: 10px 30px;
 }

less/hostedexplorer.less

@@ -255,7 +255,7 @@ body {
                 flex: 1;
                 padding-left: 34px;
                 padding-right: 34px;
-                color: @BaseDark;
+                color: var(--colorNeutralForeground1);
                 overflow-y: auto;
                 overflow-x: hidden;
                 margin: (2 * @MediumSpace) 0px;

less/tree.less

@@ -1,270 +0,0 @@
-@import "./Common/Constants";
-
-.resourceTree {
-  height: 100%;
-  flex: 0 0 auto;
-  .main {
-    height: 100%;
-  }
-}
-
-.resourceTreeScroll {
-  height: 100%;
-  display: flex;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding-right: 10px;
-}
-
-.userSelectNone {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-
-.treeHovermargin {
-  margin-left: 16px;
-}
-
-.highlight {
-  padding: @SmallSpace 2px;
-  outline: 0;
-
-  &:hover {
-    .hover();
-  }
-
-  &:active {
-    .active();
-  }
-
-  &:focus {
-    .focus();
-  }
-}
-
-.contextmenushowing {
-  background-color: #eee;
-}
-
-.collectionstree {
-  width: 100%;
-  margin-top: @DefaultSpace;
-
-  .databaseList {
-    list-style-type: none;
-    padding-left: 0px;
-
-    .collectionList {
-      padding-left: (2 * @MediumSpace);
-    }
-
-    .collectionChildList {
-      padding-left: @LargeSpace;
-    }
-
-    .databaseDocuments {
-      padding-left: (5 * @MediumSpace);
-    }
-  }
-}
-
-.pointerCursor {
-  cursor: pointer;
-}
-
-.menuEllipsis {
-  padding-right: 6px;
-  font-weight: bold;
-  font-size: 18px;
-  position: relative;
-  top: -5px;
-  left: 0px;
-  float: right;
-  display: none;
-  padding-left: 6px !important;
-  line-height: @TreeLineHeight;
-}
-
-.databaseMenu {
-  .flex-display();
-}
-
-.databaseMenu:hover .menuEllipsis,
-.databaseMenu:focus .menuEllipsis {
-  display: block;
-}
-
-.databaseCollChildTextOverflow {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  flex: 1;
-}
-
-.collectionMenu {
-  .flex-display();
-}
-
-.collectionMenu:hover .menuEllipsis,
-.collectionMenu:focus .menuEllipsis {
-  display: block;
-}
-
-.documentsMenu:hover .menuEllipsis,
-.documentsMenu:focus .menuEllipsis {
-  display: block;
-}
-
-.treeChildMenu {
-  display: flex;
-}
-
-.storedProcedureMenu:hover .menuEllipsis,
-.storedProcedureMenu:focus .menuEllipsis {
-  display: block;
-}
-
-.childMenu {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-left: (6 * @MediumSpace);
-  width: 100%;
-}
-
-.storedChildMenu:hover .menuEllipsis,
-.storedChildMenu:focus .menuEllipsis {
-  display: block;
-}
-
-.contextmenu6 {
-  top: -29px;
-}
-
-.userDefinedMenu:hover .contextmenu6 {
-  display: block;
-}
-
-.userDefinedchildMenu:hover .menuEllipsis,
-.userDefinedchildMenu:focus .menuEllipsis {
-  display: block;
-}
-
-.triggersMenu:hover .menuEllipsis,
-.triggersMenu:focus .menuEllipsis {
-  display: block;
-}
-
-.triggersChildMenu:hover .menuEllipsis,
-.triggersChildMenu:focus .menuEllipsis {
-  display: block;
-}
-
-.databaseId {
-  font-size: 14px;
-}
-
-.storedUdfTriggerMenu {
-  padding-left: 0px;
-}
-
-.collectionstree img {
-  width: 16px;
-  height: 16px;
-  vertical-align: text-top;
-}
-
-img.collectionsTreeCollapseExpand {
-  width: 10px;
-  height: 10px;
-  vertical-align: middle;
-  margin-bottom: 5px;
-}
-
-.collapsed::before {
-  content: "\23F5";
-  margin-left: 0px;
-  font-size: 15px;
-}
-
-.expanded::before {
-  content: "\23F7";
-  margin-left: 0px;
-  font-size: 15px;
-}
-
-.collectionMenuChildren {
-  padding-left: 42px;
-}
-
-.main-nav {
-  width: 100vh;
-  height: 40px;
-  background: white;
-  transform-origin: left top;
-  -webkit-transform-origin: left top;
-  -ms-transform-origin: left top;
-  transform: rotate(-90deg) translateX(-100%);
-  -webkit-transform: rotate(-90deg) translateX(-100%);
-  -ms-transform: rotate(-90deg) translateX(-100%);
-  border-bottom: 1px solid #ccc;
-}
-
-.main-nav-img {
-  width: 16px;
-  height: 16px;
-  margin: -32px 0 0 0;
-  transform: rotate(-90deg) translateX(-100%);
-  -webkit-transform: rotate(-90deg) translateX(-100%);
-  -ms-transform: rotate(-90deg) translateX(-100%);
-}
-
-.main-nav-img.main-nav-sub-img {
-  width: 16px;
-  height: 16px;
-  margin: 0px 0px 0 0;
-  transform: rotate(180deg) translateX(0%);
-  -webkit-transform: rotate(180deg) translateX(0%);
-  -ms-transform: rotate(180deg) translateX(0%);
-  position: absolute;
-  right: -8px;
-  top: 16px;
-}
-
-ul.nav {
-  margin: 0 auto;
-  margin-top: 0px;
-  margin-left: 0px;
-}
-
-.mini ul.nav li {
-  float: right;
-  line-height: 25px;
-  height: auto;
-  margin-top: 3px;
-}
-
-.spancolchildstyle {
-  padding: 4px;
-}
-
-.contextmenubutton {
-  float: right;
-  display: none;
-}
-
-.highlight:hover > .contextmenubutton {
-  display: unset;
-}
-
-.highlight:hover > .contextmenubutton::after {
-  content: "\2026";
-  font-size: 12px;
-}
-
-.showEllipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}

package-lock.json

@@ -116,8 +116,8 @@
         "tinykeys": "2.1.0",
         "underscore": "1.12.1",
         "utility-types": "3.10.0",
-        "web-vitals": "4.2.4",
         "uuid": "9.0.0",
+        "web-vitals": "4.2.4",
         "zustand": "3.5.0"
       },
       "devDependencies": {

playwright.config.ts

@@ -11,8 +11,8 @@ export default defineConfig({
   reporter: process.env.CI ? "blob" : "html",
   timeout: 10 * 60 * 1000,
   use: {
-    trace: "off",
+    trace: "retain-on-failure",
-    video: "off",
+    video: "retain-on-failure",
     screenshot: "on",
     testIdAttribute: "data-test",
     contextOptions: {

src/Common/LoadingOverlay.tsx

@@ -13,6 +13,7 @@ const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ isLoading, label }) =>
 
   return (
     <Overlay
+      data-test="loading-overlay"
       styles={{
         root: {
           backgroundColor: "rgba(255,255,255,0.9)",

src/Common/Upload/Upload.tsx

@@ -50,10 +50,33 @@ export const Upload: FunctionComponent<UploadProps> = ({
   const title = label + " to upload";
   return (
     <div>
-      <span className="renewUploadItemsHeader">{label}</span>
+      <span className="renewUploadItemsHeader" style={{ color: "var(--colorNeutralForeground1)" }}>
+        {label}
+      </span>
       {tooltip && <InfoTooltip>{tooltip}</InfoTooltip>}
       <Stack horizontal>
-        <TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} />
+        <TextField
+          styles={{
+            fieldGroup: {
+              width: 300,
+              backgroundColor: "var(--colorNeutralBackground3)",
+              borderColor: "var(--colorNeutralStroke1)",
+            },
+            field: {
+              backgroundColor: "var(--colorNeutralBackground3)",
+              color: "var(--colorNeutralForeground1)",
+            },
+            subComponentStyles: {
+              label: {
+                root: {
+                  color: "var(--colorNeutralForeground1)",
+                },
+              },
+            },
+          }}
+          readOnly
+          value={selectedFilesTitle.toString()}
+        />
         <input
           type="file"
           id="importFileInput"

src/Common/__snapshots__/LoadingOverlay.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`LoadingOverlay should handle long labels properly 1`] = `
 <div
   class="ms-Overlay root-109"
+  data-test="loading-overlay"
 >
   <div
     class="ms-Spinner root-111"
@@ -22,6 +23,7 @@ exports[`LoadingOverlay should handle long labels properly 1`] = `
 exports[`LoadingOverlay should render loading overlay when isLoading is true 1`] = `
 <div
   class="ms-Overlay root-109"
+  data-test="loading-overlay"
 >
   <div
     class="ms-Spinner root-111"
@@ -41,6 +43,7 @@ exports[`LoadingOverlay should render loading overlay when isLoading is true 1`]
 exports[`LoadingOverlay should render loading overlay with custom label 1`] = `
 <div
   class="ms-Overlay root-109"
+  data-test="loading-overlay"
 >
   <div
     class="ms-Spinner root-111"
@@ -60,6 +63,7 @@ exports[`LoadingOverlay should render loading overlay with custom label 1`] = `
 exports[`LoadingOverlay should render loading overlay with empty label 1`] = `
 <div
   class="ms-Overlay root-109"
+  data-test="loading-overlay"
 >
   <div
     class="ms-Spinner root-111"

src/Common/dataAccess/createStoredProcedure.ts

@@ -9,7 +9,7 @@ import {
   SqlStoredProcedureCreateUpdateParameters,
   SqlStoredProcedureResource,
 } from "../../Utils/arm/generatedClients/cosmos/types";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
@@ -20,6 +20,7 @@ export async function createStoredProcedure(
 ): Promise<StoredProcedureDefinition & Resource> {
   const clearMessage = logConsoleProgress(`Creating stored procedure ${storedProcedure.id}`);
   try {
+    let resource: StoredProcedureDefinition & Resource;
     if (
       userContext.authType === AuthType.AAD &&
       !userContext.features.enableSDKoperations &&
@@ -60,14 +61,16 @@ export async function createStoredProcedure(
         storedProcedure.id,
         createSprocParams,
       );
-      return rpResponse && (rpResponse.properties?.resource as StoredProcedureDefinition & Resource);
+      resource = rpResponse && (rpResponse.properties?.resource as StoredProcedureDefinition & Resource);
-    }
+    } else {
-
       const response = await client()
         .database(databaseId)
         .container(collectionId)
         .scripts.storedProcedures.create(storedProcedure);
-    return response?.resource;
+      resource = response.resource;
+    }
+    logConsoleInfo(`Successfully created stored procedure ${storedProcedure.id}`);
+    return resource;
   } catch (error) {
     handleError(error, "CreateStoredProcedure", `Error while creating stored procedure ${storedProcedure.id}`);
     throw error;

src/Common/dataAccess/createTrigger.ts

@@ -3,7 +3,7 @@ import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
 import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { SqlTriggerCreateUpdateParameters, SqlTriggerResource } from "../../Utils/arm/generatedClients/cosmos/types";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
@@ -14,6 +14,7 @@ export async function createTrigger(
 ): Promise<TriggerDefinition | SqlTriggerResource> {
   const clearMessage = logConsoleProgress(`Creating trigger ${trigger.id}`);
   try {
+    let resource: SqlTriggerResource | TriggerDefinition;
     if (
       userContext.authType === AuthType.AAD &&
       !userContext.features.enableSDKoperations &&
@@ -52,14 +53,16 @@ export async function createTrigger(
         trigger.id,
         createTriggerParams,
       );
-      return rpResponse && rpResponse.properties?.resource;
+      resource = rpResponse && rpResponse.properties?.resource;
-    }
+    } else {
-
+      const sdkResponse = await client()
-    const response = await client()
         .database(databaseId)
         .container(collectionId)
         .scripts.triggers.create(trigger as unknown as TriggerDefinition); // TODO: TypeScript does not like the SQL SDK trigger type
-    return response.resource;
+      resource = sdkResponse.resource;
+    }
+    logConsoleInfo(`Successfully created trigger ${trigger.id}`);
+    return resource;
   } catch (error) {
     handleError(error, "CreateTrigger", `Error while creating trigger ${trigger.id}`);
     throw error;

src/Common/dataAccess/createUserDefinedFunction.ts

@@ -9,7 +9,7 @@ import {
   SqlUserDefinedFunctionCreateUpdateParameters,
   SqlUserDefinedFunctionResource,
 } from "../../Utils/arm/generatedClients/cosmos/types";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
@@ -20,6 +20,7 @@ export async function createUserDefinedFunction(
 ): Promise<UserDefinedFunctionDefinition & Resource> {
   const clearMessage = logConsoleProgress(`Creating user defined function ${userDefinedFunction.id}`);
   try {
+    let resource: UserDefinedFunctionDefinition & Resource;
     if (
       userContext.authType === AuthType.AAD &&
       !userContext.features.enableSDKoperations &&
@@ -60,14 +61,17 @@ export async function createUserDefinedFunction(
         userDefinedFunction.id,
         createUDFParams,
       );
-      return rpResponse && (rpResponse.properties?.resource as UserDefinedFunctionDefinition & Resource);
-    }
 
+      resource = rpResponse && (rpResponse.properties?.resource as UserDefinedFunctionDefinition & Resource);
+    } else {
       const response = await client()
         .database(databaseId)
         .container(collectionId)
         .scripts.userDefinedFunctions.create(userDefinedFunction);
-    return response?.resource;
+      resource = response.resource;
+    }
+    logConsoleInfo(`Successfully created user defined function ${userDefinedFunction.id}`);
+    return resource;
   } catch (error) {
     handleError(
       error,

src/Common/dataAccess/dataTransfers.ts

@@ -1,3 +1,4 @@
+import { configContext } from "ConfigContext";
 import { ApiType, userContext } from "UserContext";
 import * as NotificationConsoleUtils from "Utils/NotificationConsoleUtils";
 import {
@@ -14,9 +15,12 @@ import {
   DataTransferJobFeedResults,
   DataTransferJobGetResults,
 } from "Utils/arm/generatedClients/dataTransferService/types";
+import { armRequest } from "Utils/arm/request";
 import { addToPolling, removeFromPolling, updateDataTransferJob, useDataTransferJobs } from "hooks/useDataTransferJobs";
 import promiseRetry, { AbortError, FailedAttemptError } from "p-retry";
 
+export const DATA_TRANSFER_JOB_API_VERSION = "2025-05-01-preview";
+
 export interface DataTransferParams {
   jobName: string;
   apiType: ApiType;
@@ -33,26 +37,34 @@ export const getDataTransferJobs = async (
   subscriptionId: string,
   resourceGroup: string,
   accountName: string,
+  signal?: AbortSignal,
 ): Promise<DataTransferJobGetResults[]> => {
   let dataTransferJobs: DataTransferJobGetResults[] = [];
   let dataTransferFeeds: DataTransferJobFeedResults = await listByDatabaseAccount(
     subscriptionId,
     resourceGroup,
     accountName,
+    signal,
   );
   dataTransferJobs = [...dataTransferJobs, ...(dataTransferFeeds?.value || [])];
   while (dataTransferFeeds?.nextLink) {
-    const nextResponse = await window.fetch(dataTransferFeeds.nextLink, {
+    /**
-      headers: {
+     * The `nextLink` URL returned by the Cosmos DB SQL API pointed to an incorrect endpoint, causing timeouts.
-        Authorization: userContext.authorizationToken,
+     * (i.e: https://cdbmgmtprodby.documents.azure.com:450/subscriptions/{subId}/resourceGroups/{rg}/providers/Microsoft.DocumentDB/databaseAccounts/{account}/sql/dataTransferJobs?$top=100&$skiptoken=...)
-      },
+     * We manipulate the URL by parsing it to extract the path and query parameters,
+     * then construct the correct URL for the Azure Resource Manager (ARM) API.
+     * This ensures that the request is made to the correct base URL (`configContext.ARM_ENDPOINT`),
+     * which is required for ARM operations.
+     */
+    const parsedUrl = new URL(dataTransferFeeds.nextLink);
+    const nextUrlPath = parsedUrl.pathname + parsedUrl.search;
+    dataTransferFeeds = await armRequest({
+      host: configContext.ARM_ENDPOINT,
+      path: nextUrlPath,
+      method: "GET",
+      apiVersion: DATA_TRANSFER_JOB_API_VERSION,
     });
-    if (nextResponse.ok) {
+    dataTransferJobs.push(...(dataTransferFeeds?.value || []));
-      dataTransferFeeds = await nextResponse.json();
-      dataTransferJobs = [...dataTransferJobs, ...(dataTransferFeeds?.value || [])];
-    } else {
-      break;
-    }
   }
   return dataTransferJobs;
 };

src/Common/dataAccess/deleteStoredProcedure.ts

@@ -28,6 +28,7 @@ export async function deleteStoredProcedure(
     } else {
       await client().database(databaseId).container(collectionId).scripts.storedProcedure(storedProcedureId).delete();
     }
+    logConsoleProgress(`Successfully deleted stored procedure ${storedProcedureId}`);
   } catch (error) {
     handleError(error, "DeleteStoredProcedure", `Error while deleting stored procedure ${storedProcedureId}`);
     throw error;

src/Common/dataAccess/deleteTrigger.ts

@@ -24,6 +24,7 @@ export async function deleteTrigger(databaseId: string, collectionId: string, tr
     } else {
       await client().database(databaseId).container(collectionId).scripts.trigger(triggerId).delete();
     }
+    logConsoleProgress(`Successfully deleted trigger ${triggerId}`);
   } catch (error) {
     handleError(error, "DeleteTrigger", `Error while deleting trigger ${triggerId}`);
     throw error;

src/Common/dataAccess/deleteUserDefinedFunction.ts

@@ -24,6 +24,7 @@ export async function deleteUserDefinedFunction(databaseId: string, collectionId
     } else {
       await client().database(databaseId).container(collectionId).scripts.userDefinedFunction(id).delete();
     }
+    logConsoleProgress(`Successfully deleted user defined function ${id}`);
   } catch (error) {
     handleError(error, "DeleteUserDefinedFunction", `Error while deleting user defined function ${id}`);
     throw error;

src/Contracts/MessageTypes.ts

@@ -50,4 +50,5 @@ export enum MessageTypes {
   OpenCESCVAFeedbackBlade,
   ActivateTab,
   OpenContainerCopyFeedbackBlade,
+  UpdateTheme,
 }

src/Contracts/ViewModels.ts

@@ -7,7 +7,7 @@ import {
   TriggerDefinition,
   UserDefinedFunctionDefinition,
 } from "@azure/cosmos";
-import Explorer from "../Explorer/Explorer";
+import type Explorer from "../Explorer/Explorer";
 import { ConsoleData } from "../Explorer/Menus/NotificationConsole/ConsoleData";
 import { CassandraTableKey, CassandraTableKeys } from "../Explorer/Tables/TableDataClient";
 import ConflictId from "../Explorer/Tree/ConflictId";
@@ -447,6 +447,9 @@ export interface DataExplorerInputsFrame {
   aadToken?: string;
   containerCopyEnabled?: boolean;
   sessionId?: string;
+  theme?: {
+    mode: number;
+  };
 }
 
 export interface SelfServeFrameInputs {
@@ -480,3 +483,6 @@ export interface DropdownOption<T> {
   value: T;
   disable?: boolean;
 }
+
+// Remove the duplicate Explorer interface and export the type
+export type { Explorer };

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AddManagedIdentity.tsx

@@ -35,6 +35,7 @@ const AddManagedIdentity: React.FC<AddManagedIdentityProps> = () => {
         <InfoTooltip content={managedIdentityTooltip} />
       </Text>
       <Toggle
+        data-test="btn-toggle"
         checked={systemAssigned}
         onText={ContainerCopyMessages.toggleBtn.onText}
         offText={ContainerCopyMessages.toggleBtn.offText}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AddReadPermissionToDefaultIdentity.tsx

@@ -65,6 +65,7 @@ const AddReadPermissionToDefaultIdentity: React.FC<AddReadPermissionToDefaultIde
         <InfoTooltip content={TooltipContent} />
       </Text>
       <Toggle
+        data-test="btn-toggle"
         checked={readPermissionAssigned}
         onText={ContainerCopyMessages.toggleBtn.onText}
         offText={ContainerCopyMessages.toggleBtn.offText}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/AssignPermissions.tsx

@@ -12,7 +12,7 @@ import { useCopyJobPrerequisitesCache } from "../../Utils/useCopyJobPrerequisite
 import usePermissionSections, { PermissionGroupConfig, PermissionSectionConfig } from "./hooks/usePermissionsSection";
 
 const PermissionSection: React.FC<PermissionSectionConfig> = ({ id, title, Component, completed, disabled }) => (
-  <AccordionItem key={id} value={id} disabled={disabled}>
+  <AccordionItem key={id} value={id} disabled={disabled} data-test="accordion-item">
     <AccordionHeader className="accordionHeader">
       <Text className="accordionHeaderText" variant="medium">
         {title}
@@ -25,13 +25,13 @@ const PermissionSection: React.FC<PermissionSectionConfig> = ({ id, title, Compo
         height={completed ? 20 : 24}
       />
     </AccordionHeader>
-    <AccordionPanel aria-disabled={disabled} className="accordionPanel">
+    <AccordionPanel aria-disabled={disabled} className="accordionPanel" data-test="accordion-panel">
       <Component />
     </AccordionPanel>
   </AccordionItem>
 );
 
-const PermissionGroup: React.FC<PermissionGroupConfig> = ({ title, description, sections }) => {
+const PermissionGroup: React.FC<PermissionGroupConfig> = ({ id, title, description, sections }) => {
   const [openItems, setOpenItems] = React.useState<string[]>([]);
 
   useEffect(() => {
@@ -44,6 +44,7 @@ const PermissionGroup: React.FC<PermissionGroupConfig> = ({ title, description,
 
   return (
     <Stack
+      data-test={`permission-group-container-${id}`}
       tokens={{ childrenGap: 15 }}
       styles={{
         root: {
@@ -99,7 +100,11 @@ const AssignPermissions = () => {
   }, []);
 
   return (
-    <Stack className="assignPermissionsContainer" tokens={{ childrenGap: 20 }}>
+    <Stack
+      data-test="Panel:AssignPermissionsContainer"
+      className="assignPermissionsContainer"
+      tokens={{ childrenGap: 20 }}
+    >
       <Text variant="medium">
         {isSameAccount && copyJobState.migrationType === CopyJobMigrationType.Online
           ? ContainerCopyMessages.assignPermissions.intraAccountOnlineDescription(

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/DefaultManagedIdentity.tsx

@@ -31,6 +31,7 @@ const DefaultManagedIdentity: React.FC<AddManagedIdentityProps> = () => {
         <InfoTooltip content={managedIdentityTooltip} />
       </div>
       <Toggle
+        data-test="btn-toggle"
         checked={defaultSystemAssigned}
         onText={ContainerCopyMessages.toggleBtn.onText}
         offText={ContainerCopyMessages.toggleBtn.offText}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/PointInTimeRestore.tsx

@@ -127,6 +127,7 @@ const PointInTimeRestore: React.FC = () => {
       <Stack.Item>
         {showRefreshButton ? (
           <PrimaryButton
+            data-test="pointInTimeRestore:RefreshBtn"
             className="fullWidth"
             text={ContainerCopyMessages.refreshButtonLabel}
             iconProps={{ iconName: "Refresh" }}
@@ -134,6 +135,7 @@ const PointInTimeRestore: React.FC = () => {
           />
         ) : (
           <PrimaryButton
+            data-test="pointInTimeRestore:PrimaryBtn"
             className="fullWidth"
             text={loading ? "" : ContainerCopyMessages.pointInTimeRestore.buttonText}
             {...(loading ? { iconProps: { iconName: "SyncStatusSolid" } } : {})}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AddManagedIdentity.test.tsx.snap

@@ -67,6 +67,7 @@ exports[`AddManagedIdentity Snapshot Tests renders initial state correctly 1`] =
         class="ms-Toggle-background pill-117"
         data-is-focusable="true"
         data-ktp-target="true"
+        data-test="btn-toggle"
         id="Toggle1"
         role="switch"
         type="button"
@@ -154,6 +155,7 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
         class="ms-Toggle-background pill-121"
         data-is-focusable="true"
         data-ktp-target="true"
+        data-test="btn-toggle"
         id="Toggle11"
         role="switch"
         type="button"
@@ -173,10 +175,12 @@ exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
   </div>
   <div
     class="ms-Stack popover-container foreground loading css-123"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <div
       class="ms-Overlay root-135"
+      data-test="loading-overlay"
     >
       <div
         class="ms-Spinner root-137"
@@ -323,6 +327,7 @@ exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover vi
         class="ms-Toggle-background pill-121"
         data-is-focusable="true"
         data-ktp-target="true"
+        data-test="btn-toggle"
         id="Toggle3"
         role="switch"
         type="button"
@@ -342,6 +347,7 @@ exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover vi
   </div>
   <div
     class="ms-Stack popover-container foreground css-123"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AddReadPermissionToDefaultIdentity.test.tsx.snap

@@ -41,6 +41,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Edge Cases should handle m
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle17"
           role="switch"
           type="button"
@@ -103,6 +104,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Edge Cases should handle m
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle16"
           role="switch"
           type="button"
@@ -165,6 +167,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Rendering should render co
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle3"
           role="switch"
           type="button"
@@ -227,6 +230,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Rendering should render co
           class="ms-Toggle-background pill-119"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle1"
           role="switch"
           type="button"
@@ -314,6 +318,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Rendering should render co
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle0"
           role="switch"
           type="button"
@@ -376,6 +381,7 @@ exports[`AddReadPermissionToDefaultIdentity Component Rendering should render co
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle2"
           role="switch"
           type="button"

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AssignPermissions.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -15,6 +16,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-testGroup"
       >
         <div
           class="ms-Stack css-113"
@@ -36,6 +38,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -85,6 +88,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -134,6 +138,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div>
                 Incomplete Component
@@ -142,6 +147,7 @@ exports[`AssignPermissions Component Accordion Behavior should render accordion
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___lyghz50_53x5ri0 f1s2aq7o f1c21dwh f1s184ao ft85np5 fwrgwhw"
@@ -201,6 +207,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -212,6 +219,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-testGroup"
       >
         <div
           class="ms-Stack css-113"
@@ -233,6 +241,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -282,6 +291,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -331,6 +341,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div>
                 Incomplete Component
@@ -339,6 +350,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___lyghz50_53x5ri0 f1s2aq7o f1c21dwh f1s184ao ft85np5 fwrgwhw"
@@ -398,6 +410,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -409,6 +422,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-testGroup"
       >
         <div
           class="ms-Stack css-113"
@@ -430,6 +444,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -479,6 +494,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -528,6 +544,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div>
                 Incomplete Component
@@ -536,6 +553,7 @@ exports[`AssignPermissions Component Edge Cases should calculate correct indent
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___lyghz50_53x5ri0 f1s2aq7o f1c21dwh f1s184ao ft85np5 fwrgwhw"
@@ -595,6 +613,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -606,6 +625,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-testGroup"
       >
         <div
           class="ms-Stack css-113"
@@ -627,6 +647,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -676,6 +697,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -725,6 +747,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div>
                 Incomplete Component
@@ -733,6 +756,7 @@ exports[`AssignPermissions Component Edge Cases should handle missing account na
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___lyghz50_53x5ri0 f1s2aq7o f1c21dwh f1s184ao ft85np5 fwrgwhw"
@@ -792,6 +816,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -803,6 +828,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-crossAccountConfigs"
       >
         <div
           class="ms-Stack css-113"
@@ -824,6 +850,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -875,6 +902,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
       </div>
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-onlineConfigs"
       >
         <div
           class="ms-Stack css-113"
@@ -896,6 +924,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -945,6 +974,7 @@ exports[`AssignPermissions Component Permission Groups should render multiple pe
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div
                 data-testid="online-copy-enabled"
@@ -964,6 +994,7 @@ exports[`AssignPermissions Component Permission Groups should render online migr
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -975,6 +1006,7 @@ exports[`AssignPermissions Component Permission Groups should render online migr
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-onlineConfigs"
       >
         <div
           class="ms-Stack css-113"
@@ -996,6 +1028,7 @@ exports[`AssignPermissions Component Permission Groups should render online migr
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -1045,6 +1078,7 @@ exports[`AssignPermissions Component Permission Groups should render online migr
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -1094,6 +1128,7 @@ exports[`AssignPermissions Component Permission Groups should render online migr
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div
                 data-testid="online-copy-enabled"
@@ -1113,6 +1148,7 @@ exports[`AssignPermissions Component Permission Groups should render permission
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -1124,6 +1160,7 @@ exports[`AssignPermissions Component Permission Groups should render permission
     >
       <div
         class="ms-Stack css-112"
+        data-test="permission-group-container-crossAccountConfigs"
       >
         <div
           class="ms-Stack css-113"
@@ -1145,6 +1182,7 @@ exports[`AssignPermissions Component Permission Groups should render permission
         >
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -1194,6 +1232,7 @@ exports[`AssignPermissions Component Permission Groups should render permission
           </div>
           <div
             class="fui-AccordionItem"
+            data-test="accordion-item"
           >
             <div
               class="fui-AccordionHeader accordionHeader ___kex8dp0_1udlp87 f19n0e5 f1c21dwh f1s184ao ft85np5"
@@ -1243,6 +1282,7 @@ exports[`AssignPermissions Component Permission Groups should render permission
             <div
               aria-disabled="false"
               class="fui-AccordionPanel accordionPanel ___1rufncu_1hx1scr f1axvtxu"
+              data-test="accordion-panel"
             >
               <div
                 data-testid="add-read-permission"
@@ -1262,6 +1302,7 @@ exports[`AssignPermissions Component Rendering should render without crashing wi
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"
@@ -1283,6 +1324,7 @@ exports[`AssignPermissions Component Rendering should render without crashing wi
 <div>
   <div
     class="ms-Stack assignPermissionsContainer css-109"
+    data-test="Panel:AssignPermissionsContainer"
   >
     <span
       class="css-110"

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/DefaultManagedIdentity.test.tsx.snap

@@ -41,6 +41,7 @@ exports[`DefaultManagedIdentity Edge Cases should handle missing account name gr
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle14"
           role="switch"
           type="button"
@@ -103,6 +104,7 @@ exports[`DefaultManagedIdentity Edge Cases should handle null account 1`] = `
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle15"
           role="switch"
           type="button"
@@ -165,6 +167,7 @@ exports[`DefaultManagedIdentity Loading States should render loading state snaps
           class="ms-Toggle-background pill-119"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle10"
           role="switch"
           type="button"
@@ -256,6 +259,7 @@ exports[`DefaultManagedIdentity Rendering should render correctly with default s
           class="ms-Toggle-background pill-115"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle0"
           role="switch"
           type="button"
@@ -318,6 +322,7 @@ exports[`DefaultManagedIdentity Toggle Interactions should render toggle with ch
           class="ms-Toggle-background pill-119"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="btn-toggle"
           id="Toggle7"
           role="switch"
           type="button"

src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/PointInTimeRestore.test.tsx.snap

@@ -56,6 +56,7 @@ exports[`PointInTimeRestore Initial Render should render correctly with default
       <button
         class="ms-Button ms-Button--primary fullWidth root-115"
         data-is-focusable="true"
+        data-test="pointInTimeRestore:PrimaryBtn"
         type="button"
       >
         <span
@@ -131,6 +132,7 @@ exports[`PointInTimeRestore Initial Render should render with empty account name
       <button
         class="ms-Button ms-Button--primary fullWidth root-115"
         data-is-focusable="true"
+        data-test="pointInTimeRestore:PrimaryBtn"
         type="button"
       >
         <span
@@ -161,6 +163,7 @@ exports[`PointInTimeRestore Snapshots should match snapshot in loading state 1`]
   >
     <div
       class="ms-Overlay root-123"
+      data-test="loading-overlay"
     >
       <div
         class="ms-Spinner root-125"
@@ -223,6 +226,7 @@ exports[`PointInTimeRestore Snapshots should match snapshot in loading state 1`]
         aria-disabled="true"
         class="ms-Button ms-Button--primary is-disabled fullWidth root-128"
         data-is-focusable="false"
+        data-test="pointInTimeRestore:PrimaryBtn"
         disabled=""
         type="button"
       >
@@ -301,6 +305,7 @@ exports[`PointInTimeRestore Snapshots should match snapshot with refresh button
       <button
         class="ms-Button ms-Button--primary fullWidth root-115"
         data-is-focusable="true"
+        data-test="pointInTimeRestore:RefreshBtn"
         type="button"
       >
         <span

src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/NavigationControls.tsx

@@ -19,9 +19,21 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
   isPreviousDisabled,
 }) => (
   <Stack horizontal tokens={{ childrenGap: 20 }}>
-    <PrimaryButton text={primaryBtnText} onClick={onPrimary} allowDisabledFocus disabled={isPrimaryDisabled} />
+    <PrimaryButton
-    <DefaultButton text="Previous" onClick={onPrevious} allowDisabledFocus disabled={isPreviousDisabled} />
+      data-test="copy-job-primary"
-    <DefaultButton text="Cancel" onClick={onCancel} />
+      text={primaryBtnText}
+      onClick={onPrimary}
+      allowDisabledFocus
+      disabled={isPrimaryDisabled}
+    />
+    <DefaultButton
+      data-test="copy-job-previous"
+      text="Previous"
+      onClick={onPrevious}
+      allowDisabledFocus
+      disabled={isPreviousDisabled}
+    />
+    <DefaultButton data-test="copy-job-cancel" text="Cancel" onClick={onCancel} />
   </Stack>
 );
 

src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/PopoverContainer.tsx

@@ -17,6 +17,7 @@ const PopoverContainer: React.FC<PopoverContainerProps> = React.memo(
   ({ isLoading = false, title, children, onPrimary, onCancel }) => {
     return (
       <Stack
+        data-test="popover-container"
         className={`popover-container foreground ${isLoading ? "loading" : ""}`}
         tokens={{ childrenGap: 20 }}
         style={{ maxWidth: 450 }}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/__snapshots__/PopoverContainer.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`PopoverMessage Component Edge Cases should handle empty string title 1`
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
@@ -71,6 +72,7 @@ exports[`PopoverMessage Component Edge Cases should handle null children 1`] = `
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
@@ -133,6 +135,7 @@ exports[`PopoverMessage Component Edge Cases should handle undefined children 1`
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
@@ -195,6 +198,7 @@ exports[`PopoverMessage Component Edge Cases should handle very long title 1`] =
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
@@ -266,6 +270,7 @@ exports[`PopoverMessage Component Rendering should render correctly when visible
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
@@ -335,6 +340,7 @@ exports[`PopoverMessage Component Rendering should render correctly with differe
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
@@ -409,6 +415,7 @@ exports[`PopoverMessage Component Rendering should render correctly with differe
 <div>
   <div
     class="ms-Stack popover-container foreground css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <span
@@ -478,6 +485,7 @@ exports[`PopoverMessage Component Rendering should render correctly with loading
 <div>
   <div
     class="ms-Stack popover-container foreground loading css-109"
+    data-test="popover-container"
     style="max-width: 450px;"
   >
     <div

src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateCopyJobScreens.tsx

@@ -22,6 +22,7 @@ const CreateCopyJobScreens: React.FC = () => {
       <Stack.Item className="createCopyJobScreensContent">
         {contextError && (
           <MessageBar
+            data-test="Panel:ErrorContainer"
             className="createCopyJobErrorMessageBar"
             messageBarType={MessageBarType.blocked}
             isMultiline={false}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/PreviewCopyJob/PreviewCopyJob.tsx

@@ -31,17 +31,17 @@ const PreviewCopyJob: React.FC = () => {
     }));
   };
   return (
-    <Stack tokens={{ childrenGap: 20 }} className="previewCopyJobContainer">
+    <Stack tokens={{ childrenGap: 20 }} className="previewCopyJobContainer" data-test="Panel:PreviewCopyJob">
       <FieldRow label={ContainerCopyMessages.jobNameLabel}>
-        <TextField value={jobName} onChange={onJobNameChange} />
+        <TextField data-test="job-name-textfield" value={jobName} onChange={onJobNameChange} />
       </FieldRow>
       <Stack>
         <Text className="bold">{ContainerCopyMessages.sourceSubscriptionLabel}</Text>
-        <Text>{copyJobState.source?.subscription?.displayName}</Text>
+        <Text data-test="source-subscription-name">{copyJobState.source?.subscription?.displayName}</Text>
       </Stack>
       <Stack>
         <Text className="bold">{ContainerCopyMessages.sourceAccountLabel}</Text>
-        <Text>{copyJobState.source?.account?.name}</Text>
+        <Text data-test="source-account-name">{copyJobState.source?.account?.name}</Text>
       </Stack>
       <Stack>
         <DetailsList

src/Explorer/ContainerCopy/CreateCopyJob/Screens/PreviewCopyJob/__snapshots__/PreviewCopyJob.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`PreviewCopyJob should handle special characters in database and container names 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -32,6 +33,7 @@ exports[`PreviewCopyJob should handle special characters in database and contain
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField84"
               type="text"
               value="job-with@special#chars_123"
@@ -51,6 +53,7 @@ exports[`PreviewCopyJob should handle special characters in database and contain
     </span>
     <span
       class="css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -65,6 +68,7 @@ exports[`PreviewCopyJob should handle special characters in database and contain
     </span>
     <span
       class="css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -321,6 +325,7 @@ exports[`PreviewCopyJob should handle special characters in database and contain
 exports[`PreviewCopyJob should render component with cross-subscription setup 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -350,6 +355,7 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField96"
               type="text"
               value=""
@@ -369,6 +375,7 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
     </span>
     <span
       class="css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -383,6 +390,7 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
     </span>
     <span
       class="css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -639,6 +647,7 @@ exports[`PreviewCopyJob should render component with cross-subscription setup 1`
 exports[`PreviewCopyJob should render with default state and empty job name 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -668,6 +677,7 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField0"
               type="text"
               value=""
@@ -687,6 +697,7 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
     </span>
     <span
       class="css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -701,6 +712,7 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
     </span>
     <span
       class="css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -957,6 +969,7 @@ exports[`PreviewCopyJob should render with default state and empty job name 1`]
 exports[`PreviewCopyJob should render with long subscription and account names 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -986,6 +999,7 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField60"
               type="text"
               value=""
@@ -1005,6 +1019,7 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
     </span>
     <span
       class="css-125"
+      data-test="source-subscription-name"
     >
       This is a very long subscription name that might cause display issues if not handled properly
     </span>
@@ -1019,6 +1034,7 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
     </span>
     <span
       class="css-125"
+      data-test="source-account-name"
     >
       this-is-a-very-long-database-account-name-that-might-cause-display-issues
     </span>
@@ -1275,6 +1291,7 @@ exports[`PreviewCopyJob should render with long subscription and account names 1
 exports[`PreviewCopyJob should render with missing source account information 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -1304,6 +1321,7 @@ exports[`PreviewCopyJob should render with missing source account information 1`
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField36"
               type="text"
               value=""
@@ -1323,6 +1341,7 @@ exports[`PreviewCopyJob should render with missing source account information 1`
     </span>
     <span
       class="css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -1588,6 +1607,7 @@ exports[`PreviewCopyJob should render with missing source account information 1`
 exports[`PreviewCopyJob should render with missing source subscription information 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -1617,6 +1637,7 @@ exports[`PreviewCopyJob should render with missing source subscription informati
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField24"
               type="text"
               value=""
@@ -1645,6 +1666,7 @@ exports[`PreviewCopyJob should render with missing source subscription informati
     </span>
     <span
       class="css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -1901,6 +1923,7 @@ exports[`PreviewCopyJob should render with missing source subscription informati
 exports[`PreviewCopyJob should render with online migration type 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -1930,6 +1953,7 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField72"
               type="text"
               value="online-migration-job"
@@ -1949,6 +1973,7 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
     </span>
     <span
       class="css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -1963,6 +1988,7 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
     </span>
     <span
       class="css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -2219,6 +2245,7 @@ exports[`PreviewCopyJob should render with online migration type 1`] = `
 exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -2248,6 +2275,7 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField12"
               type="text"
               value="custom-job-name-123"
@@ -2267,6 +2295,7 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
     </span>
     <span
       class="css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -2281,6 +2310,7 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
     </span>
     <span
       class="css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>
@@ -2537,6 +2567,7 @@ exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
 exports[`PreviewCopyJob should render with undefined database and container names 1`] = `
 <div
   class="ms-Stack previewCopyJobContainer css-109"
+  data-test="Panel:PreviewCopyJob"
 >
   <div
     class="ms-Stack flex-row css-110"
@@ -2566,6 +2597,7 @@ exports[`PreviewCopyJob should render with undefined database and container name
             <input
               aria-invalid="false"
               class="ms-TextField-field field-115"
+              data-test="job-name-textfield"
               id="TextField48"
               type="text"
               value=""
@@ -2585,6 +2617,7 @@ exports[`PreviewCopyJob should render with undefined database and container name
     </span>
     <span
       class="css-125"
+      data-test="source-subscription-name"
     >
       Test Subscription
     </span>
@@ -2599,6 +2632,7 @@ exports[`PreviewCopyJob should render with undefined database and container name
     </span>
     <span
       class="css-125"
+      data-test="source-account-name"
     >
       test-account
     </span>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/AccountDropdown.test.tsx

@@ -9,7 +9,7 @@ import ContainerCopyMessages from "../../../../ContainerCopyMessages";
 import { CopyJobContext } from "../../../../Context/CopyJobContext";
 import { CopyJobMigrationType } from "../../../../Enums/CopyJobEnums";
 import { CopyJobContextProviderType, CopyJobContextState } from "../../../../Types/CopyJobTypes";
-import { AccountDropdown } from "./AccountDropdown";
+import { AccountDropdown, normalizeAccountId } from "./AccountDropdown";
 
 jest.mock("../../../../../../hooks/useDatabaseAccounts");
 jest.mock("../../../../../../UserContext", () => ({
@@ -202,13 +202,16 @@ describe("AccountDropdown", () => {
 
       const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
       const newState = stateUpdateFunction(mockCopyJobState);
-      expect(newState.source.account).toBe(mockDatabaseAccount1);
+      expect(newState.source.account).toEqual({
+        ...mockDatabaseAccount1,
+        id: normalizeAccountId(mockDatabaseAccount1.id),
+      });
     });
 
     it("should auto-select predefined account from userContext if available", async () => {
       const userContextAccount = {
         ...mockDatabaseAccount2,
-        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/account2",
+        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDB/databaseAccounts/account2",
       };
 
       (userContext as any).databaseAccount = userContextAccount;
@@ -223,7 +226,10 @@ describe("AccountDropdown", () => {
 
       const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
       const newState = stateUpdateFunction(mockCopyJobState);
-      expect(newState.source.account).toBe(mockDatabaseAccount2);
+      expect(newState.source.account).toEqual({
+        ...mockDatabaseAccount2,
+        id: normalizeAccountId(mockDatabaseAccount2.id),
+      });
     });
 
     it("should keep current account if it exists in the filtered list", async () => {
@@ -248,7 +254,16 @@ describe("AccountDropdown", () => {
 
       const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
       const newState = stateUpdateFunction(contextWithSelectedAccount.copyJobState);
-      expect(newState).toBe(contextWithSelectedAccount.copyJobState);
+      expect(newState).toEqual({
+        ...contextWithSelectedAccount.copyJobState,
+        source: {
+          ...contextWithSelectedAccount.copyJobState.source,
+          account: {
+            ...mockDatabaseAccount1,
+            id: normalizeAccountId(mockDatabaseAccount1.id),
+          },
+        },
+      });
     });
 
     it("should handle account change when user selects different account", async () => {
@@ -272,7 +287,7 @@ describe("AccountDropdown", () => {
     it("should normalize account ID for Portal platform", () => {
       const portalAccount = {
         ...mockDatabaseAccount1,
-        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/account1",
+        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDB/databaseAccounts/account1",
       };
 
       (configContext as any).platform = Platform.Portal;

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/AccountDropdown.tsx

@@ -12,7 +12,7 @@ import FieldRow from "../../Components/FieldRow";
 
 interface AccountDropdownProps {}
 
-const normalizeAccountId = (id: string) => {
+export const normalizeAccountId = (id: string = "") => {
   if (configContext.platform === Platform.Portal) {
     return id.replace("/Microsoft.DocumentDb/", "/Microsoft.DocumentDB/");
   } else if (configContext.platform === Platform.Hosted) {
@@ -27,7 +27,12 @@ export const AccountDropdown: React.FC<AccountDropdownProps> = () => {
 
   const selectedSubscriptionId = copyJobState?.source?.subscription?.subscriptionId;
   const allAccounts: DatabaseAccount[] = useDatabaseAccounts(selectedSubscriptionId);
-  const sqlApiOnlyAccounts: DatabaseAccount[] = (allAccounts || []).filter((account) => apiType(account) === "SQL");
+  const sqlApiOnlyAccounts = (allAccounts || [])
+    .filter((account) => apiType(account) === "SQL")
+    .map((account) => ({
+      ...account,
+      id: normalizeAccountId(account.id),
+    }));
 
   const updateCopyJobState = (newAccount: DatabaseAccount) => {
     setCopyJobState((prevState) => {
@@ -47,7 +52,7 @@ export const AccountDropdown: React.FC<AccountDropdownProps> = () => {
   useEffect(() => {
     if (sqlApiOnlyAccounts && sqlApiOnlyAccounts.length > 0 && selectedSubscriptionId) {
       const currentAccountId = copyJobState?.source?.account?.id;
-      const predefinedAccountId = userContext.databaseAccount?.id;
+      const predefinedAccountId = normalizeAccountId(userContext.databaseAccount?.id);
       const selectedAccountId = currentAccountId || predefinedAccountId;
 
       const targetAccount: DatabaseAccount | null =
@@ -58,7 +63,7 @@ export const AccountDropdown: React.FC<AccountDropdownProps> = () => {
 
   const accountOptions =
     sqlApiOnlyAccounts?.map((account) => ({
-      key: normalizeAccountId(account.id),
+      key: account.id,
       text: account.name,
       data: account,
     })) || [];

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/MigrationTypeCheckbox.tsx

@@ -10,7 +10,7 @@ interface MigrationTypeCheckboxProps {
 }
 
 export const MigrationTypeCheckbox: React.FC<MigrationTypeCheckboxProps> = React.memo(({ checked, onChange }) => (
-  <Stack horizontal horizontalAlign="space-between" className="migrationTypeRow">
+  <Stack horizontal horizontalAlign="space-between" className="migrationTypeRow" data-test="migration-type-checkbox">
     <Checkbox label={ContainerCopyMessages.migrationTypeCheckboxLabel} checked={checked} onChange={onChange} />
   </Stack>
 ));

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/__snapshots__/MigrationTypeCheckbox.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`MigrationTypeCheckbox Component Rendering should render in checked state 1`] = `
 <div
   class="ms-Stack migrationTypeRow css-109"
+  data-test="migration-type-checkbox"
 >
   <div
     class="ms-Checkbox is-checked is-enabled root-119"
@@ -43,6 +44,7 @@ exports[`MigrationTypeCheckbox Component Rendering should render in checked stat
 exports[`MigrationTypeCheckbox Component Rendering should render with default props (unchecked state) 1`] = `
 <div
   class="ms-Stack migrationTypeRow css-109"
+  data-test="migration-type-checkbox"
 >
   <div
     class="ms-Checkbox is-enabled root-110"

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/SelectSourceAndTargetContainers.tsx

@@ -47,7 +47,11 @@ const SelectSourceAndTargetContainers = ({ showAddCollectionPanel }: SelectSourc
   const onDropdownChange = dropDownChangeHandler(setCopyJobState);
 
   return (
-    <Stack className="selectSourceAndTargetContainers" tokens={{ childrenGap: 25 }}>
+    <Stack
+      data-test="Panel:SelectSourceAndTargetContainers"
+      className="selectSourceAndTargetContainers"
+      tokens={{ childrenGap: 25 }}
+    >
       <span>{ContainerCopyMessages.selectSourceAndTargetContainersDescription}</span>
       <DatabaseContainerSection
         heading={ContainerCopyMessages.sourceContainerSubHeading}
@@ -59,6 +63,7 @@ const SelectSourceAndTargetContainers = ({ showAddCollectionPanel }: SelectSourc
         selectedContainer={source?.containerId}
         containerDisabled={!source?.databaseId}
         containerOnChange={onDropdownChange("sourceContainer")}
+        sectionType="source"
       />
       <DatabaseContainerSection
         heading={ContainerCopyMessages.targetContainerSubHeading}
@@ -71,6 +76,7 @@ const SelectSourceAndTargetContainers = ({ showAddCollectionPanel }: SelectSourc
         containerDisabled={!target?.databaseId}
         containerOnChange={onDropdownChange("targetContainer")}
         handleOnDemandCreateContainer={showAddCollectionPanel}
+        sectionType="target"
       />
     </Stack>
   );

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/components/DatabaseContainerSection.test.tsx

@@ -32,6 +32,7 @@ describe("DatabaseContainerSection", () => {
     selectedContainer: "container1",
     containerDisabled: false,
     containerOnChange: mockContainerOnChange,
+    sectionType: "source",
   };
 
   beforeEach(() => {
@@ -292,6 +293,7 @@ describe("DatabaseContainerSection", () => {
         containerOptions: mockContainerOptions,
         selectedContainer: "container1",
         containerOnChange: mockContainerOnChange,
+        sectionType: "source",
       };
 
       render(<DatabaseContainerSection {...minimalProps} />);
@@ -393,6 +395,7 @@ describe("DatabaseContainerSection", () => {
         containerOptions: [{ key: "c1", text: "Container 1", data: { id: "c1" } }],
         selectedContainer: "c1",
         containerOnChange: jest.fn(),
+        sectionType: "source",
       };
 
       const { container } = render(<DatabaseContainerSection {...minimalProps} />);
@@ -411,6 +414,7 @@ describe("DatabaseContainerSection", () => {
         containerDisabled: false,
         containerOnChange: jest.fn(),
         handleOnDemandCreateContainer: jest.fn(),
+        sectionType: "target",
       };
 
       const { container } = render(<DatabaseContainerSection {...fullProps} />);
@@ -428,6 +432,7 @@ describe("DatabaseContainerSection", () => {
         selectedContainer: "container1",
         containerDisabled: true,
         containerOnChange: jest.fn(),
+        sectionType: "target",
       };
 
       const { container } = render(<DatabaseContainerSection {...disabledProps} />);
@@ -443,6 +448,7 @@ describe("DatabaseContainerSection", () => {
         containerOptions: [],
         selectedContainer: "",
         containerOnChange: jest.fn(),
+        sectionType: "target",
       };
 
       const { container } = render(<DatabaseContainerSection {...emptyOptionsProps} />);

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/components/DatabaseContainerSection.tsx

@@ -15,6 +15,7 @@ export const DatabaseContainerSection = ({
   containerDisabled,
   containerOnChange,
   handleOnDemandCreateContainer,
+  sectionType,
 }: DatabaseContainerSectionProps) => (
   <Stack tokens={{ childrenGap: 15 }} className="databaseContainerSection">
     <label className="subHeading">{heading}</label>
@@ -27,6 +28,7 @@ export const DatabaseContainerSection = ({
         disabled={!!databaseDisabled}
         selectedKey={selectedDatabase}
         onChange={databaseOnChange}
+        data-test={`${sectionType}-databaseDropdown`}
       />
     </FieldRow>
     <FieldRow label={ContainerCopyMessages.containerDropdownLabel}>
@@ -39,6 +41,7 @@ export const DatabaseContainerSection = ({
           disabled={!!containerDisabled}
           selectedKey={selectedContainer}
           onChange={containerOnChange}
+          data-test={`${sectionType}-containerDropdown`}
         />
         {handleOnDemandCreateContainer && (
           <ActionButton className="create-container-link-btn" onClick={() => handleOnDemandCreateContainer()}>

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/components/__snapshots__/DatabaseContainerSection.test.tsx.snap

@@ -37,6 +37,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with all pro
           class="ms-Dropdown is-required dropdown-112"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="target-databaseDropdown"
           id="Dropdown98"
           role="combobox"
           tabindex="0"
@@ -94,6 +95,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with all pro
             class="ms-Dropdown is-required dropdown-112"
             data-is-focusable="true"
             data-ktp-target="true"
+            data-test="target-containerDropdown"
             id="Dropdown99"
             role="combobox"
             tabindex="0"
@@ -182,6 +184,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with disable
           class="ms-Dropdown is-disabled is-required dropdown-143"
           data-is-focusable="false"
           data-ktp-target="true"
+          data-test="target-databaseDropdown"
           id="Dropdown103"
           role="combobox"
           tabindex="-1"
@@ -239,6 +242,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with disable
             class="ms-Dropdown is-disabled is-required dropdown-143"
             data-is-focusable="false"
             data-ktp-target="true"
+            data-test="target-containerDropdown"
             id="Dropdown104"
             role="combobox"
             tabindex="-1"
@@ -306,6 +310,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with empty o
           class="ms-Dropdown is-required dropdown-112"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="target-databaseDropdown"
           id="Dropdown105"
           role="combobox"
           tabindex="0"
@@ -363,6 +368,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with empty o
             class="ms-Dropdown is-required dropdown-112"
             data-is-focusable="true"
             data-ktp-target="true"
+            data-test="target-containerDropdown"
             id="Dropdown106"
             role="combobox"
             tabindex="0"
@@ -430,6 +436,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with minimal
           class="ms-Dropdown is-required dropdown-112"
           data-is-focusable="true"
           data-ktp-target="true"
+          data-test="source-databaseDropdown"
           id="Dropdown96"
           role="combobox"
           tabindex="0"
@@ -487,6 +494,7 @@ exports[`DatabaseContainerSection Snapshot Testing matches snapshot with minimal
             class="ms-Dropdown is-required dropdown-112"
             data-is-focusable="true"
             data-ktp-target="true"
+            data-test="source-containerDropdown"
             id="Dropdown97"
             role="combobox"
             tabindex="0"

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobActionMenu.tsx

@@ -83,6 +83,7 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
 
   return (
     <IconButton
+      data-test={`CopyJobActionMenu/Button:${job.Name}`}
       role="button"
       iconProps={{ iconName: "More", styles: { root: { fontSize: "20px", fontWeight: "bold" } } }}
       menuProps={{ items: getMenuItems() }}

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobsList.tsx

@@ -80,6 +80,7 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
         <Stack.Item verticalFill={true} grow={1} shrink={1} style={styles.stackItem}>
           <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
             <ShimmeredDetailsList
+              className="CopyJobListContainer"
               onRenderRow={_onRenderRow}
               checkboxVisibility={2}
               columns={columns}

src/Explorer/ContainerCopy/Types/CopyJobTypes.ts

@@ -49,6 +49,7 @@ export interface DatabaseContainerSectionProps {
   containerDisabled?: boolean;
   containerOnChange: (ev: React.FormEvent<HTMLDivElement>, option: DropdownOptionType) => void;
   handleOnDemandCreateContainer?: () => void;
+  sectionType: "source" | "target";
 }
 
 export interface CopyJobContextState {

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -58,7 +58,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
           aria-expanded={this.state.isExpanded}
         >
           <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
-          <Label>{this.props.title}</Label>
+          <Label styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>{this.props.title}</Label>
           {this.props.tooltipContent && (
             <TooltipHost
               directionalHint={DirectionalHint.bottomLeftEdge}
@@ -79,6 +79,14 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
                 id={`delete-${this.props.title.split(" ").join("-")}`}
                 iconProps={{ iconName: "Delete" }}
                 style={{ height: 27, marginRight: "20px" }}
+                styles={{
+                  rootHovered: {
+                    backgroundColor: "transparent",
+                  },
+                  rootPressed: {
+                    backgroundColor: "transparent",
+                  },
+                }}
                 onClick={(event) => {
                   event.stopPropagation();
                   this.props.onDelete();

src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap

@@ -20,7 +20,15 @@ exports[`CollapsibleSectionComponent renders 1`] = `
     <Icon
       iconName="ChevronDown"
     />
-    <StyledLabelBase>
+    <StyledLabelBase
+      styles={
+        {
+          "root": {
+            "color": "var(--colorNeutralForeground1)",
+          },
+        }
+      }
+    >
       Sample title
     </StyledLabelBase>
   </Stack>

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -58,6 +58,26 @@ export interface CommandButtonComponentProps {
    */
   tooltipText?: string;
 
+  /**
+   * Custom styles to apply to the button using Fluent UI theme tokens
+   */
+  styles?: {
+    root?: {
+      backgroundColor?: string;
+      color?: string;
+      selectors?: {
+        ":hover"?: {
+          backgroundColor?: string;
+          color?: string;
+        };
+        ":active"?: {
+          backgroundColor?: string;
+          color?: string;
+        };
+      };
+    };
+  };
+
   /**
    * tabindex for the command button
    */
@@ -250,6 +270,8 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
       contentClassName += " hasHiddenItems";
     }
 
+    const style = this.props.styles?.root || {};
+
     return (
       <div className="commandButtonReact">
         <span
@@ -262,6 +284,7 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
           aria-disabled={this.props.disabled}
           aria-haspopup={this.props.hasPopup}
           aria-label={this.props.ariaLabel}
+          style={style}
           onClick={(e: React.MouseEvent<HTMLSpanElement>) => this.commandClickCallback(e)}
         >
           <div className={contentClassName}>

src/Explorer/Controls/Dialog.tsx

@@ -179,8 +179,18 @@ export const Dialog: FC = () => {
       title,
       subText,
       styles: {
-        title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT },
+        title: {
-        subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE },
+          fontSize: DIALOG_TITLE_FONT_SIZE,
+          fontWeight: DIALOG_TITLE_FONT_WEIGHT,
+        },
+        subText: {
+          fontSize: DIALOG_SUBTEXT_FONT_SIZE,
+          color: "var(--colorNeutralForeground2)",
+        },
+        content: {
+          backgroundColor: "var(--colorNeutralBackground1)",
+          color: "var(--colorNeutralForeground1)",
+        },
       },
       showCloseButton: showCloseButton || false,
       onDismiss,
@@ -188,18 +198,60 @@ export const Dialog: FC = () => {
     modalProps: { isBlocking: isModal, isDarkOverlay: false },
     minWidth: DIALOG_MIN_WIDTH,
     maxWidth: DIALOG_MAX_WIDTH,
+    styles: {
+      main: {
+        backgroundColor: "var(--colorNeutralBackground1)",
+        selectors: {
+          ".ms-Dialog-title": { color: "var(--colorNeutralForeground1)" },
+        },
+      },
+    },
   };
 
   const primaryButtonProps: IButtonProps = {
     text: primaryButtonText,
     disabled: primaryButtonDisabled || false,
     onClick: onPrimaryButtonClick,
+    styles: {
+      root: {
+        backgroundColor: "var(--colorBrandBackground)",
+        color: "var(--colorNeutralForegroundOnBrand)",
+        selectors: {
+          ":hover": {
+            backgroundColor: "var(--colorBrandBackgroundHover)",
+            color: "var(--colorNeutralForegroundOnBrand)",
+          },
+          ":active": {
+            backgroundColor: "var(--colorBrandBackgroundPressed)",
+            color: "var(--colorNeutralForegroundOnBrand)",
+          },
+        },
+      },
+    },
   };
   const secondaryButtonProps: IButtonProps =
     secondaryButtonText && onSecondaryButtonClick
       ? {
           text: secondaryButtonText,
           onClick: onSecondaryButtonClick,
+          styles: {
+            root: {
+              backgroundColor: "var(--colorNeutralBackground2)",
+              color: "var(--colorNeutralForeground1)",
+              borderColor: "var(--colorNeutralStroke1)",
+              selectors: {
+                ":hover": {
+                  backgroundColor: "var(--colorNeutralBackground3)",
+                  color: "var(--colorNeutralForeground1)",
+                },
+                ":active": {
+                  backgroundColor: "var(--colorNeutralBackground3)",
+                  color: "var(--colorNeutralForeground1)",
+                  borderColor: "var(--colorCompoundBrandStroke1)",
+                },
+              },
+            },
+          },
         }
       : undefined;
   return visible ? (

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -1,4 +1,5 @@
 import { Spinner, SpinnerSize } from "@fluentui/react";
+import { monacoTheme, useThemeStore } from "hooks/useTheme";
 import * as React from "react";
 import { loadMonaco, monaco } from "../../LazyMonaco";
 // import "./EditorReact.less";
@@ -66,6 +67,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
   private rootNode: HTMLElement;
   public editor: monaco.editor.IStandaloneCodeEditor;
   private selectionListener: monaco.IDisposable;
+  private themeUnsubscribe: () => void;
   monacoApi: {
     default: typeof monaco;
     Emitter: typeof monaco.Emitter;
@@ -94,6 +96,13 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
   public componentDidMount(): void {
     this.createEditor(this.configureEditor.bind(this));
 
+    this.themeUnsubscribe = useThemeStore.subscribe((state) => {
+      if (this.editor) {
+        const newTheme = state.isDarkMode ? "vs-dark" : "vs";
+        this.monacoApi?.editor.setTheme(newTheme);
+      }
+    });
+
     setTimeout(() => {
       const suggestionWidget = this.editor?.getDomNode()?.querySelector(".suggest-widget") as HTMLElement;
       if (suggestionWidget) {
@@ -128,6 +137,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
   public componentWillUnmount(): void {
     this.selectionListener && this.selectionListener.dispose();
+    this.themeUnsubscribe && this.themeUnsubscribe();
   }
 
   public render(): JSX.Element {
@@ -211,7 +221,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
       ariaLabel: this.props.ariaLabel,
       fontSize: this.props.fontSize || 12,
       automaticLayout: true,
-      theme: this.props.theme,
+      theme: monacoTheme(),
       wordWrap: this.props.wordWrap || "off",
       lineNumbers: this.props.lineNumbers || "off",
       lineNumbersMinChars: this.props.lineNumbersMinChars,

src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.tsx

@@ -2,6 +2,7 @@ import {
   DefaultButton,
   Dropdown,
   IDropdownOption,
+  IDropdownStyles,
   IStyleFunctionOrObject,
   ITextFieldStyleProps,
   ITextFieldStyles,
@@ -35,31 +36,167 @@ export interface FullTextPolicyData {
 const labelStyles = {
   root: {
     fontSize: 12,
+    color: "var(--colorNeutralForeground1)",
   },
 };
 
 const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles> = {
   fieldGroup: {
     height: 27,
+    backgroundColor: "var(--colorNeutralBackground2)",
+    borderColor: "var(--colorNeutralStroke1)",
   },
   field: {
     fontSize: 12,
     padding: "0 8px",
+    color: "var(--colorNeutralForeground1)",
+    backgroundColor: "var(--colorNeutralBackground2)",
+  },
+  root: {
+    selectors: {
+      input: {
+        backgroundColor: "var(--colorNeutralBackground2)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "input:hover": {
+        backgroundColor: "var(--colorNeutralBackground2)",
+        borderColor: "var(--colorNeutralStroke1)",
+      },
+      "input:focus": {
+        backgroundColor: "var(--colorNeutralBackground2)",
+        borderColor: "var(--colorBrandBackground)",
+      },
+    },
   },
 };
 
-const dropdownStyles = {
+const dropdownStyles: Partial<IDropdownStyles> = {
-  title: {
+  root: {
-    height: 27,
+    width: "40%",
-    lineHeight: "24px",
+    marginTop: "10px",
-    fontSize: 12,
+    selectors: {
+      "&:hover .ms-Dropdown-title": {
+        color: "var(--colorNeutralForeground1)",
+        backgroundColor: "var(--colorNeutralBackground2)",
+        borderColor: "var(--colorNeutralStroke1)",
+      },
+      "&:hover span.ms-Dropdown-title": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:focus .ms-Dropdown-title": {
+        color: "var(--colorNeutralForeground1)",
+        backgroundColor: "var(--colorNeutralBackground2)",
+      },
+      "&:focus span.ms-Dropdown-title": {
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
+  label: {
+    color: "var(--colorNeutralForeground1)",
   },
   dropdown: {
-    height: 27,
+    backgroundColor: "var(--colorNeutralBackground2)",
-    lineHeight: "24px",
+    borderColor: "var(--colorNeutralStroke1)",
+    color: "var(--colorNeutralForeground1)",
+  },
+  title: {
+    backgroundColor: "var(--colorNeutralBackground2)",
+    color: "var(--colorNeutralForeground1)",
+    borderColor: "var(--colorNeutralStroke1)",
+    selectors: {
+      "&:hover": {
+        backgroundColor: "var(--colorNeutralBackground2)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:focus": {
+        backgroundColor: "var(--colorNeutralBackground2)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:hover .ms-Dropdown-titleText": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:focus .ms-Dropdown-titleText": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      "& .ms-Dropdown-titleText": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&.ms-Dropdown-title--hasPlaceholder": {
+        color: "var(--colorNeutralForeground2)",
+      },
+    },
+  },
+  errorMessage: {
+    color: "var(--colorNeutralForeground1)",
+  },
+  caretDown: {
+    color: "var(--colorNeutralForeground1)",
+  },
+  callout: {
+    backgroundColor: "var(--colorNeutralBackground2)",
+    border: "1px solid var(--colorNeutralStroke1)",
+  },
+  dropdownItems: {
+    backgroundColor: "var(--colorNeutralBackground2)",
   },
   dropdownItem: {
-    fontSize: 12,
+    backgroundColor: "transparent",
+    color: "var(--colorNeutralForeground1)",
+    minHeight: "36px",
+    lineHeight: "36px",
+    selectors: {
+      "&:hover": {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:hover .ms-Dropdown-optionText": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:focus": {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:active": {
+        backgroundColor: "rgba(255, 255, 255, 0.15)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "& .ms-Dropdown-optionText": {
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
+  dropdownItemSelected: {
+    backgroundColor: "rgba(255, 255, 255, 0.08)",
+    color: "var(--colorNeutralForeground1)",
+    minHeight: "36px",
+    lineHeight: "36px",
+    selectors: {
+      "&:hover": {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:hover .ms-Dropdown-optionText": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:focus": {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:active": {
+        backgroundColor: "rgba(255, 255, 255, 0.15)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "& .ms-Dropdown-optionText": {
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
+  dropdownOptionText: {
+    color: "var(--colorNeutralForeground1)",
+  },
+  dropdownItemHeader: {
+    color: "var(--colorNeutralForeground1)",
   },
 };
 
@@ -226,7 +363,32 @@ export const FullTextPoliciesComponent: React.FunctionComponent<FullTextPolicies
             </Stack>
           </CollapsibleSectionComponent>
         ))}
-      <DefaultButton id={`add-vector-policy`} styles={{ root: { maxWidth: 170, fontSize: 12 } }} onClick={onAdd}>
+      <DefaultButton
+        id={`add-vector-policy`}
+        styles={{
+          root: {
+            maxWidth: 170,
+            fontSize: 12,
+            color: "var(--colorNeutralForeground1)",
+            backgroundColor: "transparent",
+            borderColor: "var(--colorNeutralStroke1)",
+          },
+          rootHovered: {
+            color: "var(--colorNeutralForeground1)",
+            backgroundColor: "transparent",
+            borderColor: "var(--colorNeutralForeground1)",
+          },
+          rootPressed: {
+            color: "var(--colorNeutralForeground1)",
+            backgroundColor: "transparent",
+            borderColor: "var(--colorNeutralForeground1)",
+          },
+          rootDisabled: {
+            backgroundColor: "transparent",
+          },
+        }}
+        onClick={onAdd}
+      >
         Add full text path
       </DefaultButton>
     </Stack>

src/Explorer/Controls/Settings/SettingsComponent.less

@@ -4,6 +4,8 @@
   height: 100%;
   overflow-y: auto;
   width: 100%;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .settingsV2ToolTip {
@@ -23,6 +25,8 @@
   overflow-y: auto;
   width: 100%;
   font-family: @DataExplorerFont;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .settingsV2Editor {

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,4 +1,4 @@
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
+import { IPivotItemProps, IPivotProps, Pivot, PivotItem, Stack } from "@fluentui/react";
 import { sendMessage } from "Common/MessageHandler";
 import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
 import {
@@ -1477,10 +1477,98 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       selectedKey: SettingsV2TabTypes[this.state.selectedTab],
     };
 
-    const pivotItems = tabs.map((tab) => {
+    const pivotStyles = {
+      root: {
+        backgroundColor: "var(--colorNeutralBackground1)",
+        color: "var(--colorNeutralForeground1)",
+        selectors: {
+          "& .ms-Pivot-link": {
+            color: "var(--colorNeutralForeground1)",
+          },
+          "& .ms-Pivot-link.is-selected::before": {
+            backgroundColor: "var(--colorCompoundBrandBackground)",
+          },
+        },
+      },
+      link: {
+        backgroundColor: "var(--colorNeutralBackground1)",
+        color: "var(--colorNeutralForeground1)",
+        selectors: {
+          "&:hover": {
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)",
+          },
+          "&:active": {
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)",
+          },
+          '&[aria-selected="true"]': {
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)",
+            selectors: {
+              "&:hover": {
+                backgroundColor: "var(--colorNeutralBackground1)",
+                color: "var(--colorNeutralForeground1)",
+              },
+              "&:active": {
+                backgroundColor: "var(--colorNeutralBackground1)",
+                color: "var(--colorNeutralForeground1)",
+              },
+            },
+          },
+        },
+      },
+
+      itemContainer: {
+        // padding: '20px 24px',
+        backgroundColor: "var(--colorNeutralBackground1)",
+        color: "var(--colorNeutralForeground1)",
+      },
+    };
+
+    const contentStyles = {
+      root: {
+        backgroundColor: "var(--colorNeutralBackground1)",
+        color: "var(--colorNeutralForeground1)",
+        // padding: '20px 24px'
+      },
+    };
+
+    return (
+      <div
+        className="settingsV2MainContainer"
+        style={
+          {
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)",
+            position: "relative",
+          } as React.CSSProperties
+        }
+      >
+        {this.shouldShowKeyspaceSharedThroughputMessage() && (
+          <div>This table shared throughput is configured at the keyspace</div>
+        )}
+
+        <div
+          className="settingsV2TabsContainer"
+          style={
+            {
+              backgroundColor: "var(--colorNeutralBackground1)",
+              color: "var(--colorNeutralForeground1)",
+              position: "relative",
+              padding: "20px 24px",
+            } as React.CSSProperties
+          }
+        >
+          <Pivot {...pivotProps} styles={pivotStyles}>
+            {tabs.map((tab) => {
               const pivotItemProps: IPivotItemProps = {
                 itemKey: SettingsV2TabTypes[tab.tab],
-        style: { marginTop: 20 },
+                style: {
+                  marginTop: 20,
+                  backgroundColor: "var(--colorNeutralBackground1)",
+                  color: "var(--colorNeutralForeground1)",
+                },
                 headerText: getTabTitle(tab.tab),
                 headerButtonProps: {
                   "data-test": `settings-tab-header/${SettingsV2TabTypes[tab.tab]}`,
@@ -1489,19 +1577,11 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
               return (
                 <PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
-          {tab.content}
+                  <Stack styles={contentStyles}>{tab.content}</Stack>
                 </PivotItem>
               );
-    });
+            })}
-
+          </Pivot>
-    return (
-      <div className="settingsV2MainContainer">
-        {this.shouldShowKeyspaceSharedThroughputMessage() && (
-          <div>This table shared throughput is configured at the keyspace</div>
-        )}
-
-        <div className="settingsV2TabsContainer">
-          <Pivot {...pivotProps}>{pivotItems}</Pivot>
         </div>
       </div>
     );

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -63,7 +63,7 @@ export interface PriceBreakdown {
 
 export type editorType = "indexPolicy" | "computedProperties" | "dataMasking";
 
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "var(--colorNeutralForeground1)" } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
   label: {
@@ -119,15 +119,89 @@ export const addMongoIndexSubElementsTokens: IStackTokens = {
 
 export const mediumWidthStackStyles: IStackStyles = { root: { width: 600 } };
 
-export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = { root: { paddingLeft: 10, width: 210 } };
+export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = {
+  root: { paddingLeft: 10, width: 210 },
+  fieldGroup: {
+    backgroundColor: "var(--colorNeutralBackground2)",
+    borderColor: "var(--colorNeutralStroke1)",
+  },
+  field: {
+    color: "var(--colorNeutralForeground1)",
+    backgroundColor: "var(--colorNeutralBackground2)",
+  },
+};
 
-export const shortWidthDropDownStyles: Partial<IDropdownStyles> = { dropdown: { paddingleft: 10, width: 202 } };
+export const shortWidthDropDownStyles: Partial<IDropdownStyles> = {
+  dropdown: { paddingLeft: 10, width: 202 },
+  title: {
+    backgroundColor: "var(--colorNeutralBackground2)",
+    color: "var(--colorNeutralForeground1)",
+    borderColor: "var(--colorNeutralStroke1)",
+  },
+  caretDown: {
+    color: "var(--colorNeutralForeground1)",
+  },
+  callout: {
+    backgroundColor: "var(--colorNeutralBackground2)",
+    border: "1px solid var(--colorNeutralStroke1)",
+  },
+  dropdownItems: {
+    backgroundColor: "var(--colorNeutralBackground2)",
+  },
+  dropdownItem: {
+    backgroundColor: "transparent",
+    color: "var(--colorNeutralForeground1)",
+    selectors: {
+      "&:hover": {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&:focus": {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
+  dropdownItemSelected: {
+    backgroundColor: "rgba(255, 255, 255, 0.08)",
+    color: "var(--colorNeutralForeground1)",
+    selectors: {
+      "&:hover": {
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
+  dropdownOptionText: {
+    color: "var(--colorNeutralForeground1)",
+  },
+};
 
 export const transparentDetailsRowStyles: Partial<IDetailsRowStyles> = {
   root: {
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
     selectors: {
       ":hover": {
-        background: "transparent",
+        backgroundColor: "var(--colorNeutralBackground1Hover)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      ":hover .ms-DetailsRow-cell": {
+        backgroundColor: "var(--colorNeutralBackground1Hover)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "&.ms-DetailsRow": {
+        backgroundColor: "var(--colorNeutralBackground1)",
+      },
+    },
+  },
+  cell: {
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+    selectors: {
+      ":hover": {
+        backgroundColor: "var(--colorNeutralBackground1Hover)",
+        color: "var(--colorNeutralForeground1)",
       },
     },
   },
@@ -135,9 +209,11 @@ export const transparentDetailsRowStyles: Partial<IDetailsRowStyles> = {
 
 export const transparentDetailsHeaderStyle: Partial<IDetailsColumnStyles> = {
   root: {
+    color: "var(--colorNeutralForeground1)",
     selectors: {
       ":hover": {
-        background: "transparent",
+        background: "var(--colorNeutralBackground1Hover)",
+        color: "var(--colorNeutralForeground1)",
       },
     },
   },
@@ -149,6 +225,35 @@ export const customDetailsListStyles: Partial<IDetailsListStyles> = {
       ".ms-FocusZone": {
         paddingTop: 0,
       },
+      ".ms-DetailsHeader": {
+        backgroundColor: "var(--colorNeutralBackground1)",
+      },
+      ".ms-DetailsHeader-cell": {
+        color: "var(--colorNeutralForeground1)",
+        backgroundColor: "var(--colorNeutralBackground1)",
+        selectors: {
+          ":hover": {
+            backgroundColor: "var(--colorNeutralBackground1Hover)",
+            color: "var(--colorNeutralForeground1)",
+          },
+        },
+      },
+      ".ms-DetailsHeader-cellTitle": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-DetailsRow": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-DetailsRow-cell": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      // Tooltip styling for cells
+      ".ms-TooltipHost": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-DetailsRow-cell .ms-TooltipHost": {
+        color: "var(--colorNeutralForeground1)",
+      },
     },
   },
 };
@@ -166,7 +271,18 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
 };
 
 export const messageBarStyles: Partial<IMessageBarStyles> = {
-  root: { marginTop: "5px", backgroundColor: "white" },
+  root: {
+    marginTop: "5px",
+    backgroundColor: "var(--colorNeutralBackground1)",
+    selectors: {
+      "&.ms-MessageBar--severeWarning": {
+        backgroundColor: "var(--colorNeutralBackground4)",
+      },
+      "&.ms-MessageBar--warning": {
+        backgroundColor: "var(--colorNeutralBackground3)",
+      },
+    },
+  },
   text: { fontSize: 14 },
 };
 
@@ -222,9 +338,11 @@ export const getEstimatedSpendingElement = (
   const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
   return (
     <Stack>
-      <Text style={{ fontWeight: 600 }}>Cost estimate*</Text>
+      <Text style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>Cost estimate*</Text>
       {costElement}
-      <Text style={{ fontWeight: 600, marginTop: 15 }}>How we calculate this</Text>
+      <Text style={{ fontWeight: 600, marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
+        How we calculate this
+      </Text>
       <Stack id="throughputSpendElement" style={{ marginTop: 5 }}>
         <span>
           {numberOfRegions} region{numberOfRegions > 1 && <span>s</span>}
@@ -238,7 +356,7 @@ export const getEstimatedSpendingElement = (
           {priceBreakdown.pricePerRu}/RU
         </span>
       </Stack>
-      <Text style={{ marginTop: 15 }}>
+      <Text style={{ marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
         <em>*{estimatedCostDisclaimer}</em>
       </Text>
     </Stack>
@@ -285,7 +403,7 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
 
 export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThroughput: number): JSX.Element => {
   return (
-    <Text styles={infoAndToolTipTextStyle} id="updateThroughputDelayedApplyWarningMessage">
+    <Text id="updateThroughputDelayedApplyWarningMessage">
       Scaling up will take 4-6 hours as it exceeds what Azure Cosmos DB can instantly support currently based on your
       number of physical partitions. You can increase your throughput to {instantMaximumThroughput} instantly or proceed
       with this value and wait until the scale-up is completed.
@@ -303,7 +421,7 @@ export const getUpdateThroughputBeyondSupportLimitMessage = (
         Your request to increase throughput exceeds the pre-allocated capacity which may take longer than expected.
         There are three options you can choose from to proceed:
       </Text>
-      <ol style={{ fontSize: 14, color: "windowtext", marginTop: "5px" }}>
+      <ol style={{ fontSize: 14, color: "var(--colorNeutralForeground1)", marginTop: "5px" }}>
         <li>You can instantly scale up to {instantMaximumThroughput} RU/s.</li>
         {instantMaximumThroughput < maximumThroughput && (
           <li>You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours.</li>
@@ -339,7 +457,7 @@ export const getUpdateThroughputBelowMinimumMessage = (minimum: number): JSX.Ele
 };
 
 export const saveThroughputWarningMessage: JSX.Element = (
-  <Text styles={infoAndToolTipTextStyle}>
+  <Text>
     Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
     before saving your changes
   </Text>
@@ -459,9 +577,13 @@ export const changeFeedPolicyToolTip: JSX.Element = (
 );
 
 export const mongoIndexingPolicyDisclaimer: JSX.Element = (
-  <Text>
+  <Text style={{ color: "var(--colorNeutralForeground1)" }}>
     For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
-    <Link href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types" target="_blank">
+    <Link
+      href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types"
+      target="_blank"
+      style={{ color: "var(--colorBrandForeground1)" }}
+    >
       {` Compound indexes `}
     </Link>
     are only used for sorting query results. If you need to add a compound index, you can create one using the Mongo
@@ -470,7 +592,7 @@ export const mongoIndexingPolicyDisclaimer: JSX.Element = (
 );
 
 export const mongoCompoundIndexNotSupportedMessage: JSX.Element = (
-  <Text>
+  <Text style={{ color: "var(--colorNeutralForeground1)" }}>
     Collections with compound indexes are not yet supported in the indexing editor. To modify indexing policy for this
     collection, use the Mongo Shell.
   </Text>
@@ -519,14 +641,50 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
   fieldGroup: {
     height: 25,
     width: 300,
-    borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "",
+    backgroundColor: "var(--colorNeutralBackground2)",
+    borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "var(--colorNeutralStroke1)",
     selectors: {
       ":disabled": {
-        backgroundColor: StyleConstants.BaseMedium,
+        backgroundColor: "var(--colorNeutralBackground2)",
-        borderColor: StyleConstants.BaseMediumHigh,
+        borderColor: "var(--colorNeutralStroke1)",
+        color: "var(--colorNeutralForeground2)",
+      },
+      input: {
+        backgroundColor: "var(--colorNeutralBackground2)",
+        color: "var(--colorNeutralForeground1)",
+      },
+      "input:disabled": {
+        backgroundColor: "var(--colorNeutralBackground2)",
+        color: "var(--colorNeutralForeground2)",
+      },
+      "input#autopilotInput": {
+        backgroundColor: "var(--colorNeutralBackground4)",
+        color: "var(--colorNeutralForeground1)",
       },
     },
   },
+  field: {
+    backgroundColor: "var(--colorNeutralBackground2)",
+    color: "var(--colorNeutralForeground1)",
+    selectors: {
+      ":disabled": {
+        backgroundColor: "var(--colorNeutralBackground2)",
+        color: "var(--colorNeutralForeground2)",
+      },
+    },
+  },
+  subComponentStyles: {
+    label: {
+      root: {
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
+  suffix: {
+    backgroundColor: "var(--colorNeutralBackground2)",
+    color: "var(--colorNeutralForeground1)",
+    border: "1px solid var(--colorNeutralStroke1)",
+  },
 });
 
 export const getChoiceGroupStyles = (
@@ -534,6 +692,28 @@ export const getChoiceGroupStyles = (
   baseline: isDirtyTypes,
   isHorizontal?: boolean,
 ): Partial<IChoiceGroupStyles> => ({
+  label: {
+    color: "var(--colorNeutralForeground1)",
+  },
+  root: {
+    selectors: {
+      ".ms-ChoiceFieldLabel": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-ChoiceField-innerField": {
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
   flexContainer: [
     {
       selectors: {
@@ -548,6 +728,16 @@ export const getChoiceGroupStyles = (
           fontSize: 14,
           fontFamily: StyleConstants.DataExplorerFont,
           padding: "2px 5px",
+          color: "var(--colorNeutralForeground1)",
+        },
+        ".ms-ChoiceFieldLabel": {
+          color: "var(--colorNeutralForeground1)",
+        },
+        ".ms-ChoiceFieldLabel:hover": {
+          color: "var(--colorNeutralForeground1)",
+        },
+        ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+          color: "var(--colorNeutralForeground1)",
         },
       },
       display: isHorizontal ? "inline-flex" : "default",

src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx

@@ -1,11 +1,11 @@
-import { FontIcon, Link, MessageBar, MessageBarType, Stack, Text } from "@fluentui/react";
+import { FontIcon, IMessageBarStyles, Link, MessageBar, MessageBarType, Stack, Text } from "@fluentui/react";
 import * as DataModels from "Contracts/DataModels";
 import { titleAndInputStackProps, unsavedEditorWarningMessage } from "Explorer/Controls/Settings/SettingsRenderUtils";
 import { isDirty } from "Explorer/Controls/Settings/SettingsUtils";
 import { loadMonaco } from "Explorer/LazyMonaco";
+import { monacoTheme, useThemeStore } from "hooks/useTheme";
 import * as monaco from "monaco-editor";
 import * as React from "react";
-
 export interface ComputedPropertiesComponentProps {
   computedPropertiesContent: DataModels.ComputedProperties;
   computedPropertiesContentBaseline: DataModels.ComputedProperties;
@@ -27,6 +27,24 @@ export class ComputedPropertiesComponent extends React.Component<
   private shouldCheckComponentIsDirty = true;
   private computedPropertiesDiv = React.createRef<HTMLDivElement>();
   private computedPropertiesEditor: monaco.editor.IStandaloneCodeEditor;
+  private themeUnsubscribe: () => void;
+
+  private darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
+    root: {
+      selectors: {
+        "&.ms-MessageBar--warning": {
+          backgroundColor: "var(--colorStatusWarningBackground1)",
+          border: "1px solid var(--colorStatusWarningBorder1)",
+        },
+        ".ms-MessageBar-icon": {
+          color: "var(--colorNeutralForeground1)",
+        },
+        ".ms-MessageBar-text": {
+          color: "var(--colorNeutralForeground1)",
+        },
+      },
+    },
+  };
 
   constructor(props: ComputedPropertiesComponentProps) {
     super(props);
@@ -48,6 +66,10 @@ export class ComputedPropertiesComponent extends React.Component<
     this.onComponentUpdate();
   }
 
+  componentWillUnmount(): void {
+    this.themeUnsubscribe && this.themeUnsubscribe();
+  }
+
   public resetComputedPropertiesEditor = (): void => {
     if (!this.computedPropertiesEditor) {
       this.createComputedPropertiesEditor();
@@ -86,8 +108,16 @@ export class ComputedPropertiesComponent extends React.Component<
       value: value,
       language: "json",
       ariaLabel: "Computed properties",
+      theme: monacoTheme(),
     });
     if (this.computedPropertiesEditor) {
+      // Subscribe to theme changes
+      this.themeUnsubscribe = useThemeStore.subscribe(() => {
+        if (this.computedPropertiesEditor) {
+          monaco.editor.setTheme(monacoTheme());
+        }
+      });
+
       const computedPropertiesEditorModel = this.computedPropertiesEditor.getModel();
       computedPropertiesEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
       this.props.logComputedPropertiesSuccessMessage();
@@ -111,17 +141,26 @@ export class ComputedPropertiesComponent extends React.Component<
     return (
       <Stack {...titleAndInputStackProps}>
         {isDirty(this.props.computedPropertiesContent, this.props.computedPropertiesContentBaseline) && (
-          <MessageBar messageBarType={MessageBarType.warning}>
+          <MessageBar
+            messageBarType={MessageBarType.warning}
+            messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+            styles={this.darkThemeMessageBarStyles}
+          >
             {unsavedEditorWarningMessage("computedProperties")}
           </MessageBar>
         )}
-        <Text style={{ marginLeft: "30px", marginBottom: "10px" }}>
+        <Text style={{ marginLeft: "30px", marginBottom: "10px", color: "var(--colorNeutralForeground1)" }}>
           <Link target="_blank" href="https://aka.ms/computed-properties-preview/">
             {"Learn more"} <FontIcon iconName="NavigateExternalInline" />
           </Link>
           &#160; about how to define computed properties and how to use them.
         </Text>
-        <div className="settingsV2Editor" tabIndex={0} ref={this.computedPropertiesDiv}></div>
+        <div
+          className="settingsV2Editor"
+          tabIndex={0}
+          ref={this.computedPropertiesDiv}
+          data-test="computed-properties-editor"
+        ></div>
       </Stack>
     );
   }

src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx

@@ -6,7 +6,6 @@ import {
   conflictResolutionCustomToolTip,
   conflictResolutionLwwTooltip,
   getChoiceGroupStyles,
-  getTextFieldStyles,
   subComponentStackProps,
 } from "../SettingsRenderUtils";
 import { isDirty } from "../SettingsUtils";
@@ -106,10 +105,46 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
       id="conflictResolutionLwwTextField"
       label={"Conflict Resolver Property"}
       onRenderLabel={this.onRenderLwwComponentTextField}
-      styles={getTextFieldStyles(
+      styles={{
-        this.props.conflictResolutionPolicyPath,
+        fieldGroup: {
-        this.props.conflictResolutionPolicyPathBaseline,
+          height: 25,
-      )}
+          width: 300,
+          backgroundColor: "var(--colorNeutralBackground2)",
+          borderColor: "var(--colorNeutralStroke1)",
+          selectors: {
+            ":disabled": {
+              backgroundColor: "var(--colorNeutralBackground2)",
+              borderColor: "var(--colorNeutralStroke1)",
+              color: "var(--colorNeutralForeground2)",
+            },
+            input: {
+              backgroundColor: "var(--colorNeutralBackground2)",
+              color: "var(--colorNeutralForeground1)",
+            },
+            "input:disabled": {
+              backgroundColor: "var(--colorNeutralBackground2)",
+              color: "var(--colorNeutralForeground2)",
+            },
+          },
+        },
+        field: {
+          backgroundColor: "var(--colorNeutralBackground2)",
+          color: "var(--colorNeutralForeground1)",
+          selectors: {
+            ":disabled": {
+              backgroundColor: "var(--colorNeutralBackground2)",
+              color: "var(--colorNeutralForeground2)",
+            },
+          },
+        },
+        subComponentStyles: {
+          label: {
+            root: {
+              color: "var(--colorNeutralForeground1)",
+            },
+          },
+        },
+      }}
       value={this.props.conflictResolutionPolicyPath}
       onChange={this.onConflictResolutionPolicyPathChange}
     />
@@ -119,19 +154,57 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
     <ToolTipLabelComponent label={props.label} toolTipElement={conflictResolutionCustomToolTip} />
   );
 
-  private getConflictResolutionCustomComponent = (): JSX.Element => (
+  private getConflictResolutionCustomComponent = (): JSX.Element => {
+    return (
       <TextField
         id="conflictResolutionCustomTextField"
         label="Stored procedure"
         onRenderLabel={this.onRenderCustomComponentTextField}
-      styles={getTextFieldStyles(
+        styles={{
-        this.props.conflictResolutionPolicyProcedure,
+          fieldGroup: {
-        this.props.conflictResolutionPolicyProcedureBaseline,
+            height: 25,
-      )}
+            width: 300,
+            backgroundColor: "var(--colorNeutralBackground2)",
+            borderColor: "var(--colorNeutralStroke1)",
+            selectors: {
+              ":disabled": {
+                backgroundColor: "var(--colorNeutralBackground2)",
+                borderColor: "var(--colorNeutralStroke1)",
+                color: "var(--colorNeutralForeground2)",
+              },
+              input: {
+                backgroundColor: "var(--colorNeutralBackground2)",
+                color: "var(--colorNeutralForeground1)",
+              },
+              "input:disabled": {
+                backgroundColor: "var(--colorNeutralBackground2)",
+                color: "var(--colorNeutralForeground2)",
+              },
+            },
+          },
+          field: {
+            backgroundColor: "var(--colorNeutralBackground2)",
+            color: "var(--colorNeutralForeground1)",
+            selectors: {
+              ":disabled": {
+                backgroundColor: "var(--colorNeutralBackground2)",
+                color: "var(--colorNeutralForeground2)",
+              },
+            },
+          },
+          subComponentStyles: {
+            label: {
+              root: {
+                color: "var(--colorNeutralForeground1)",
+              },
+            },
+          },
+        }}
         value={this.props.conflictResolutionPolicyProcedure}
         onChange={this.onConflictResolutionPolicyProcedureChange}
       />
     );
+  };
 
   public render(): JSX.Element {
     return (

src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx

@@ -102,11 +102,57 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
 
   return (
     <div>
-      <Pivot onLinkClick={onPivotChange} selectedKey={ContainerPolicyTabTypes[selectedTab]}>
+      <Pivot
+        onLinkClick={onPivotChange}
+        selectedKey={ContainerPolicyTabTypes[selectedTab]}
+        styles={{
+          root: {
+            color: "var(--colorNeutralForeground1)",
+          },
+          link: {
+            color: "var(--colorNeutralForeground1)",
+            backgroundColor: "transparent",
+            selectors: {
+              ":hover": {
+                color: "var(--colorNeutralForeground1)",
+                backgroundColor: "transparent",
+              },
+              ":active": {
+                color: "var(--colorNeutralForeground1)",
+                backgroundColor: "transparent",
+              },
+            },
+          },
+          linkIsSelected: {
+            color: "var(--colorNeutralForeground1)",
+            backgroundColor: "transparent",
+            selectors: {
+              ":before": {
+                color: "var(--colorNeutralForeground1)",
+                backgroundColor: "var(--colorBrandForeground1)",
+              },
+              ":hover": {
+                color: "var(--colorNeutralForeground1)",
+                backgroundColor: "transparent",
+              },
+              ":active": {
+                color: "var(--colorNeutralForeground1)",
+                backgroundColor: "transparent",
+              },
+            },
+          },
+          linkContent: {
+            color: "inherit",
+          },
+          text: {
+            color: "inherit",
+          },
+        }}
+      >
         {isVectorSearchEnabled && (
           <PivotItem
             itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.VectorPolicyTab]}
-            style={{ marginTop: 20 }}
+            style={{ marginTop: 20, color: "var(--colorNeutralForeground1)" }}
             headerText="Vector Policy"
           >
             <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
@@ -128,7 +174,7 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
         {isFullTextSearchEnabled && (
           <PivotItem
             itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.FullTextPolicyTab]}
-            style={{ marginTop: 20 }}
+            style={{ marginTop: 20, color: "var(--colorNeutralForeground1)" }}
             headerText="Full Text Policy"
           >
             <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
@@ -144,7 +190,27 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
               ) : (
                 <DefaultButton
                   id={"create-full-text-policy"}
-                  styles={{ root: { fontSize: 12 } }}
+                  styles={{
+                    root: {
+                      fontSize: 12,
+                      color: "var(--colorNeutralForeground1)",
+                      backgroundColor: "transparent",
+                      borderColor: "var(--colorNeutralForeground1)",
+                    },
+                    rootHovered: {
+                      color: "var(--colorNeutralForeground1)",
+                      backgroundColor: "transparent",
+                      borderColor: "var(--colorNeutralForeground1)",
+                    },
+                    rootPressed: {
+                      color: "var(--colorNeutralForeground1)",
+                      backgroundColor: "transparent",
+                      borderColor: "var(--colorNeutralForeground1)",
+                    },
+                    rootDisabled: {
+                      backgroundColor: "transparent",
+                    },
+                  }}
                   onClick={() => {
                     checkAndSendFullTextPolicyToSettings({
                       defaultLanguage: getFullTextLanguageOptions()[0].key as never,

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx

@@ -1,4 +1,5 @@
-import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
+import { IMessageBarStyles, MessageBar, MessageBarType, Stack } from "@fluentui/react";
+import { monacoTheme, useThemeStore } from "hooks/useTheme";
 import * as monaco from "monaco-editor";
 import * as React from "react";
 import * as DataModels from "../../../../Contracts/DataModels";
@@ -6,7 +7,6 @@ import { loadMonaco } from "../../../LazyMonaco";
 import { titleAndInputStackProps, unsavedEditorWarningMessage } from "../SettingsRenderUtils";
 import { isDirty, isIndexTransforming } from "../SettingsUtils";
 import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
-
 export interface IndexingPolicyComponentProps {
   shouldDiscardIndexingPolicy: boolean;
   resetShouldDiscardIndexingPolicy: () => void;
@@ -31,6 +31,24 @@ export class IndexingPolicyComponent extends React.Component<
   private shouldCheckComponentIsDirty = true;
   private indexingPolicyDiv = React.createRef<HTMLDivElement>();
   private indexingPolicyEditor: monaco.editor.IStandaloneCodeEditor;
+  private themeUnsubscribe: () => void;
+
+  private darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
+    root: {
+      selectors: {
+        "&.ms-MessageBar--warning": {
+          backgroundColor: "var(--colorStatusWarningBackground1)",
+          border: "1px solid var(--colorStatusWarningBorder1)",
+        },
+        ".ms-MessageBar-icon": {
+          color: "var(--colorNeutralForeground1)",
+        },
+        ".ms-MessageBar-text": {
+          color: "var(--colorNeutralForeground1)",
+        },
+      },
+    },
+  };
 
   constructor(props: IndexingPolicyComponentProps) {
     super(props);
@@ -52,6 +70,10 @@ export class IndexingPolicyComponent extends React.Component<
     this.onComponentUpdate();
   }
 
+  componentWillUnmount(): void {
+    this.themeUnsubscribe && this.themeUnsubscribe();
+  }
+
   public resetIndexingPolicyEditor = (): void => {
     if (!this.indexingPolicyEditor) {
       this.createIndexingPolicyEditor();
@@ -87,20 +109,32 @@ export class IndexingPolicyComponent extends React.Component<
   };
 
   private async createIndexingPolicyEditor(): Promise<void> {
+    if (!this.indexingPolicyDiv.current) {
+      return;
+    }
     const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
     const monaco = await loadMonaco();
+    if (this.indexingPolicyDiv.current) {
       this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
         value: value,
         language: "json",
         readOnly: isIndexTransforming(this.props.indexTransformationProgress),
         ariaLabel: "Indexing Policy",
+        theme: monacoTheme(),
       });
       if (this.indexingPolicyEditor) {
+        this.themeUnsubscribe = useThemeStore.subscribe(() => {
+          if (this.indexingPolicyEditor) {
+            monaco.editor.setTheme(monacoTheme());
+          }
+        });
+
         const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
         indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
         this.props.logIndexingPolicySuccessMessage();
       }
     }
+  }
 
   private onEditorContentChange = (): void => {
     const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
@@ -121,7 +155,13 @@ export class IndexingPolicyComponent extends React.Component<
           refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
         />
         {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
-          <MessageBar messageBarType={MessageBarType.warning}>{unsavedEditorWarningMessage("indexPolicy")}</MessageBar>
+          <MessageBar
+            messageBarType={MessageBarType.warning}
+            messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+            styles={this.darkThemeMessageBarStyles}
+          >
+            {unsavedEditorWarningMessage("indexPolicy")}
+          </MessageBar>
         )}
         <div className="settingsV2Editor" tabIndex={0} ref={this.indexingPolicyDiv}></div>
       </Stack>

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
     styles={
       {
         "root": {
-          "color": "windowtext",
+          "color": "var(--colorNeutralForeground1)",
           "fontSize": 14,
         },
       }

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx

@@ -3,6 +3,7 @@ import {
   DetailsListLayoutMode,
   IColumn,
   IconButton,
+  IMessageBarStyles,
   MessageBar,
   MessageBarType,
   SelectionMode,
@@ -30,12 +31,12 @@ import {
 } from "../../SettingsRenderUtils";
 import {
   AddMongoIndexProps,
-  MongoIndexIdField,
-  MongoIndexTypes,
-  MongoNotificationType,
   getMongoIndexType,
   getMongoIndexTypeText,
   isIndexTransforming,
+  MongoIndexIdField,
+  MongoIndexTypes,
+  MongoNotificationType,
 } from "../../SettingsUtils";
 import { IndexingPolicyRefreshComponent } from "../IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
 import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
@@ -63,6 +64,24 @@ interface MongoIndexDisplayProps {
 export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingPolicyComponentProps> {
   private shouldCheckComponentIsDirty = true;
   private addMongoIndexComponentRefs: React.RefObject<AddMongoIndexComponent>[] = [];
+
+  private darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
+    root: {
+      selectors: {
+        "&.ms-MessageBar--warning": {
+          backgroundColor: "var(--colorStatusWarningBackground1)",
+          border: "1px solid var(--colorStatusWarningBorder1)",
+        },
+        ".ms-MessageBar-icon": {
+          color: "var(--colorNeutralForeground1)",
+        },
+        ".ms-MessageBar-text": {
+          color: "var(--colorNeutralForeground1)",
+        },
+      },
+    },
+  };
+
   private initialIndexesColumns: IColumn[] = [
     { key: "definition", name: "Definition", fieldName: "definition", minWidth: 100, maxWidth: 200, isResizable: true },
     { key: "type", name: "Type", fieldName: "type", minWidth: 100, maxWidth: 200, isResizable: true },
@@ -171,8 +190,8 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
     let mongoIndexDisplayProps: MongoIndexDisplayProps;
     if (type) {
       mongoIndexDisplayProps = {
-        definition: <Text>{definition}</Text>,
+        definition: <Text style={{ color: "var(--colorNeutralForeground1)" }}>{definition}</Text>,
-        type: <Text>{getMongoIndexTypeText(type)}</Text>,
+        type: <Text style={{ color: "var(--colorNeutralForeground1)" }}>{getMongoIndexTypeText(type)}</Text>,
         actionButton: definition === MongoIndexIdField ? <></> : this.getActionButton(arrayPosition, isCurrentIndex),
       };
     }
@@ -306,7 +325,15 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
           indexTransformationProgress={this.props.indexTransformationProgress}
           refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
         />
-        {warningMessage && <MessageBar messageBarType={MessageBarType.warning}>{warningMessage}</MessageBar>}
+        {warningMessage && (
+          <MessageBar
+            messageBarType={MessageBarType.warning}
+            messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+            styles={this.darkThemeMessageBarStyles}
+          >
+            {warningMessage}
+          </MessageBar>
+        )}
       </>
     );
   };

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap

@@ -22,6 +22,14 @@ exports[`AddMongoIndexComponent renders 1`] = `
       onChange={[Function]}
       styles={
         {
+          "field": {
+            "backgroundColor": "var(--colorNeutralBackground2)",
+            "color": "var(--colorNeutralForeground1)",
+          },
+          "fieldGroup": {
+            "backgroundColor": "var(--colorNeutralBackground2)",
+            "borderColor": "var(--colorNeutralStroke1)",
+          },
           "root": {
             "paddingLeft": 10,
             "width": 210,
@@ -49,10 +57,52 @@ exports[`AddMongoIndexComponent renders 1`] = `
       selectedKey="Single"
       styles={
         {
+          "callout": {
+            "backgroundColor": "var(--colorNeutralBackground2)",
+            "border": "1px solid var(--colorNeutralStroke1)",
+          },
+          "caretDown": {
+            "color": "var(--colorNeutralForeground1)",
+          },
           "dropdown": {
-            "paddingleft": 10,
+            "paddingLeft": 10,
             "width": 202,
           },
+          "dropdownItem": {
+            "backgroundColor": "transparent",
+            "color": "var(--colorNeutralForeground1)",
+            "selectors": {
+              "&:focus": {
+                "backgroundColor": "rgba(255, 255, 255, 0.1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+              "&:hover": {
+                "backgroundColor": "rgba(255, 255, 255, 0.1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+            },
+          },
+          "dropdownItemSelected": {
+            "backgroundColor": "rgba(255, 255, 255, 0.08)",
+            "color": "var(--colorNeutralForeground1)",
+            "selectors": {
+              "&:hover": {
+                "backgroundColor": "rgba(255, 255, 255, 0.1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+            },
+          },
+          "dropdownItems": {
+            "backgroundColor": "var(--colorNeutralBackground2)",
+          },
+          "dropdownOptionText": {
+            "color": "var(--colorNeutralForeground1)",
+          },
+          "title": {
+            "backgroundColor": "var(--colorNeutralBackground2)",
+            "borderColor": "var(--colorNeutralStroke1)",
+            "color": "var(--colorNeutralForeground1)",
+          },
         }
       }
     />

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap

@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MongoIndexingPolicyComponent error shown for collection with compound indexes 1`] = `
-<Text>
+<Text
+  style={
+    {
+      "color": "var(--colorNeutralForeground1)",
+    }
+  }
+>
   Collections with compound indexes are not yet supported in the indexing editor. To modify indexing policy for this collection, use the Mongo Shell.
 </Text>
 `;
@@ -17,10 +23,21 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
   <IndexingPolicyRefreshComponent
     refreshIndexTransformationProgress={[Function]}
   />
-  <Text>
+  <Text
+    style={
+      {
+        "color": "var(--colorNeutralForeground1)",
+      }
+    }
+  >
     For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
     <StyledLinkBase
       href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types"
+      style={
+        {
+          "color": "var(--colorBrandForeground1)",
+        }
+      }
       target="_blank"
     >
        Compound indexes 
@@ -83,9 +100,37 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
           {
             "root": {
               "selectors": {
+                ".ms-DetailsHeader": {
+                  "backgroundColor": "var(--colorNeutralBackground1)",
+                },
+                ".ms-DetailsHeader-cell": {
+                  "backgroundColor": "var(--colorNeutralBackground1)",
+                  "color": "var(--colorNeutralForeground1)",
+                  "selectors": {
+                    ":hover": {
+                      "backgroundColor": "var(--colorNeutralBackground1Hover)",
+                      "color": "var(--colorNeutralForeground1)",
+                    },
+                  },
+                },
+                ".ms-DetailsHeader-cellTitle": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
+                ".ms-DetailsRow": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
+                ".ms-DetailsRow-cell": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
+                ".ms-DetailsRow-cell .ms-TooltipHost": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
                 ".ms-FocusZone": {
                   "paddingTop": 0,
                 },
+                ".ms-TooltipHost": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
               },
             },
           }

src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx

@@ -1,6 +1,7 @@
 import {
   DefaultButton,
   FontWeights,
+  IMessageBarStyles,
   Link,
   MessageBar,
   MessageBarType,
@@ -32,6 +33,23 @@ export interface PartitionKeyComponentProps {
   isReadOnly?: boolean; // true: cannot change partition key
 }
 
+const darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
+  root: {
+    selectors: {
+      "&.ms-MessageBar--warning": {
+        backgroundColor: "var(--colorStatusWarningBackground1)",
+        border: "1px solid var(--colorStatusWarningBorder1)",
+      },
+      ".ms-MessageBar-icon": {
+        color: "var(--colorNeutralForeground1)",
+      },
+      ".ms-MessageBar-text": {
+        color: "var(--colorNeutralForeground1)",
+      },
+    },
+  },
+};
+
 export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
   database,
   collection,
@@ -66,13 +84,15 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
   const partitionKeyValue = getPartitionKeyValue();
 
   const textHeadingStyle = {
-    root: { fontWeight: FontWeights.semibold, fontSize: 16 },
+    root: { fontWeight: FontWeights.semibold, fontSize: 16, color: "var(--colorNeutralForeground1)" },
   };
 
   const textSubHeadingStyle = {
-    root: { fontWeight: FontWeights.semibold },
+    root: { fontWeight: FontWeights.semibold, color: "var(--colorNeutralForeground1)" },
+  };
+  const textSubHeadingStyle1 = {
+    root: { color: "var(--colorNeutralForeground1)" },
   };
-
   const startPollingforUpdate = (currentJob: DataTransferJobGetResults) => {
     if (isCurrentJobInProgress(currentJob)) {
       const jobName = currentJob?.properties?.jobName;
@@ -167,32 +187,41 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
             <Text styles={textSubHeadingStyle}>Current {partitionKeyName.toLowerCase()}</Text>
             <Text styles={textSubHeadingStyle}>Partitioning</Text>
           </Stack>
-          <Stack tokens={{ childrenGap: 5 }}>
+          <Stack tokens={{ childrenGap: 5 }} data-test="partition-key-values">
-            <Text>{partitionKeyValue}</Text>
+            <Text styles={textSubHeadingStyle1}>{partitionKeyValue}</Text>
-            <Text>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
+            <Text styles={textSubHeadingStyle1}>
+              {isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}
+            </Text>
           </Stack>
         </Stack>
       </Stack>
 
       {!isReadOnly && (
         <>
-          <MessageBar messageBarType={MessageBarType.warning}>
+          <MessageBar
+            data-test="partition-key-warning"
+            messageBarType={MessageBarType.warning}
+            messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+            styles={darkThemeMessageBarStyles}
+          >
             To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to
             the source container for the entire duration of the partition key change process.
             <Link
               href="https://learn.microsoft.com/azure/cosmos-db/container-copy#how-does-container-copy-work"
               target="_blank"
               underline
+              style={{ color: "var(--colorBrandForeground1)" }}
             >
               Learn more
             </Link>
           </MessageBar>
-          <Text>
+          <Text styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>
             To change the partition key, a new destination container must be created or an existing destination
             container selected. Data will then be copied to the destination container.
           </Text>
           {configContext.platform !== Platform.Emulator && (
             <PrimaryButton
+              data-test="change-partition-key-button"
               styles={{ root: { width: "fit-content" } }}
               text="Change"
               onClick={startPartitionkeyChangeWorkflow}

src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx

@@ -1,4 +1,15 @@
-import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField } from "@fluentui/react";
+import {
+  ChoiceGroup,
+  IChoiceGroupOption,
+  Label,
+  Link,
+  MessageBar,
+  Stack,
+  Text,
+  TextField,
+  TooltipHost,
+  mergeStyleSets,
+} from "@fluentui/react";
 import * as React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import { userContext } from "../../../../UserContext";
@@ -25,6 +36,11 @@ import {
 } from "../SettingsUtils";
 import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
 
+const classNames = mergeStyleSets({
+  hintText: {
+    color: "var(--colorNeutralForeground1)", // theme-aware
+  },
+});
 export interface SubSettingsComponentProps {
   collection: ViewModels.Collection;
   timeToLive: TtlType;
@@ -185,13 +201,31 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
     userContext.apiType === "Mongo" ? (
       <MessageBar
         messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-        styles={{ text: { fontSize: 14 } }}
+        styles={{
+          root: {
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)",
+          },
+          text: {
+            fontSize: 14,
+            color: "var(--colorNeutralForeground1)",
+          },
+          icon: {
+            color: "var(--colorNeutralForeground1)",
+          },
+        }}
+      >
+        <Text style={{ color: "var(--colorNeutralForeground1)" }}>
+          To enable time-to-live (TTL) for your collection/documents,{" "}
+          <Link
+            href="https://docs.microsoft.com/en-us/azure/cosmos-db/mongodb-time-to-live"
+            target="_blank"
+            style={{ color: "var(--colorBrandForeground1)" }}
           >
-        To enable time-to-live (TTL) for your collection/documents,
-        <Link href="https://docs.microsoft.com/en-us/azure/cosmos-db/mongodb-time-to-live" target="_blank">
             create a TTL index
           </Link>
           .
+        </Text>
       </MessageBar>
     ) : (
       <Stack {...titleAndInputStackProps}>
@@ -268,8 +302,8 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   );
 
   private geoSpatialConfigTypeChoiceGroupOptions: IChoiceGroupOption[] = [
-    { key: GeospatialConfigType.Geography, text: "Geography" },
+    { key: GeospatialConfigType.Geography, text: "Geography", ariaLabel: "geography-option" },
-    { key: GeospatialConfigType.Geometry, text: "Geometry" },
+    { key: GeospatialConfigType.Geometry, text: "Geometry", ariaLabel: "geometry-option" },
   ];
 
   private getGeoSpatialComponent = (): JSX.Element => (
@@ -319,23 +353,34 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   private getPartitionKeyComponent = (): JSX.Element => (
     <Stack {...titleAndInputStackProps}>
       {this.getPartitionKeyVisible() && (
+        <TooltipHost
+          content={`This ${this.partitionKeyName.toLowerCase()} is used to distribute data across multiple partitions for scalability. The value "${
+            this.partitionKeyValue
+          }" determines how documents are partitioned.`}
+          styles={{
+            root: {
+              display: "block",
+            },
+          }}
+        >
           <TextField
             label={this.partitionKeyName}
             disabled
             styles={getTextFieldStyles(undefined, undefined)}
             defaultValue={this.partitionKeyValue}
           />
+        </TooltipHost>
       )}
 
       {userContext.apiType === "SQL" && this.isLargePartitionKeyEnabled() && (
-        <Text>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
+        <Text className={classNames.hintText}>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
       )}
 
       {userContext.apiType === "SQL" &&
         (this.isHierarchicalPartitionedContainer() ? (
-          <Text>Hierarchically partitioned container.</Text>
+          <Text className={classNames.hintText}>Hierarchically partitioned container.</Text>
         ) : (
-          <Text>Non-hierarchically partitioned container.</Text>
+          <Text className={classNames.hintText}>Non-hierarchically partitioned container.</Text>
         ))}
     </Stack>
   );

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx

@@ -65,7 +65,7 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
 
   return (
     <Stack tokens={{ childrenGap: "m" }} styles={{ root: { width: "70%", maxWidth: 700 } }}>
-      <Label>Throughput Buckets</Label>
+      <Label styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>Throughput Buckets</Label>
       <Stack>
         {throughputBuckets?.map((bucket) => (
           <Stack key={bucket.id} horizontal tokens={{ childrenGap: 8 }} verticalAlign="center">
@@ -77,7 +77,15 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
               onChange={(newValue) => handleBucketChange(bucket.id, newValue)}
               showValue={false}
               label={`Bucket ${bucket.id}${bucket.id === 1 ? " (Data Explorer Query Bucket)" : ""}`}
-              styles={{ root: { flex: 2, maxWidth: 400 } }}
+              styles={{
+                root: { flex: 2, maxWidth: 400 },
+                titleLabel: {
+                  color:
+                    bucket.maxThroughputPercentage === 100
+                      ? "var(--colorNeutralForeground4)"
+                      : "var(--colorNeutralForeground1)",
+                },
+              }}
               disabled={bucket.maxThroughputPercentage === 100}
             />
             <TextField

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -3,6 +3,7 @@ import {
   ChoiceGroup,
   FontIcon,
   IChoiceGroupOption,
+  IMessageBarStyles,
   IProgressIndicatorStyles,
   ISeparatorStyles,
   Label,
@@ -37,7 +38,6 @@ import {
   getUpdateThroughputBeyondInstantLimitMessage,
   getUpdateThroughputBeyondSupportLimitMessage,
   manualToAutoscaleDisclaimerElement,
-  messageBarStyles,
   noLeftPaddingCheckBoxStyle,
   relaxedSpacingStackProps,
   saveThroughputWarningMessage,
@@ -101,6 +101,13 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     { key: "false", text: "Manual" },
   ];
 
+  // Style constants for theme-aware colors and layout
+  private static readonly TEXT_COLOR_PRIMARY = "var(--colorNeutralForeground1)";
+  private static readonly TEXT_COLOR_SECONDARY = "var(--colorNeutralForeground2)";
+  private static readonly TEXT_WIDTH_50 = "50%";
+  private static readonly TEXT_WIDTH_33 = "33%";
+  private static readonly LOCALE_EN_US = "en-US";
+
   componentDidMount(): void {
     this.onComponentUpdate();
   }
@@ -236,12 +243,24 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       );
       return (
         <div>
-          <Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
+          <Text style={{ fontWeight: 600, color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY }}>
+            Updated cost per month
+          </Text>
           <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
-            <Text style={{ width: "50%" }}>
+            <Text
+              style={{
+                width: ThroughputInputAutoPilotV3Component.TEXT_WIDTH_50,
+                color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY,
+              }}
+            >
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)} min
             </Text>
-            <Text style={{ width: "50%" }}>
+            <Text
+              style={{
+                width: ThroughputInputAutoPilotV3Component.TEXT_WIDTH_50,
+                color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY,
+              }}
+            >
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)} max
             </Text>
           </Stack>
@@ -254,12 +273,24 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       return (
         <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
           {newThroughput && newThroughputCostElement()}
-          <Text style={{ fontWeight: 600 }}>Current cost per month</Text>
+          <Text style={{ fontWeight: 600, color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY }}>
-          <Stack horizontal style={{ marginTop: 5 }}>
+            Current cost per month
-            <Text style={{ width: "50%" }}>
+          </Text>
+          <Stack horizontal style={{ marginTop: 5, color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY }}>
+            <Text
+              style={{
+                width: ThroughputInputAutoPilotV3Component.TEXT_WIDTH_50,
+                color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY,
+              }}
+            >
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)} min
             </Text>
-            <Text style={{ width: "50%" }}>
+            <Text
+              style={{
+                width: ThroughputInputAutoPilotV3Component.TEXT_WIDTH_50,
+                color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY,
+              }}
+            >
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)} max
             </Text>
           </Stack>
@@ -269,7 +300,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
 
     return getEstimatedSpendingElement(costElement(), newThroughput ?? throughput, numberOfRegions, prices, true);
   };
-
+  settingsAndScaleStyle = {
+    root: {
+      width: ThroughputInputAutoPilotV3Component.TEXT_WIDTH_33,
+      color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY,
+    },
+  };
   private getEstimatedManualSpendElement = (
     throughput: number,
     serverId: string,
@@ -289,15 +325,17 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       );
       return (
         <div>
-          <Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
+          <Text style={{ fontWeight: 600, color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY }}>
+            Updated cost per month
+          </Text>
           <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
-            <Text style={{ width: "33%" }}>
+            <Text style={this.settingsAndScaleStyle.root}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}/hr
             </Text>
-            <Text style={{ width: "33%" }}>
+            <Text style={this.settingsAndScaleStyle.root}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}/day
             </Text>
-            <Text style={{ width: "33%" }}>
+            <Text style={this.settingsAndScaleStyle.root}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}/mo
             </Text>
           </Stack>
@@ -310,15 +348,17 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       return (
         <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
           {newThroughput && newThroughputCostElement()}
-          <Text style={{ fontWeight: 600 }}>Current cost per month</Text>
+          <Text style={{ fontWeight: 600, color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY }}>
+            Current cost per month
+          </Text>
           <Stack horizontal style={{ marginTop: 5 }}>
-            <Text style={{ width: "33%" }}>
+            <Text style={this.settingsAndScaleStyle.root}>
               {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}/hr
             </Text>
-            <Text style={{ width: "33%" }}>
+            <Text style={this.settingsAndScaleStyle.root}>
               {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}/day
             </Text>
-            <Text style={{ width: "33%" }}>
+            <Text style={this.settingsAndScaleStyle.root}>
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}/mo
             </Text>
           </Stack>
@@ -381,7 +421,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
             {this.overrideWithProvisionedThroughputSettings() && (
               <MessageBar
                 messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-                styles={messageBarStyles}
+                styles={this.darkThemeMessageBarStyles}
               >
                 {manualToAutoscaleDisclaimerElement}
               </MessageBar>
@@ -407,8 +447,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     const capacity: string = this.props.isFixed ? "Fixed" : "Unlimited";
     return (
       <Stack {...titleAndInputStackProps}>
-        <Label>Storage capacity</Label>
+        <Label style={{ color: "var(--colorNeutralForeground1)" }}>Storage capacity</Label>
-        <Text>{capacity}</Text>
+        <Text style={{ color: "var(--colorNeutralForeground1)" }}>{capacity}</Text>
       </Stack>
     );
   };
@@ -418,7 +458,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       {
         selectors: {
           "::before": {
-            backgroundColor: "rgb(200, 200, 200)",
+            backgroundColor: "var(--colorNeutralStroke2)",
             height: "3px",
             marginTop: "-1px",
           },
@@ -457,10 +497,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       {
         backgroundColor:
           this.getCurrentRuRange() === "instant"
-            ? "rgb(0, 120, 212)"
+            ? "var(--colorBrandBackground)"
             : this.getCurrentRuRange() === "delayed"
-            ? "rgb(255 216 109)"
+            ? "var(--colorStatusWarningBackground1)"
-            : "rgb(251, 217, 203)",
+            : "var(--colorStatusDangerBackground1)",
       },
     ],
   });
@@ -497,14 +537,17 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     <Stack>
       <Stack horizontal>
         <Stack.Item style={{ width: "34%" }}>
-          <span>{this.props.minimum.toLocaleString()}</span>
+          <span>{this.props.minimum.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}</span>
         </Stack.Item>
         <Stack.Item style={{ width: "66%" }}>
           <span style={{ float: "left", transform: "translateX(-50%)" }}>
-            {this.props.instantMaximumThroughput.toLocaleString()}
+            {this.props.instantMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}
+          </span>
+          <span style={{ float: "right" }}>
+            {this.props.softAllowedMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}
           </span>
           <span style={{ float: "right" }} data-test="soft-allowed-maximum-throughput">
-            {this.props.softAllowedMaximumThroughput.toLocaleString()}
+            {this.props.softAllowedMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}
           </span>
         </Stack.Item>
       </Stack>
@@ -547,12 +590,41 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     }
   };
 
+  private darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
+    root: {
+      marginTop: "5px",
+      selectors: {
+        "&.ms-MessageBar--severeWarning": {
+          backgroundColor: "var(--colorStatusDangerBackground1)",
+          border: "1px solid var(--colorStatusDangerBorder1)",
+        },
+        "&.ms-MessageBar--warning": {
+          backgroundColor: "var(--colorStatusWarningBackground1)",
+          border: "1px solid var(--colorStatusWarningBorder1)",
+        },
+        "&.ms-MessageBar--info": {
+          backgroundColor: "var(--colorNeutralBackground3)",
+          border: "1px solid var(--colorNeutralStroke1)",
+        },
+        ".ms-MessageBar-icon": {
+          color: "var(--colorNeutralForeground1)",
+        },
+        ".ms-MessageBar-text": {
+          color: "var(--colorNeutralForeground1)",
+        },
+      },
+    },
+  };
+
   private getThroughputWarningMessageBar = (): JSX.Element => {
     const isSevereWarning: boolean =
       this.currentThroughputValue() > this.props.softAllowedMaximumThroughput ||
       this.currentThroughputValue() < this.props.minimum;
     return (
-      <MessageBar messageBarType={isSevereWarning ? MessageBarType.severeWarning : MessageBarType.warning}>
+      <MessageBar
+        messageBarType={isSevereWarning ? MessageBarType.severeWarning : MessageBarType.warning}
+        styles={this.darkThemeMessageBarStyles}
+      >
         {this.getThroughputWarningMessageText()}
       </MessageBar>
     );
@@ -565,10 +637,13 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           {/* Column 1: Minimum RU/s */}
           <Stack tokens={{ childrenGap: 4 }}>
             <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
-              <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
+              <Text
+                variant="small"
+                style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
+              >
                 Minimum RU/s
               </Text>
-              <FontIcon iconName="Info" style={{ fontSize: 12, color: "#666" }} />
+              <FontIcon iconName="Info" style={{ fontSize: 12, color: "var(--colorNeutralForeground2)" }} />
             </Stack>
             <Text
               style={{
@@ -583,6 +658,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
                 alignItems: "center",
                 justifyContent: "center",
                 boxSizing: "border-box",
+                color: "var(--colorNeutralForeground1)",
               }}
             >
               {AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)}
@@ -596,6 +672,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
               fontSize: 12,
               fontWeight: 400,
               paddingBottom: 6,
+              color: "var(--colorNeutralForeground1)",
             }}
           >
             x 10 =
@@ -604,10 +681,13 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           {/* Column 3: Maximum RU/s */}
           <Stack tokens={{ childrenGap: 4 }}>
             <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
-              <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
+              <Text
+                variant="small"
+                style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
+              >
                 Maximum RU/s
               </Text>
-              <FontIcon iconName="Info" style={{ fontSize: 12, color: "#666" }} />
+              <FontIcon iconName="Info" style={{ fontSize: 12, color: "var(--colorNeutralForeground2)" }} />
             </Stack>
             <TextField
               required
@@ -616,8 +696,25 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
               key="auto pilot throughput input"
               styles={{
                 ...getTextFieldStyles(this.props.maxAutoPilotThroughput, this.props.maxAutoPilotThroughputBaseline),
-                fieldGroup: { width: 100, height: 28 },
+                fieldGroup: {
-                field: { fontSize: 14, fontWeight: 400 },
+                  width: 100,
+                  height: 28,
+                  backgroundColor: "var(--colorNeutralBackground4)",
+                },
+                field: {
+                  fontSize: 14,
+                  fontWeight: 400,
+                  color: "var(--colorNeutralForeground1)",
+                  backgroundColor: "var(--colorNeutralBackground4)",
+                },
+                root: {
+                  selectors: {
+                    input: {
+                      backgroundColor: "var(--colorNeutralBackground4)",
+                      color: "var(--colorNeutralForeground1)",
+                    },
+                  },
+                },
               }}
               disabled={this.overrideWithProvisionedThroughputSettings()}
               step={AutoPilotUtils.autoPilotIncrementStep}
@@ -674,7 +771,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
             </Stack>
           )}
           {this.props.isAutoPilotSelected ? (
-            <Text style={{ marginTop: "40px" }}>
+            <Text style={{ marginTop: "40px", color: "var(--colorNeutralForeground1)" }}>
               Based on usage, your {this.props.collectionName ? "container" : "database"} throughput will scale from{" "}
               <b>
                 {AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)} RU/s (10% of max RU/s) -{" "}
@@ -687,7 +784,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
               {this.state.exceedFreeTierThroughput && (
                 <MessageBar
                   messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
-                  styles={messageBarStyles}
+                  styles={this.darkThemeMessageBarStyles}
                   style={{ marginTop: "40px" }}
                 >
                   {`Billing will apply if you provision more than ${SharedConstants.FreeTierLimits.RU} RU/s of manual throughput, or if the resource scales beyond ${SharedConstants.FreeTierLimits.RU} RU/s with autoscale.`}
@@ -696,7 +793,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
             </>
           )}
           {!this.overrideWithProvisionedThroughputSettings() && (
-            <Text>
+            <Text style={{ color: "var(--colorNeutralForeground1)" }}>
               Estimate your required RU/s with
               <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
                 {` capacity calculator`} <FontIcon iconName="NavigateExternalInline" />
@@ -737,6 +834,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         {warningMessage && (
           <MessageBar
             messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+            styles={this.darkThemeMessageBarStyles}
             role="alert"
           >
             {warningMessage}

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap

@@ -16,17 +16,35 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
       }
     }
     role="alert"
-  >
-    <Text
     styles={
       {
         "root": {
-            "color": "windowtext",
+          "marginTop": "5px",
-            "fontSize": 14,
+          "selectors": {
+            "&.ms-MessageBar--info": {
+              "backgroundColor": "var(--colorNeutralBackground3)",
+              "border": "1px solid var(--colorNeutralStroke1)",
+            },
+            "&.ms-MessageBar--severeWarning": {
+              "backgroundColor": "var(--colorStatusDangerBackground1)",
+              "border": "1px solid var(--colorStatusDangerBorder1)",
+            },
+            "&.ms-MessageBar--warning": {
+              "backgroundColor": "var(--colorStatusWarningBackground1)",
+              "border": "1px solid var(--colorStatusWarningBorder1)",
+            },
+            ".ms-MessageBar-icon": {
+              "color": "var(--colorNeutralForeground1)",
+            },
+            ".ms-MessageBar-text": {
+              "color": "var(--colorNeutralForeground1)",
+            },
+          },
         },
       }
     }
   >
+    <Text>
       Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes
     </Text>
   </StyledMessageBar>
@@ -41,7 +59,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
             styles={
               {
                 "root": {
-                  "color": "windowtext",
+                  "color": "var(--colorNeutralForeground1)",
                   "fontSize": 14,
                 },
               }
@@ -62,11 +80,27 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
       styles={
         {
           "root": {
-            "backgroundColor": "white",
             "marginTop": "5px",
+            "selectors": {
+              "&.ms-MessageBar--info": {
+                "backgroundColor": "var(--colorNeutralBackground3)",
+                "border": "1px solid var(--colorNeutralStroke1)",
+              },
+              "&.ms-MessageBar--severeWarning": {
+                "backgroundColor": "var(--colorStatusDangerBackground1)",
+                "border": "1px solid var(--colorStatusDangerBorder1)",
+              },
+              "&.ms-MessageBar--warning": {
+                "backgroundColor": "var(--colorStatusWarningBackground1)",
+                "border": "1px solid var(--colorStatusWarningBorder1)",
+              },
+              ".ms-MessageBar-icon": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              ".ms-MessageBar-text": {
+                "color": "var(--colorNeutralForeground1)",
+              },
             },
-          "text": {
-            "fontSize": 14,
           },
         }
       }
@@ -76,7 +110,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         styles={
           {
             "root": {
-              "color": "windowtext",
+              "color": "var(--colorNeutralForeground1)",
               "fontSize": 14,
             },
           }
@@ -121,15 +155,47 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                 ".ms-ChoiceField-field.is-checked::before": {
                   "borderColor": undefined,
                 },
+                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
                 ".ms-ChoiceField-wrapper label": {
+                  "color": "var(--colorNeutralForeground1)",
                   "fontFamily": undefined,
                   "fontSize": 14,
                   "padding": "2px 5px",
                   "whiteSpace": "nowrap",
                 },
+                ".ms-ChoiceFieldLabel": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
+                ".ms-ChoiceFieldLabel:hover": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
               },
             },
           ],
+          "label": {
+            "color": "var(--colorNeutralForeground1)",
+          },
+          "root": {
+            "selectors": {
+              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              ".ms-ChoiceField-innerField": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              ".ms-ChoiceFieldLabel": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+            },
+          },
         }
       }
     />
@@ -185,6 +251,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
               <Text
                 style={
                   {
+                    "color": "var(--colorNeutralForeground1)",
                     "fontWeight": 600,
                     "lineHeight": "20px",
                   }
@@ -197,7 +264,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                 iconName="Info"
                 style={
                   {
-                    "color": "#666",
+                    "color": "var(--colorNeutralForeground2)",
                     "fontSize": 12,
                   }
                 }
@@ -210,6 +277,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                   "backgroundColor": "transparent",
                   "border": "none",
                   "boxSizing": "border-box",
+                  "color": "var(--colorNeutralForeground1)",
                   "display": "flex",
                   "fontFamily": "Segoe UI",
                   "fontSize": 14,
@@ -226,6 +294,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
           <Text
             style={
               {
+                "color": "var(--colorNeutralForeground1)",
                 "fontFamily": "Segoe UI",
                 "fontSize": 12,
                 "fontWeight": 400,
@@ -254,6 +323,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
               <Text
                 style={
                   {
+                    "color": "var(--colorNeutralForeground1)",
                     "fontWeight": 600,
                     "lineHeight": "20px",
                   }
@@ -266,7 +336,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                 iconName="Info"
                 style={
                   {
-                    "color": "#666",
+                    "color": "var(--colorNeutralForeground2)",
                     "fontSize": 12,
                   }
                 }
@@ -285,13 +355,36 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
               styles={
                 {
                   "field": {
+                    "backgroundColor": "var(--colorNeutralBackground4)",
+                    "color": "var(--colorNeutralForeground1)",
                     "fontSize": 14,
                     "fontWeight": 400,
                   },
                   "fieldGroup": {
+                    "backgroundColor": "var(--colorNeutralBackground4)",
                     "height": 28,
                     "width": 100,
                   },
+                  "root": {
+                    "selectors": {
+                      "input": {
+                        "backgroundColor": "var(--colorNeutralBackground4)",
+                        "color": "var(--colorNeutralForeground1)",
+                      },
+                    },
+                  },
+                  "subComponentStyles": {
+                    "label": {
+                      "root": {
+                        "color": "var(--colorNeutralForeground1)",
+                      },
+                    },
+                  },
+                  "suffix": {
+                    "backgroundColor": "var(--colorNeutralBackground2)",
+                    "border": "1px solid var(--colorNeutralStroke1)",
+                    "color": "var(--colorNeutralForeground1)",
+                  },
                 }
               }
               type="number"
@@ -333,6 +426,15 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                 >
                   5,000
                 </span>
+                <span
+                  style={
+                    {
+                      "float": "right",
+                    }
+                  }
+                >
+                  1,000,000
+                </span>
                 <span
                   data-test="soft-allowed-maximum-throughput"
                   style={
@@ -352,7 +454,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                 {
                   "progressBar": [
                     {
-                      "backgroundColor": "rgb(251, 217, 203)",
+                      "backgroundColor": "var(--colorStatusDangerBackground1)",
                     },
                   ],
                 }
@@ -376,7 +478,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                         {
                           "selectors": {
                             "::before": {
-                              "backgroundColor": "rgb(200, 200, 200)",
+                              "backgroundColor": "var(--colorNeutralStroke2)",
                               "height": "3px",
                               "marginTop": "-1px",
                             },
@@ -404,7 +506,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                         {
                           "selectors": {
                             "::before": {
-                              "backgroundColor": "rgb(200, 200, 200)",
+                              "backgroundColor": "var(--colorNeutralStroke2)",
                               "height": "3px",
                               "marginTop": "-1px",
                             },
@@ -421,12 +523,39 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
           </Stack>
           <StyledMessageBar
             messageBarType={3}
+            styles={
+              {
+                "root": {
+                  "marginTop": "5px",
+                  "selectors": {
+                    "&.ms-MessageBar--info": {
+                      "backgroundColor": "var(--colorNeutralBackground3)",
+                      "border": "1px solid var(--colorNeutralStroke1)",
+                    },
+                    "&.ms-MessageBar--severeWarning": {
+                      "backgroundColor": "var(--colorStatusDangerBackground1)",
+                      "border": "1px solid var(--colorStatusDangerBorder1)",
+                    },
+                    "&.ms-MessageBar--warning": {
+                      "backgroundColor": "var(--colorStatusWarningBackground1)",
+                      "border": "1px solid var(--colorStatusWarningBorder1)",
+                    },
+                    ".ms-MessageBar-icon": {
+                      "color": "var(--colorNeutralForeground1)",
+                    },
+                    ".ms-MessageBar-text": {
+                      "color": "var(--colorNeutralForeground1)",
+                    },
+                  },
+                },
+              }
+            }
           >
             <Text
               styles={
                 {
                   "root": {
-                    "color": "windowtext",
+                    "color": "var(--colorNeutralForeground1)",
                     "fontSize": 14,
                   },
                 }
@@ -447,6 +576,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         <Text
           style={
             {
+              "color": "var(--colorNeutralForeground1)",
               "marginTop": "40px",
             }
           }
@@ -478,10 +608,22 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
               }
             }
           >
-            <StyledLabelBase>
+            <StyledLabelBase
+              style={
+                {
+                  "color": "var(--colorNeutralForeground1)",
+                }
+              }
+            >
               Storage capacity
             </StyledLabelBase>
-            <Text>
+            <Text
+              style={
+                {
+                  "color": "var(--colorNeutralForeground1)",
+                }
+              }
+            >
               Unlimited
             </Text>
           </Stack>
@@ -500,6 +642,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         <Text
           style={
             {
+              "color": "var(--colorNeutralForeground1)",
               "fontWeight": 600,
             }
           }
@@ -522,6 +665,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
             <Text
               style={
                 {
+                  "color": "var(--colorNeutralForeground1)",
                   "fontWeight": 600,
                 }
               }
@@ -540,6 +684,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
               <Text
                 style={
                   {
+                    "color": "var(--colorNeutralForeground1)",
                     "width": "50%",
                   }
                 }
@@ -552,6 +697,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
               <Text
                 style={
                   {
+                    "color": "var(--colorNeutralForeground1)",
                     "width": "50%",
                   }
                 }
@@ -566,6 +712,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
           <Text
             style={
               {
+                "color": "var(--colorNeutralForeground1)",
                 "fontWeight": 600,
               }
             }
@@ -576,6 +723,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
             horizontal={true}
             style={
               {
+                "color": "var(--colorNeutralForeground1)",
                 "marginTop": 5,
               }
             }
@@ -583,6 +731,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
             <Text
               style={
                 {
+                  "color": "var(--colorNeutralForeground1)",
                   "width": "50%",
                 }
               }
@@ -595,6 +744,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
             <Text
               style={
                 {
+                  "color": "var(--colorNeutralForeground1)",
                   "width": "50%",
                 }
               }
@@ -609,6 +759,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         <Text
           style={
             {
+              "color": "var(--colorNeutralForeground1)",
               "fontWeight": 600,
               "marginTop": 15,
             }
@@ -642,6 +793,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         <Text
           style={
             {
+              "color": "var(--colorNeutralForeground1)",
               "marginTop": 15,
             }
           }
@@ -676,7 +828,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             styles={
               {
                 "root": {
-                  "color": "windowtext",
+                  "color": "var(--colorNeutralForeground1)",
                   "fontSize": 14,
                 },
               }
@@ -717,15 +869,47 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
                 ".ms-ChoiceField-field.is-checked::before": {
                   "borderColor": "",
                 },
+                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
                 ".ms-ChoiceField-wrapper label": {
+                  "color": "var(--colorNeutralForeground1)",
                   "fontFamily": undefined,
                   "fontSize": 14,
                   "padding": "2px 5px",
                   "whiteSpace": "nowrap",
                 },
+                ".ms-ChoiceFieldLabel": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
+                ".ms-ChoiceFieldLabel:hover": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
               },
             },
           ],
+          "label": {
+            "color": "var(--colorNeutralForeground1)",
+          },
+          "root": {
+            "selectors": {
+              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              ".ms-ChoiceField-innerField": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              ".ms-ChoiceFieldLabel": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+            },
+          },
         }
       }
     />
@@ -765,17 +949,53 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
           step={100}
           styles={
             {
+              "field": {
+                "backgroundColor": "var(--colorNeutralBackground2)",
+                "color": "var(--colorNeutralForeground1)",
+                "selectors": {
+                  ":disabled": {
+                    "backgroundColor": "var(--colorNeutralBackground2)",
+                    "color": "var(--colorNeutralForeground2)",
+                  },
+                },
+              },
               "fieldGroup": {
-                "borderColor": "",
+                "backgroundColor": "var(--colorNeutralBackground2)",
+                "borderColor": "var(--colorNeutralStroke1)",
                 "height": 25,
                 "selectors": {
                   ":disabled": {
-                    "backgroundColor": undefined,
+                    "backgroundColor": "var(--colorNeutralBackground2)",
-                    "borderColor": undefined,
+                    "borderColor": "var(--colorNeutralStroke1)",
+                    "color": "var(--colorNeutralForeground2)",
+                  },
+                  "input": {
+                    "backgroundColor": "var(--colorNeutralBackground2)",
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                  "input#autopilotInput": {
+                    "backgroundColor": "var(--colorNeutralBackground4)",
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                  "input:disabled": {
+                    "backgroundColor": "var(--colorNeutralBackground2)",
+                    "color": "var(--colorNeutralForeground2)",
                   },
                 },
                 "width": 300,
               },
+              "subComponentStyles": {
+                "label": {
+                  "root": {
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                },
+              },
+              "suffix": {
+                "backgroundColor": "var(--colorNeutralBackground2)",
+                "border": "1px solid var(--colorNeutralStroke1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
             }
           }
           type="number"
@@ -814,6 +1034,15 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
                 >
                   5,000
                 </span>
+                <span
+                  style={
+                    {
+                      "float": "right",
+                    }
+                  }
+                >
+                  1,000,000
+                </span>
                 <span
                   data-test="soft-allowed-maximum-throughput"
                   style={
@@ -833,7 +1062,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
                 {
                   "progressBar": [
                     {
-                      "backgroundColor": "rgb(251, 217, 203)",
+                      "backgroundColor": "var(--colorStatusDangerBackground1)",
                     },
                   ],
                 }
@@ -857,7 +1086,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
                         {
                           "selectors": {
                             "::before": {
-                              "backgroundColor": "rgb(200, 200, 200)",
+                              "backgroundColor": "var(--colorNeutralStroke2)",
                               "height": "3px",
                               "marginTop": "-1px",
                             },
@@ -885,7 +1114,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
                         {
                           "selectors": {
                             "::before": {
-                              "backgroundColor": "rgb(200, 200, 200)",
+                              "backgroundColor": "var(--colorNeutralStroke2)",
                               "height": "3px",
                               "marginTop": "-1px",
                             },
@@ -902,12 +1131,39 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
           </Stack>
           <StyledMessageBar
             messageBarType={3}
+            styles={
+              {
+                "root": {
+                  "marginTop": "5px",
+                  "selectors": {
+                    "&.ms-MessageBar--info": {
+                      "backgroundColor": "var(--colorNeutralBackground3)",
+                      "border": "1px solid var(--colorNeutralStroke1)",
+                    },
+                    "&.ms-MessageBar--severeWarning": {
+                      "backgroundColor": "var(--colorStatusDangerBackground1)",
+                      "border": "1px solid var(--colorStatusDangerBorder1)",
+                    },
+                    "&.ms-MessageBar--warning": {
+                      "backgroundColor": "var(--colorStatusWarningBackground1)",
+                      "border": "1px solid var(--colorStatusWarningBorder1)",
+                    },
+                    ".ms-MessageBar-icon": {
+                      "color": "var(--colorNeutralForeground1)",
+                    },
+                    ".ms-MessageBar-text": {
+                      "color": "var(--colorNeutralForeground1)",
+                    },
+                  },
+                },
+              }
+            }
           >
             <Text
               styles={
                 {
                   "root": {
-                    "color": "windowtext",
+                    "color": "var(--colorNeutralForeground1)",
                     "fontSize": 14,
                   },
                 }
@@ -925,7 +1181,13 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             </Text>
           </StyledMessageBar>
         </Stack>
-        <Text>
+        <Text
+          style={
+            {
+              "color": "var(--colorNeutralForeground1)",
+            }
+          }
+        >
           Estimate your required RU/s with
           <StyledLinkBase
             href="https://cosmos.azure.com/capacitycalculator/"
@@ -969,10 +1231,22 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
               }
             }
           >
-            <StyledLabelBase>
+            <StyledLabelBase
+              style={
+                {
+                  "color": "var(--colorNeutralForeground1)",
+                }
+              }
+            >
               Storage capacity
             </StyledLabelBase>
-            <Text>
+            <Text
+              style={
+                {
+                  "color": "var(--colorNeutralForeground1)",
+                }
+              }
+            >
               Unlimited
             </Text>
           </Stack>
@@ -991,6 +1265,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
         <Text
           style={
             {
+              "color": "var(--colorNeutralForeground1)",
               "fontWeight": 600,
             }
           }
@@ -1012,6 +1287,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
           <Text
             style={
               {
+                "color": "var(--colorNeutralForeground1)",
                 "fontWeight": 600,
               }
             }
@@ -1029,6 +1305,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             <Text
               style={
                 {
+                  "color": "var(--colorNeutralForeground1)",
                   "width": "33%",
                 }
               }
@@ -1041,6 +1318,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             <Text
               style={
                 {
+                  "color": "var(--colorNeutralForeground1)",
                   "width": "33%",
                 }
               }
@@ -1053,6 +1331,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             <Text
               style={
                 {
+                  "color": "var(--colorNeutralForeground1)",
                   "width": "33%",
                 }
               }
@@ -1067,6 +1346,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
         <Text
           style={
             {
+              "color": "var(--colorNeutralForeground1)",
               "fontWeight": 600,
               "marginTop": 15,
             }
@@ -1099,6 +1379,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
         <Text
           style={
             {
+              "color": "var(--colorNeutralForeground1)",
               "marginTop": 15,
             }
           }
@@ -1133,7 +1414,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             styles={
               {
                 "root": {
-                  "color": "windowtext",
+                  "color": "var(--colorNeutralForeground1)",
                   "fontSize": 14,
                 },
               }
@@ -1174,15 +1455,47 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
                 ".ms-ChoiceField-field.is-checked::before": {
                   "borderColor": "",
                 },
+                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
                 ".ms-ChoiceField-wrapper label": {
+                  "color": "var(--colorNeutralForeground1)",
                   "fontFamily": undefined,
                   "fontSize": 14,
                   "padding": "2px 5px",
                   "whiteSpace": "nowrap",
                 },
+                ".ms-ChoiceFieldLabel": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
+                ".ms-ChoiceFieldLabel:hover": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
               },
             },
           ],
+          "label": {
+            "color": "var(--colorNeutralForeground1)",
+          },
+          "root": {
+            "selectors": {
+              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              ".ms-ChoiceField-innerField": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              ".ms-ChoiceFieldLabel": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+            },
+          },
         }
       }
     />
@@ -1222,17 +1535,53 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
           step={100}
           styles={
             {
+              "field": {
+                "backgroundColor": "var(--colorNeutralBackground2)",
+                "color": "var(--colorNeutralForeground1)",
+                "selectors": {
+                  ":disabled": {
+                    "backgroundColor": "var(--colorNeutralBackground2)",
+                    "color": "var(--colorNeutralForeground2)",
+                  },
+                },
+              },
               "fieldGroup": {
-                "borderColor": "",
+                "backgroundColor": "var(--colorNeutralBackground2)",
+                "borderColor": "var(--colorNeutralStroke1)",
                 "height": 25,
                 "selectors": {
                   ":disabled": {
-                    "backgroundColor": undefined,
+                    "backgroundColor": "var(--colorNeutralBackground2)",
-                    "borderColor": undefined,
+                    "borderColor": "var(--colorNeutralStroke1)",
+                    "color": "var(--colorNeutralForeground2)",
+                  },
+                  "input": {
+                    "backgroundColor": "var(--colorNeutralBackground2)",
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                  "input#autopilotInput": {
+                    "backgroundColor": "var(--colorNeutralBackground4)",
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                  "input:disabled": {
+                    "backgroundColor": "var(--colorNeutralBackground2)",
+                    "color": "var(--colorNeutralForeground2)",
                   },
                 },
                 "width": 300,
               },
+              "subComponentStyles": {
+                "label": {
+                  "root": {
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                },
+              },
+              "suffix": {
+                "backgroundColor": "var(--colorNeutralBackground2)",
+                "border": "1px solid var(--colorNeutralStroke1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
             }
           }
           type="number"
@@ -1271,6 +1620,15 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
                 >
                   5,000
                 </span>
+                <span
+                  style={
+                    {
+                      "float": "right",
+                    }
+                  }
+                >
+                  1,000,000
+                </span>
                 <span
                   data-test="soft-allowed-maximum-throughput"
                   style={
@@ -1290,7 +1648,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
                 {
                   "progressBar": [
                     {
-                      "backgroundColor": "rgb(251, 217, 203)",
+                      "backgroundColor": "var(--colorStatusDangerBackground1)",
                     },
                   ],
                 }
@@ -1314,7 +1672,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
                         {
                           "selectors": {
                             "::before": {
-                              "backgroundColor": "rgb(200, 200, 200)",
+                              "backgroundColor": "var(--colorNeutralStroke2)",
                               "height": "3px",
                               "marginTop": "-1px",
                             },
@@ -1342,7 +1700,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
                         {
                           "selectors": {
                             "::before": {
-                              "backgroundColor": "rgb(200, 200, 200)",
+                              "backgroundColor": "var(--colorNeutralStroke2)",
                               "height": "3px",
                               "marginTop": "-1px",
                             },
@@ -1359,12 +1717,39 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
           </Stack>
           <StyledMessageBar
             messageBarType={3}
+            styles={
+              {
+                "root": {
+                  "marginTop": "5px",
+                  "selectors": {
+                    "&.ms-MessageBar--info": {
+                      "backgroundColor": "var(--colorNeutralBackground3)",
+                      "border": "1px solid var(--colorNeutralStroke1)",
+                    },
+                    "&.ms-MessageBar--severeWarning": {
+                      "backgroundColor": "var(--colorStatusDangerBackground1)",
+                      "border": "1px solid var(--colorStatusDangerBorder1)",
+                    },
+                    "&.ms-MessageBar--warning": {
+                      "backgroundColor": "var(--colorStatusWarningBackground1)",
+                      "border": "1px solid var(--colorStatusWarningBorder1)",
+                    },
+                    ".ms-MessageBar-icon": {
+                      "color": "var(--colorNeutralForeground1)",
+                    },
+                    ".ms-MessageBar-text": {
+                      "color": "var(--colorNeutralForeground1)",
+                    },
+                  },
+                },
+              }
+            }
           >
             <Text
               styles={
                 {
                   "root": {
-                    "color": "windowtext",
+                    "color": "var(--colorNeutralForeground1)",
                     "fontSize": 14,
                   },
                 }
@@ -1382,7 +1767,13 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             </Text>
           </StyledMessageBar>
         </Stack>
-        <Text>
+        <Text
+          style={
+            {
+              "color": "var(--colorNeutralForeground1)",
+            }
+          }
+        >
           Estimate your required RU/s with
           <StyledLinkBase
             href="https://cosmos.azure.com/capacitycalculator/"
@@ -1409,10 +1800,22 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
               }
             }
           >
-            <StyledLabelBase>
+            <StyledLabelBase
+              style={
+                {
+                  "color": "var(--colorNeutralForeground1)",
+                }
+              }
+            >
               Storage capacity
             </StyledLabelBase>
-            <Text>
+            <Text
+              style={
+                {
+                  "color": "var(--colorNeutralForeground1)",
+                }
+              }
+            >
               Unlimited
             </Text>
           </Stack>
@@ -1431,6 +1834,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
         <Text
           style={
             {
+              "color": "var(--colorNeutralForeground1)",
               "fontWeight": 600,
             }
           }
@@ -1452,6 +1856,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
           <Text
             style={
               {
+                "color": "var(--colorNeutralForeground1)",
                 "fontWeight": 600,
               }
             }
@@ -1469,6 +1874,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             <Text
               style={
                 {
+                  "color": "var(--colorNeutralForeground1)",
                   "width": "33%",
                 }
               }
@@ -1481,6 +1887,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             <Text
               style={
                 {
+                  "color": "var(--colorNeutralForeground1)",
                   "width": "33%",
                 }
               }
@@ -1493,6 +1900,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             <Text
               style={
                 {
+                  "color": "var(--colorNeutralForeground1)",
                   "width": "33%",
                 }
               }
@@ -1507,6 +1915,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
         <Text
           style={
             {
+              "color": "var(--colorNeutralForeground1)",
               "fontWeight": 600,
               "marginTop": 15,
             }
@@ -1539,6 +1948,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
         <Text
           style={
             {
+              "color": "var(--colorNeutralForeground1)",
               "marginTop": 15,
             }
           }

src/Explorer/Controls/Settings/SettingsSubComponents/ToolTipLabelComponent.tsx

@@ -1,5 +1,5 @@
+import { DirectionalHint, IIconStyles, Icon, Stack, Text, TooltipHost } from "@fluentui/react";
 import * as React from "react";
-import { Stack, Text, IIconStyles, Icon, TooltipHost, DirectionalHint } from "@fluentui/react";
 import { toolTipLabelStackTokens } from "../SettingsRenderUtils";
 
 export interface ToolTipLabelComponentProps {
@@ -14,7 +14,9 @@ export class ToolTipLabelComponent extends React.Component<ToolTipLabelComponent
     return (
       <>
         <Stack horizontal verticalAlign="center" tokens={toolTipLabelStackTokens}>
-          {this.props.label && <Text style={{ fontWeight: 600 }}>{this.props.label}</Text>}
+          {this.props.label && (
+            <Text style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>{this.props.label}</Text>
+          )}
           {this.props.toolTipElement && (
             <TooltipHost
               content={this.props.toolTipElement}

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap

@@ -11,6 +11,7 @@ exports[`ComputedPropertiesComponent renders 1`] = `
   <Text
     style={
       {
+        "color": "var(--colorNeutralForeground1)",
         "marginBottom": "10px",
         "marginLeft": "30px",
       }
@@ -30,6 +31,7 @@ exports[`ComputedPropertiesComponent renders 1`] = `
   </Text>
   <div
     className="settingsV2Editor"
+    data-test="computed-properties-editor"
     tabIndex={0}
   />
 </Stack>

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ConflictResolutionComponent.test.tsx.snap

@@ -37,15 +37,47 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
               ".ms-ChoiceField-field.is-checked::before": {
                 "borderColor": undefined,
               },
+              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+                "color": "var(--colorNeutralForeground1)",
+              },
               ".ms-ChoiceField-wrapper label": {
+                "color": "var(--colorNeutralForeground1)",
                 "fontFamily": undefined,
                 "fontSize": 14,
                 "padding": "2px 5px",
                 "whiteSpace": "nowrap",
               },
+              ".ms-ChoiceFieldLabel": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              ".ms-ChoiceFieldLabel:hover": {
+                "color": "var(--colorNeutralForeground1)",
+              },
             },
           },
         ],
+        "label": {
+          "color": "var(--colorNeutralForeground1)",
+        },
+        "root": {
+          "selectors": {
+            ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+              "color": "var(--colorNeutralForeground1)",
+            },
+            ".ms-ChoiceField-innerField": {
+              "color": "var(--colorNeutralForeground1)",
+            },
+            ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+              "color": "var(--colorNeutralForeground1)",
+            },
+            ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+              "color": "var(--colorNeutralForeground1)",
+            },
+            ".ms-ChoiceFieldLabel": {
+              "color": "var(--colorNeutralForeground1)",
+            },
+          },
+        },
       }
     }
   />
@@ -56,17 +88,44 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
     onRenderLabel={[Function]}
     styles={
       {
+        "field": {
+          "backgroundColor": "var(--colorNeutralBackground2)",
+          "color": "var(--colorNeutralForeground1)",
+          "selectors": {
+            ":disabled": {
+              "backgroundColor": "var(--colorNeutralBackground2)",
+              "color": "var(--colorNeutralForeground2)",
+            },
+          },
+        },
         "fieldGroup": {
-          "borderColor": "",
+          "backgroundColor": "var(--colorNeutralBackground2)",
+          "borderColor": "var(--colorNeutralStroke1)",
           "height": 25,
           "selectors": {
             ":disabled": {
-              "backgroundColor": undefined,
+              "backgroundColor": "var(--colorNeutralBackground2)",
-              "borderColor": undefined,
+              "borderColor": "var(--colorNeutralStroke1)",
+              "color": "var(--colorNeutralForeground2)",
+            },
+            "input": {
+              "backgroundColor": "var(--colorNeutralBackground2)",
+              "color": "var(--colorNeutralForeground1)",
+            },
+            "input:disabled": {
+              "backgroundColor": "var(--colorNeutralBackground2)",
+              "color": "var(--colorNeutralForeground2)",
             },
           },
           "width": 300,
         },
+        "subComponentStyles": {
+          "label": {
+            "root": {
+              "color": "var(--colorNeutralForeground1)",
+            },
+          },
+        },
       }
     }
     value=""
@@ -111,15 +170,47 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
               ".ms-ChoiceField-field.is-checked::before": {
                 "borderColor": "",
               },
+              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+                "color": "var(--colorNeutralForeground1)",
+              },
               ".ms-ChoiceField-wrapper label": {
+                "color": "var(--colorNeutralForeground1)",
                 "fontFamily": undefined,
                 "fontSize": 14,
                 "padding": "2px 5px",
                 "whiteSpace": "nowrap",
               },
+              ".ms-ChoiceFieldLabel": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              ".ms-ChoiceFieldLabel:hover": {
+                "color": "var(--colorNeutralForeground1)",
+              },
             },
           },
         ],
+        "label": {
+          "color": "var(--colorNeutralForeground1)",
+        },
+        "root": {
+          "selectors": {
+            ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+              "color": "var(--colorNeutralForeground1)",
+            },
+            ".ms-ChoiceField-innerField": {
+              "color": "var(--colorNeutralForeground1)",
+            },
+            ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+              "color": "var(--colorNeutralForeground1)",
+            },
+            ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+              "color": "var(--colorNeutralForeground1)",
+            },
+            ".ms-ChoiceFieldLabel": {
+              "color": "var(--colorNeutralForeground1)",
+            },
+          },
+        },
       }
     }
   />
@@ -130,17 +221,44 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
     onRenderLabel={[Function]}
     styles={
       {
+        "field": {
+          "backgroundColor": "var(--colorNeutralBackground2)",
+          "color": "var(--colorNeutralForeground1)",
+          "selectors": {
+            ":disabled": {
+              "backgroundColor": "var(--colorNeutralBackground2)",
+              "color": "var(--colorNeutralForeground2)",
+            },
+          },
+        },
         "fieldGroup": {
-          "borderColor": "",
+          "backgroundColor": "var(--colorNeutralBackground2)",
+          "borderColor": "var(--colorNeutralStroke1)",
           "height": 25,
           "selectors": {
             ":disabled": {
-              "backgroundColor": undefined,
+              "backgroundColor": "var(--colorNeutralBackground2)",
-              "borderColor": undefined,
+              "borderColor": "var(--colorNeutralStroke1)",
+              "color": "var(--colorNeutralForeground2)",
+            },
+            "input": {
+              "backgroundColor": "var(--colorNeutralBackground2)",
+              "color": "var(--colorNeutralForeground1)",
+            },
+            "input:disabled": {
+              "backgroundColor": "var(--colorNeutralBackground2)",
+              "color": "var(--colorNeutralForeground2)",
             },
           },
           "width": 300,
         },
+        "subComponentStyles": {
+          "label": {
+            "root": {
+              "color": "var(--colorNeutralForeground1)",
+            },
+          },
+        },
       }
     }
     value=""

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/PartitionKeyComponent.test.tsx.snap

@@ -26,6 +26,7 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
       styles={
         {
           "root": {
+            "color": "var(--colorNeutralForeground1)",
             "fontSize": 16,
             "fontWeight": 600,
           },
@@ -54,6 +55,7 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
           styles={
             {
               "root": {
+                "color": "var(--colorNeutralForeground1)",
                 "fontWeight": 600,
               },
             }
@@ -66,6 +68,7 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
           styles={
             {
               "root": {
+                "color": "var(--colorNeutralForeground1)",
                 "fontWeight": 600,
               },
             }
@@ -75,35 +78,91 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
         </Text>
       </Stack>
       <Stack
+        data-test="partition-key-values"
         tokens={
           {
             "childrenGap": 5,
           }
         }
       >
-        <Text />
+        <Text
-        <Text>
+          styles={
+            {
+              "root": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+            }
+          }
+        />
+        <Text
+          styles={
+            {
+              "root": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+            }
+          }
+        >
           Non-hierarchical
         </Text>
       </Stack>
     </Stack>
   </Stack>
   <StyledMessageBar
+    data-test="partition-key-warning"
+    messageBarIconProps={
+      {
+        "className": "messageBarWarningIcon",
+        "iconName": "WarningSolid",
+      }
+    }
     messageBarType={5}
+    styles={
+      {
+        "root": {
+          "selectors": {
+            "&.ms-MessageBar--warning": {
+              "backgroundColor": "var(--colorStatusWarningBackground1)",
+              "border": "1px solid var(--colorStatusWarningBorder1)",
+            },
+            ".ms-MessageBar-icon": {
+              "color": "var(--colorNeutralForeground1)",
+            },
+            ".ms-MessageBar-text": {
+              "color": "var(--colorNeutralForeground1)",
+            },
+          },
+        },
+      }
+    }
   >
     To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to the source container for the entire duration of the partition key change process.
     <StyledLinkBase
       href="https://learn.microsoft.com/azure/cosmos-db/container-copy#how-does-container-copy-work"
+      style={
+        {
+          "color": "var(--colorBrandForeground1)",
+        }
+      }
       target="_blank"
       underline={true}
     >
       Learn more
     </StyledLinkBase>
   </StyledMessageBar>
-  <Text>
+  <Text
+    styles={
+      {
+        "root": {
+          "color": "var(--colorNeutralForeground1)",
+        },
+      }
+    }
+  >
     To change the partition key, a new destination container must be created or an existing destination container selected. Data will then be copied to the destination container.
   </Text>
   <CustomizedPrimaryButton
+    data-test="change-partition-key-button"
     onClick={[Function]}
     styles={
       {
@@ -158,6 +217,7 @@ exports[`PartitionKeyComponent renders read-only component and matches snapshot
           styles={
             {
               "root": {
+                "color": "var(--colorNeutralForeground1)",
                 "fontWeight": 600,
               },
             }
@@ -170,6 +230,7 @@ exports[`PartitionKeyComponent renders read-only component and matches snapshot
           styles={
             {
               "root": {
+                "color": "var(--colorNeutralForeground1)",
                 "fontWeight": 600,
               },
             }
@@ -179,14 +240,31 @@ exports[`PartitionKeyComponent renders read-only component and matches snapshot
         </Text>
       </Stack>
       <Stack
+        data-test="partition-key-values"
         tokens={
           {
             "childrenGap": 5,
           }
         }
       >
-        <Text />
+        <Text
-        <Text>
+          styles={
+            {
+              "root": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+            }
+          }
+        />
+        <Text
+          styles={
+            {
+              "root": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+            }
+          }
+        >
           Non-hierarchical
         </Text>
       </Stack>

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ToolTipLabelComponent.test.tsx.snap

@@ -14,6 +14,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
     <Text
       style={
         {
+          "color": "var(--colorNeutralForeground1)",
           "fontWeight": 600,
         }
       }

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -3,13 +3,76 @@
 exports[`SettingsComponent renders 1`] = `
 <div
   className="settingsV2MainContainer"
+  style={
+    {
+      "backgroundColor": "var(--colorNeutralBackground1)",
+      "color": "var(--colorNeutralForeground1)",
+      "position": "relative",
+    }
+  }
 >
   <div
     className="settingsV2TabsContainer"
+    style={
+      {
+        "backgroundColor": "var(--colorNeutralBackground1)",
+        "color": "var(--colorNeutralForeground1)",
+        "padding": "20px 24px",
+        "position": "relative",
+      }
+    }
   >
     <StyledPivot
       onLinkClick={[Function]}
       selectedKey="ScaleTab"
+      styles={
+        {
+          "itemContainer": {
+            "backgroundColor": "var(--colorNeutralBackground1)",
+            "color": "var(--colorNeutralForeground1)",
+          },
+          "link": {
+            "backgroundColor": "var(--colorNeutralBackground1)",
+            "color": "var(--colorNeutralForeground1)",
+            "selectors": {
+              "&:active": {
+                "backgroundColor": "var(--colorNeutralBackground1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+              "&:hover": {
+                "backgroundColor": "var(--colorNeutralBackground1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+              "&[aria-selected="true"]": {
+                "backgroundColor": "var(--colorNeutralBackground1)",
+                "color": "var(--colorNeutralForeground1)",
+                "selectors": {
+                  "&:active": {
+                    "backgroundColor": "var(--colorNeutralBackground1)",
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                  "&:hover": {
+                    "backgroundColor": "var(--colorNeutralBackground1)",
+                    "color": "var(--colorNeutralForeground1)",
+                  },
+                },
+              },
+            },
+          },
+          "root": {
+            "backgroundColor": "var(--colorNeutralBackground1)",
+            "color": "var(--colorNeutralForeground1)",
+            "selectors": {
+              "& .ms-Pivot-link": {
+                "color": "var(--colorNeutralForeground1)",
+              },
+              "& .ms-Pivot-link.is-selected::before": {
+                "backgroundColor": "var(--colorCompoundBrandBackground)",
+              },
+            },
+          },
+        }
+      }
     >
       <PivotItem
         headerButtonProps={
@@ -22,9 +85,21 @@ exports[`SettingsComponent renders 1`] = `
         key="ScaleTab"
         style={
           {
+            "backgroundColor": "var(--colorNeutralBackground1)",
+            "color": "var(--colorNeutralForeground1)",
             "marginTop": 20,
           }
         }
+      >
+        <Stack
+          styles={
+            {
+              "root": {
+                "backgroundColor": "var(--colorNeutralBackground1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+            }
+          }
         >
           <ScaleComponent
             collection={
@@ -105,6 +180,7 @@ exports[`SettingsComponent renders 1`] = `
             throughputBaseline={10000}
             wasAutopilotOriginallySet={false}
           />
+        </Stack>
       </PivotItem>
       <PivotItem
         headerButtonProps={
@@ -117,9 +193,21 @@ exports[`SettingsComponent renders 1`] = `
         key="SubSettingsTab"
         style={
           {
+            "backgroundColor": "var(--colorNeutralBackground1)",
+            "color": "var(--colorNeutralForeground1)",
             "marginTop": 20,
           }
         }
+      >
+        <Stack
+          styles={
+            {
+              "root": {
+                "backgroundColor": "var(--colorNeutralBackground1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+            }
+          }
         >
           <SubSettingsComponent
             changeFeedPolicy="Off"
@@ -209,6 +297,7 @@ exports[`SettingsComponent renders 1`] = `
             timeToLiveSeconds={5}
             timeToLiveSecondsBaseline={5}
           />
+        </Stack>
       </PivotItem>
       <PivotItem
         headerButtonProps={
@@ -221,9 +310,21 @@ exports[`SettingsComponent renders 1`] = `
         key="ContainerVectorPolicyTab"
         style={
           {
+            "backgroundColor": "var(--colorNeutralBackground1)",
+            "color": "var(--colorNeutralForeground1)",
             "marginTop": 20,
           }
         }
+      >
+        <Stack
+          styles={
+            {
+              "root": {
+                "backgroundColor": "var(--colorNeutralBackground1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+            }
+          }
         >
           <ContainerPolicyComponent
             fullTextPolicy={{}}
@@ -240,6 +341,7 @@ exports[`SettingsComponent renders 1`] = `
             vectorEmbeddingPolicy={{}}
             vectorEmbeddingPolicyBaseline={{}}
           />
+        </Stack>
       </PivotItem>
       <PivotItem
         headerButtonProps={
@@ -252,9 +354,21 @@ exports[`SettingsComponent renders 1`] = `
         key="IndexingPolicyTab"
         style={
           {
+            "backgroundColor": "var(--colorNeutralBackground1)",
+            "color": "var(--colorNeutralForeground1)",
             "marginTop": 20,
           }
         }
+      >
+        <Stack
+          styles={
+            {
+              "root": {
+                "backgroundColor": "var(--colorNeutralBackground1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+            }
+          }
         >
           <IndexingPolicyComponent
             indexingPolicyContent={
@@ -281,6 +395,7 @@ exports[`SettingsComponent renders 1`] = `
             resetShouldDiscardIndexingPolicy={[Function]}
             shouldDiscardIndexingPolicy={false}
           />
+        </Stack>
       </PivotItem>
       <PivotItem
         headerButtonProps={
@@ -293,9 +408,21 @@ exports[`SettingsComponent renders 1`] = `
         key="PartitionKeyTab"
         style={
           {
+            "backgroundColor": "var(--colorNeutralBackground1)",
+            "color": "var(--colorNeutralForeground1)",
             "marginTop": 20,
           }
         }
+      >
+        <Stack
+          styles={
+            {
+              "root": {
+                "backgroundColor": "var(--colorNeutralBackground1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+            }
+          }
         >
           <PartitionKeyComponent
             collection={
@@ -393,6 +520,7 @@ exports[`SettingsComponent renders 1`] = `
             }
             isReadOnly={false}
           />
+        </Stack>
       </PivotItem>
       <PivotItem
         headerButtonProps={
@@ -405,9 +533,21 @@ exports[`SettingsComponent renders 1`] = `
         key="ComputedPropertiesTab"
         style={
           {
+            "backgroundColor": "var(--colorNeutralBackground1)",
+            "color": "var(--colorNeutralForeground1)",
             "marginTop": 20,
           }
         }
+      >
+        <Stack
+          styles={
+            {
+              "root": {
+                "backgroundColor": "var(--colorNeutralBackground1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+            }
+          }
         >
           <ComputedPropertiesComponent
             computedPropertiesContent={
@@ -432,6 +572,7 @@ exports[`SettingsComponent renders 1`] = `
             resetShouldDiscardComputedProperties={[Function]}
             shouldDiscardComputedProperties={false}
           />
+        </Stack>
       </PivotItem>
       <PivotItem
         headerButtonProps={
@@ -444,9 +585,21 @@ exports[`SettingsComponent renders 1`] = `
         key="GlobalSecondaryIndexTab"
         style={
           {
+            "backgroundColor": "var(--colorNeutralBackground1)",
+            "color": "var(--colorNeutralForeground1)",
             "marginTop": 20,
           }
         }
+      >
+        <Stack
+          styles={
+            {
+              "root": {
+                "backgroundColor": "var(--colorNeutralBackground1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+            }
+          }
         >
           <GlobalSecondaryIndexComponent
             collection={
@@ -543,6 +696,7 @@ exports[`SettingsComponent renders 1`] = `
               }
             }
           />
+        </Stack>
       </PivotItem>
     </StyledPivot>
   </div>

src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`SettingsUtils functions render 1`] = `
     <Text
       style={
         {
+          "color": "var(--colorNeutralForeground1)",
           "fontWeight": 600,
         }
       }
@@ -15,6 +16,7 @@ exports[`SettingsUtils functions render 1`] = `
     <Text
       style={
         {
+          "color": "var(--colorNeutralForeground1)",
           "fontWeight": 600,
           "marginTop": 15,
         }
@@ -50,6 +52,7 @@ exports[`SettingsUtils functions render 1`] = `
     <Text
       style={
         {
+          "color": "var(--colorNeutralForeground1)",
           "marginTop": 15,
         }
       }
@@ -65,7 +68,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "windowtext",
+          "color": "var(--colorNeutralForeground1)",
           "fontSize": 14,
         },
       }
@@ -83,7 +86,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "windowtext",
+          "color": "var(--colorNeutralForeground1)",
           "fontSize": 14,
         },
       }
@@ -104,7 +107,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "windowtext",
+          "color": "var(--colorNeutralForeground1)",
           "fontSize": 14,
         },
       }
@@ -116,7 +119,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "windowtext",
+          "color": "var(--colorNeutralForeground1)",
           "fontSize": 14,
         },
       }
@@ -136,7 +139,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "windowtext",
+          "color": "var(--colorNeutralForeground1)",
           "fontSize": 14,
         },
       }
@@ -152,7 +155,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "windowtext",
+          "color": "var(--colorNeutralForeground1)",
           "fontSize": 14,
         },
       }
@@ -167,7 +170,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "windowtext",
+          "color": "var(--colorNeutralForeground1)",
           "fontSize": 14,
         },
       }
@@ -181,7 +184,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "windowtext",
+          "color": "var(--colorNeutralForeground1)",
           "fontSize": 14,
         },
       }
@@ -193,7 +196,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "windowtext",
+          "color": "var(--colorNeutralForeground1)",
           "fontSize": 14,
         },
       }
@@ -213,7 +216,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "windowtext",
+          "color": "var(--colorNeutralForeground1)",
           "fontSize": 14,
         },
       }
@@ -221,10 +224,21 @@ exports[`SettingsUtils functions render 1`] = `
   >
     Enable change feed log retention policy to retain last 10 minutes of history for items in the container by default. To support this, the request unit (RU) charge for this container will be multiplied by a factor of two for writes. Reads are unaffected.
   </Text>
-  <Text>
+  <Text
+    style={
+      {
+        "color": "var(--colorNeutralForeground1)",
+      }
+    }
+  >
     For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
     <StyledLinkBase
       href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types"
+      style={
+        {
+          "color": "var(--colorBrandForeground1)",
+        }
+      }
       target="_blank"
     >
        Compound indexes 
@@ -256,7 +270,7 @@ exports[`SettingsUtils functions render 1`] = `
       styles={
         {
           "root": {
-            "color": "windowtext",
+            "color": "var(--colorNeutralForeground1)",
             "fontSize": 14,
           },
         }
@@ -272,7 +286,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "windowtext",
+          "color": "var(--colorNeutralForeground1)",
           "fontSize": 14,
         },
       }
@@ -289,7 +303,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "windowtext",
+          "color": "var(--colorNeutralForeground1)",
           "fontSize": 14,
         },
       }

src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx

@@ -54,8 +54,8 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
 
   if (isAutoscale) {
     return (
-      <Stack style={{ marginBottom: 6 }}>
+      <Stack style={{ marginBottom: 6, color: "var(--colorNeutralForeground1)" }}>
-        <Text variant="small">
+        <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
           {estimatedMonthlyCost} ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
           <b>
             {currencySign + calculateEstimateNumber(monthlyPrice / 10)} -{" "}
@@ -70,7 +70,7 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
 
   return (
     <Stack style={{ marginBottom: 8 }}>
-      <Text variant="small">
+      <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
         Estimated cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
         <b>
           {currencySign + calculateEstimateNumber(hourlyPrice)} hourly /{" "}

src/Explorer/Controls/ThroughputInput/ThroughputInput.less

@@ -10,9 +10,13 @@
   font-size: @mediumFontSize;
   padding: 0 @LargeSpace 0 @SmallSpace;
 }
+// .throughputInputSpacing{
+//   color: "var(--colorNeutralForeground1)";
+// }
 
 .throughputInputSpacing > :not(:last-child) {
   margin-bottom: @DefaultSpace;
+  color: "var(--colorNeutralForeground1)";
 }
 
 .capacitycalculator-link:focus {
@@ -28,3 +32,16 @@
 .deleteQuery:focus::after {
   outline: none !important;
 }
+
+// Override Fluent UI TextField focus styles
+.throughputInputContainer {
+  :global {
+    .ms-TextField {
+      .ms-TextField-fieldGroup {
+        &:focus-within {
+          border-color: var(--colorCompoundBrandStroke1, @SelectionColor);
+        }
+      }
+    }
+  }
+}

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -193,7 +193,11 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
     <div className="throughputInputContainer throughputInputSpacing">
       <Stack horizontal>
         <span className="mandatoryStar">*&nbsp;</span>
-        <Text aria-label="Throughput header" variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
+        <Text
+          aria-label="Throughput header"
+          variant="small"
+          style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
+        >
           {getThroughputLabelText()}
         </Text>
         <InfoTooltip>{PricingUtils.getRuToolTipText()}</InfoTooltip>
@@ -236,14 +240,17 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
       {isAutoscaleSelected && (
         <Stack className="throughputInputSpacing">
-          <Text style={{ marginTop: -2, fontSize: 12 }}>
+          <Text style={{ marginTop: -2, fontSize: 12, color: "var(--colorNeutralForeground1)" }}>
             Your container throughput will automatically scale up to the maximum value you select, from a minimum of 10%
             of that value.
           </Text>
           <Stack horizontal verticalAlign="end" tokens={{ childrenGap: 8 }}>
             <Stack tokens={{ childrenGap: 4 }}>
               <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
-                <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
+                <Text
+                  variant="small"
+                  style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
+                >
                   Minimum RU/s
                 </Text>
                 <InfoTooltip>The minimum RU/s your container will scale to</InfoTooltip>
@@ -260,6 +267,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
+                  color: "var(--colorNeutralForeground1)",
                 }}
               >
                 {Math.round(throughput / 10).toString()}
@@ -272,6 +280,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
                 fontSize: 12,
                 fontWeight: 400,
                 paddingBottom: 6,
+                color: "var(--colorNeutralForeground1)",
               }}
             >
               x 10 =
@@ -279,7 +288,10 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
             <Stack tokens={{ childrenGap: 4 }}>
               <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
-                <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
+                <Text
+                  variant="small"
+                  style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
+                >
                   Maximum RU/s
                 </Text>
                 <InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>
@@ -290,7 +302,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
                 type="number"
                 styles={{
                   fieldGroup: { width: 100, height: 27, flexShrink: 0 },
-                  field: { fontSize: 14, fontWeight: 400 },
+                  field: { fontSize: 14, fontWeight: 400, color: "var(--colorNeutralForeground1)" },
                 }}
                 onChange={(_event, newInput?: string) => onThroughputValueChange(newInput)}
                 step={AutoPilotUtils.autoPilotIncrementStep}
@@ -306,7 +318,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
           <CostEstimateText requestUnits={throughput} isAutoscale={isAutoscaleSelected} />
           <Stack className="throughputInputSpacing">
-            <Text variant="small" aria-label="ruDescription">
+            <Text variant="small" aria-label="ruDescription" style={{ color: "var(--colorNeutralForeground1)" }}>
               Estimate your required RU/s with&nbsp;
               <Link
                 className="underlinedLink"
@@ -325,7 +337,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
       {!isAutoscaleSelected && (
         <Stack className="throughputInputSpacing">
-          <Text variant="small" aria-label="ruDescription">
+          <Text variant="small" aria-label="ruDescription" style={{ color: "var(--colorNeutralForeground1)" }}>
             Estimate your required RU/s with&nbsp;
             <Link
               className="underlinedLink"
@@ -338,7 +350,11 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
             .
           </Text>
           <Stack horizontal>
-            <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} aria-label="maxRUDescription">
+            <Text
+              variant="small"
+              style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
+              aria-label="maxRUDescription"
+            >
               {isDatabase ? "Database" : getCollectionName()} Required RU/s
             </Text>
             <InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -31,6 +31,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           key=".0:$.$.1"
           style={
             {
+              "color": "var(--colorNeutralForeground1)",
               "fontWeight": 600,
               "lineHeight": "20px",
             }
@@ -42,6 +43,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             className="css-110"
             style={
               {
+                "color": "var(--colorNeutralForeground1)",
                 "fontWeight": 600,
                 "lineHeight": "20px",
               }
@@ -724,6 +726,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           key=".0:$.$.0"
           style={
             {
+              "color": "var(--colorNeutralForeground1)",
               "fontSize": 12,
               "marginTop": -2,
             }
@@ -733,6 +736,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             className="css-117"
             style={
               {
+                "color": "var(--colorNeutralForeground1)",
                 "fontSize": 12,
                 "marginTop": -2,
               }
@@ -782,6 +786,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       key=".0:$.$.0"
                       style={
                         {
+                          "color": "var(--colorNeutralForeground1)",
                           "fontWeight": 600,
                           "lineHeight": "20px",
                         }
@@ -792,6 +797,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         className="css-110"
                         style={
                           {
+                            "color": "var(--colorNeutralForeground1)",
                             "fontWeight": 600,
                             "lineHeight": "20px",
                           }
@@ -1423,6 +1429,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       "alignItems": "center",
                       "backgroundColor": "transparent",
                       "border": "none",
+                      "color": "var(--colorNeutralForeground1)",
                       "display": "flex",
                       "fontFamily": "Segoe UI",
                       "fontSize": 14,
@@ -1440,6 +1447,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         "alignItems": "center",
                         "backgroundColor": "transparent",
                         "border": "none",
+                        "color": "var(--colorNeutralForeground1)",
                         "display": "flex",
                         "fontFamily": "Segoe UI",
                         "fontSize": 14,
@@ -1459,6 +1467,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
               key=".0:$.$.1"
               style={
                 {
+                  "color": "var(--colorNeutralForeground1)",
                   "fontFamily": "Segoe UI",
                   "fontSize": 12,
                   "fontWeight": 400,
@@ -1470,6 +1479,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                 className="css-117"
                 style={
                   {
+                    "color": "var(--colorNeutralForeground1)",
                     "fontFamily": "Segoe UI",
                     "fontSize": 12,
                     "fontWeight": 400,
@@ -1508,6 +1518,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       key=".0:$.$.0"
                       style={
                         {
+                          "color": "var(--colorNeutralForeground1)",
                           "fontWeight": 600,
                           "lineHeight": "20px",
                         }
@@ -1518,6 +1529,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         className="css-110"
                         style={
                           {
+                            "color": "var(--colorNeutralForeground1)",
                             "fontWeight": 600,
                             "lineHeight": "20px",
                           }
@@ -2156,6 +2168,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                   styles={
                     {
                       "field": {
+                        "color": "var(--colorNeutralForeground1)",
                         "fontSize": 14,
                         "fontWeight": 400,
                       },
@@ -2509,11 +2522,21 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             <Text
               aria-label="ruDescription"
               key=".0:$.$.0"
+              style={
+                {
+                  "color": "var(--colorNeutralForeground1)",
+                }
+              }
               variant="small"
             >
               <span
                 aria-label="ruDescription"
                 className="css-110"
+                style={
+                  {
+                    "color": "var(--colorNeutralForeground1)",
+                  }
+                }
               >
                 Estimate your required RU/s with 
                 <StyledLinkBase

src/Explorer/Controls/TreeComponent/Styles.ts

@@ -10,6 +10,7 @@ const actionButtonBackground = "--cosmos-Tree--actionButtonBackground" as const;
 export const useTreeStyles = makeStyles({
   treeContainer: {
     height: "100%",
+    maxHeight: "100vh",
     ...shorthands.overflow("auto"),
   },
   tree: {

src/Explorer/Controls/V9Components/Button/index.tsx

@@ -0,0 +1,47 @@
+import { Button as FluentButton, makeStyles, tokens } from "@fluentui/react-components";
+import * as React from "react";
+
+export type CustomButtonProps = {
+  primary?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onClick?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+  type?: "button" | "submit" | "reset";
+};
+
+const useStyles = makeStyles({
+  button: {
+    backgroundColor: tokens.colorNeutralBackground1,
+    color: tokens.colorNeutralForeground1,
+    "&:hover": {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+      color: tokens.colorNeutralForeground1Hover,
+    },
+    "&:active": {
+      backgroundColor: tokens.colorNeutralBackground1Pressed,
+      color: tokens.colorNeutralForeground1Pressed,
+    },
+  },
+  primary: {
+    backgroundColor: tokens.colorBrandBackground,
+    color: tokens.colorNeutralForegroundOnBrand,
+    "&:hover": {
+      backgroundColor: tokens.colorBrandBackgroundHover,
+    },
+    "&:active": {
+      backgroundColor: tokens.colorBrandBackgroundPressed,
+    },
+  },
+});
+
+export const Button = React.forwardRef<HTMLButtonElement, CustomButtonProps>(({ primary, ...props }, ref) => {
+  const baseStyles = useStyles();
+  const buttonClassName = primary ? baseStyles.primary : baseStyles.button;
+
+  return (
+    <FluentButton {...props} ref={ref} appearance={primary ? "primary" : "secondary"} className={buttonClassName} />
+  );
+});
+
+Button.displayName = "Button";

src/Explorer/DataExplorer.tsx

@@ -0,0 +1,26 @@
+import { makeStyles } from "@fluentui/react-components";
+import React from "react";
+import type { Explorer } from "../Contracts/ViewModels";
+
+interface DataExplorerProps {
+  dataExplorer?: Explorer;
+}
+
+const useStyles = makeStyles({
+  root: {
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+    height: "100%",
+    width: "100%",
+  },
+});
+
+export const DataExplorer: React.FC<DataExplorerProps> = () => {
+  const styles = useStyles();
+
+  return (
+    <div className={`dataExplorerContainer ${styles.root}`}>
+      <div>Data Explorer Content</div>
+    </div>
+  );
+};

src/Explorer/ErrorBoundary.tsx

@@ -0,0 +1,38 @@
+import React, { Component, ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error): void {
+    console.error("Error caught in boundary:", error);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: "20px", color: "red" }}>
+          <h2>Something went wrong.</h2>
+          <details style={{ whiteSpace: "pre-wrap" }}>{this.state.error && this.state.error.toString()}</details>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/Explorer/Explorer.tsx

@@ -437,13 +437,14 @@ export default class Explorer {
   public onRefreshResourcesClick = async (): Promise<void> => {
     if (isFabricMirroredKey()) {
       scheduleRefreshFabricToken(true).then(() => this.refreshAllDatabases());
-      return;
+    } else {
-    }
-
       await (userContext.authType === AuthType.ResourceToken
         ? this.refreshDatabaseForResourceToken()
         : this.refreshAllDatabases());
       await this.refreshNotebookList();
+    }
+
+    logConsoleInfo("Successfully refreshed databases");
   };
 
   // Facade

src/Explorer/Menus/CommandBar/CommandBarComponent.less

@@ -4,11 +4,10 @@
   padding: @SmallSpace 0px @SmallSpace 0px;
   .flex-display();
   span {
-    border-left: @ButtonBorderWidth solid @BaseMediumHigh;
     margin: 0 10px 0 10px;
   }
 }
 
 .commandBarContainer {
-  border-bottom: 1px solid @BaseMedium;
+  border-bottom: 1px solid var(--colorNeutralStroke1);
 }

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -4,6 +4,7 @@
  * and update any knockout observables passed from the parent.
  */
 import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
+import { makeStyles, useFluent } from "@fluentui/react-components";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
 import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 import { KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
@@ -12,7 +13,6 @@ import { userContext } from "UserContext";
 import * as React from "react";
 import create, { UseStore } from "zustand";
 import { ConnectionStatusType, PoolIdType } from "../../../Common/Constants";
-import { StyleConstants } from "../../../Common/StyleConstants";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { useSelectedNode } from "../../useSelectedNode";
@@ -37,12 +37,49 @@ export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
   setIsHidden: (isHidden: boolean) => set((state) => ({ ...state, isHidden })),
 }));
 
+const useStyles = makeStyles({
+  commandBarContainer: {
+    borderBottom: "1px solid var(--colorNeutralStroke1)",
+    // backgroundColor: "var(--colorNeutralBackground1)",
+  },
+  toolbarButton: {
+    backgroundColor: "transparent",
+    "&:hover": {
+      backgroundColor: "var(--colorNeutralBackground2)",
+    },
+    "&:active": {
+      backgroundColor: "var(--colorNeutralBackground3)",
+    },
+  },
+  buttonIcon: {
+    width: "16px",
+    height: "16px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    "& img": {
+      width: "100%",
+      height: "100%",
+      objectFit: "contain",
+    },
+  },
+});
+
 export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const selectedNodeState = useSelectedNode();
   const buttons = useCommandBar((state) => state.contextButtons);
   const isHidden = useCommandBar((state) => state.isHidden);
-  const backgroundColor = StyleConstants.BaseLight;
+  // targetDocument is used by referenced components
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { targetDocument } = useFluent();
   const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR);
+  const styles = useStyles();
+
+  const { connectionInfo, isPhoenixNotebooks, isPhoenixFeatures } = useNotebook((state) => ({
+    connectionInfo: state.connectionInfo,
+    isPhoenixNotebooks: state.isPhoenixNotebooks,
+    isPhoenixFeatures: state.isPhoenixFeatures,
+  }));
 
   // Subscribe to the store changes that affect button creation
   const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled);
@@ -59,12 +96,15 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
         ? CommandBarComponentButtonFactory.createPostgreButtons(container)
         : CommandBarComponentButtonFactory.createVCoreMongoButtons(container);
     return (
-      <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
+      <div className={styles.commandBarContainer} style={{ display: isHidden ? "none" : "initial" }}>
         <FluentCommandBar
           ariaLabel="Use left and right arrow keys to navigate between commands"
-          items={CommandBarUtil.convertButton(buttons, backgroundColor)}
+          items={CommandBarUtil.convertButton(buttons, "var(--colorNeutralBackground1)")}
           styles={{
-            root: { backgroundColor: backgroundColor },
+            root: {
+              backgroundColor: "var(--colorNeutralBackground1)",
+              color: "var(--colorNeutralForeground1)",
+            },
           }}
           overflowButtonProps={{ ariaLabel: "More commands" }}
         />
@@ -77,41 +117,60 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   );
   const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(container);
 
-  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
+  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, "var(--colorNeutralBackground1)");
   if (buttons && buttons.length > 0) {
     uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
   }
 
-  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
+  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(
+    contextButtons,
+    "var(--colorNeutralBackground1)",
+  );
 
   if (uiFabricTabsButtons.length > 0) {
     uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
   }
 
-  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
+  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, "var(--colorNeutralBackground1)");
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
-  const connectionInfo = useNotebook((state) => state.connectionInfo);
+  // Add connection status if needed (using the hook values we got at the top level)
-
+  if ((isPhoenixNotebooks || isPhoenixFeatures) && connectionInfo?.status !== ConnectionStatusType.Connect) {
-  if (
-    (useNotebook.getState().isPhoenixNotebooks || useNotebook.getState().isPhoenixFeatures) &&
-    connectionInfo?.status !== ConnectionStatusType.Connect
-  ) {
     uiFabricControlButtons.unshift(
       CommandBarUtil.createConnectionStatus(container, PoolIdType.DefaultPoolId, "connectionStatus"),
     );
   }
 
-  const rootStyle = isFabric()
+  const rootStyle = {
-    ? {
     root: {
-          backgroundColor: "transparent",
+      backgroundColor: "var(--colorNeutralBackground1)",
-          padding: "2px 8px 0px 8px",
+      color: "var(--colorNeutralForeground1)",
+      padding: isFabric() ? "2px 8px 0px 8px" : undefined,
     },
-      }
+    button: {
-    : {
+      backgroundColor: "var(--colorNeutralBackground1)",
-        root: {
+      color: "var(--colorNeutralForeground1)",
-          backgroundColor: backgroundColor,
+      selectors: {
+        ":hover": {
+          backgroundColor: "var(--colorNeutralBackground2)",
+          color: "var(--colorNeutralForeground1)",
+        },
+        ":active": {
+          backgroundColor: "var(--colorNeutralBackground3)",
+          color: "var(--colorNeutralForeground1)",
+        },
+      },
+    },
+    menuIcon: {
+      color: "var(--colorNeutralForeground1)",
+    },
+    item: {
+      backgroundColor: "var(--colorNeutralBackground1)",
+      color: "var(--colorNeutralForeground1)",
+    },
+    link: {
+      backgroundColor: "var(--colorNeutralBackground1)",
+      color: "var(--colorNeutralForeground1)",
     },
   };
 
@@ -120,7 +179,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   setKeyboardHandlers(keyboardHandlers);
 
   return (
-    <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
+    <div className={styles.commandBarContainer} style={{ display: isHidden ? "none" : "initial" }}>
       <FluentCommandBar
         ariaLabel="Use left and right arrow keys to navigate between commands"
         items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,3 +1,4 @@
+import { OpenFullScreen } from "Explorer/OpenFullScreen";
 import { KeyboardAction } from "KeyboardShortcuts";
 import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
 import * as React from "react";
@@ -24,12 +25,12 @@ import { useSidePanel } from "../../../hooks/useSidePanel";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { useNotebook } from "../../Notebook/useNotebook";
-import { OpenFullScreen } from "../../OpenFullScreen";
 import { BrowseQueriesPane } from "../../Panes/BrowseQueriesPane/BrowseQueriesPane";
 import { LoadQueryPane } from "../../Panes/LoadQueryPane/LoadQueryPane";
 import { SettingsPane, useDataPlaneRbac } from "../../Panes/SettingsPane/SettingsPane";
 import { useDatabases } from "../../useDatabases";
 import { SelectedNodeState, useSelectedNode } from "../../useSelectedNode";
+import { ThemeToggleButton } from "./ThemeToggleButton";
 
 let counter = 0;
 
@@ -166,6 +167,7 @@ export function createContextCommandBarButtons(
 
 export function createControlCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
   const buttons: CommandButtonComponentProps[] = [
+    ThemeToggleButton(),
     {
       iconSrc: SettingsIcon,
       iconAlt: "Settings",
@@ -361,6 +363,22 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
       disabled:
         useSelectedNode.getState().isQueryCopilotCollectionSelected() ||
         selectedNodeState.isDatabaseNodeOrNoneSelected(),
+      styles: {
+        root: {
+          backgroundColor: "var(--colorNeutralBackground1)",
+          color: "var(--colorNeutralForeground1)",
+          selectors: {
+            ":hover": {
+              backgroundColor: "var(--colorNeutralBackground1Hover)",
+              color: "var(--colorNeutralForeground1Hover)",
+            },
+            ":active": {
+              backgroundColor: "var(--colorNeutralBackground1Pressed)",
+              color: "var(--colorNeutralForeground1Pressed)",
+            },
+          },
+        },
+      },
     };
     buttons.push(newStoredProcedureBtn);
   }
@@ -381,6 +399,22 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
       disabled:
         useSelectedNode.getState().isQueryCopilotCollectionSelected() ||
         selectedNodeState.isDatabaseNodeOrNoneSelected(),
+      styles: {
+        root: {
+          backgroundColor: "var(--colorNeutralBackground1)",
+          color: "var(--colorNeutralForeground1)",
+          selectors: {
+            ":hover": {
+              backgroundColor: "var(--colorNeutralBackground1Hover)",
+              color: "var(--colorNeutralForeground1Hover)",
+            },
+            ":active": {
+              backgroundColor: "var(--colorNeutralBackground1Pressed)",
+              color: "var(--colorNeutralForeground1Pressed)",
+            },
+          },
+        },
+      },
     };
     buttons.push(newUserDefinedFunctionBtn);
   }
@@ -401,6 +435,22 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
       disabled:
         useSelectedNode.getState().isQueryCopilotCollectionSelected() ||
         selectedNodeState.isDatabaseNodeOrNoneSelected(),
+      styles: {
+        root: {
+          backgroundColor: "var(--colorNeutralBackground1)",
+          color: "var(--colorNeutralForeground1)",
+          selectors: {
+            ":hover": {
+              backgroundColor: "var(--colorNeutralBackground1Hover)",
+              color: "var(--colorNeutralForeground1Hover)",
+            },
+            ":active": {
+              backgroundColor: "var(--colorNeutralBackground1Pressed)",
+              color: "var(--colorNeutralForeground1Pressed)",
+            },
+          },
+        },
+      },
     };
     buttons.push(newTriggerBtn);
   }

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -53,7 +53,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
       const result: ICommandBarItemProps = {
         iconProps: {
           style: {
-            width: StyleConstants.CommandBarIconWidth, // 16
+            width: StyleConstants.CommandBarIconWidth,
             alignSelf: btn.iconName ? "baseline" : undefined,
             filter: getFilter(btn.disabled),
           },
@@ -79,7 +79,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
         "data-test": `CommandBar/Button:${label}`,
         buttonStyles: {
           root: {
-            backgroundColor: backgroundColor,
+            backgroundColor: "var(--colorNeutralBackground1)",
             height: buttonHeightPx,
             paddingRight: 0,
             paddingLeft: 0,
@@ -87,15 +87,29 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
             minWidth: 24,
             marginLeft: isSplit ? 0 : 5,
             marginRight: isSplit ? 0 : 5,
+            color: "var(--colorNeutralForeground1)",
+            selectors: {
+              "&:hover": {
+                backgroundColor: "var(--colorNeutralBackground1Hover)",
+                color: "var(--colorNeutralForeground1)",
+              },
+              "&:active": {
+                backgroundColor: "var(--colorNeutralBackground1Pressed)",
+                color: "var(--colorNeutralForeground1)",
+              },
+            },
           },
           rootDisabled: {
-            backgroundColor: backgroundColor,
+            backgroundColor: "var(--colorNeutralBackground1)",
             pointerEvents: "auto",
+            color: "var(--colorNeutralForegroundDisabled)",
           },
           splitButtonMenuButton: {
-            backgroundColor: backgroundColor,
+            backgroundColor: "var(--colorNeutralBackground1)",
             selectors: {
-              ":hover": { backgroundColor: hoverColor },
+              ":hover": {
+                backgroundColor: "var(--colorNeutralBackground1Hover)",
+              },
             },
             width: 16,
           },
@@ -104,13 +118,22 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
               configContext.platform == Platform.Fabric
                 ? StyleConstants.DefaultFontSize
                 : StyleConstants.mediumFontSize,
+            color: "var(--colorNeutralForeground1)",
+          },
+          rootHovered: {
+            backgroundColor: "var(--colorNeutralBackground1Hover)",
+            color: "var(--colorNeutralForeground1)",
+          },
+          rootPressed: {
+            backgroundColor: "var(--colorNeutralBackground1Pressed)",
+            color: "var(--colorNeutralForeground1)",
           },
-          rootHovered: { backgroundColor: hoverColor },
-          rootPressed: { backgroundColor: hoverColor },
           splitButtonMenuButtonExpanded: {
-            backgroundColor: StyleConstants.AccentExtra,
+            backgroundColor: "var(--colorNeutralBackground1Pressed)",
             selectors: {
-              ":hover": { backgroundColor: hoverColor },
+              ":hover": {
+                backgroundColor: "var(--colorNeutralBackground1Hover)",
+              },
             },
           },
           splitButtonDivider: {
@@ -119,6 +142,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
           icon: {
             paddingLeft: 0,
             paddingRight: 0,
+            color: "var(--colorNeutralForeground1)",
           },
           splitButtonContainer: {
             marginLeft: 5,

src/Explorer/Menus/CommandBar/ThemeToggleButton.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import MoonIcon from "../../../../images/MoonIcon.svg";
+import SunIcon from "../../../../images/SunIcon.svg";
+import { useThemeStore } from "../../../hooks/useTheme";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+
+export const ThemeToggleButton = (): CommandButtonComponentProps => {
+  const [darkMode, setDarkMode] = React.useState(useThemeStore.getState().isDarkMode);
+
+  React.useEffect(() => {
+    const unsubscribe = useThemeStore.subscribe((state) => {
+      setDarkMode(state.isDarkMode);
+    });
+    return unsubscribe;
+  }, []);
+
+  const tooltipText = darkMode ? "Switch to Light Theme" : "Switch to Dark Theme";
+
+  return {
+    iconSrc: darkMode ? SunIcon : MoonIcon,
+    iconAlt: "Theme Toggle",
+    onCommandClick: useThemeStore.getState().toggleTheme,
+    commandButtonLabel: undefined,
+    ariaLabel: tooltipText,
+    tooltipText: tooltipText,
+    hasPopup: false,
+    disabled: false,
+  };
+};

src/Explorer/Menus/NotificationConsole/NotificationConsole.less

@@ -190,3 +190,43 @@
     }
   }
 }
+
+// Dark theme specific overrides
+body.isDarkMode {
+  .notificationConsoleContainer {
+    .notificationConsoleHeader {
+      background-color: var(--colorNeutralBackground2);
+      color: var(--colorNeutralForeground1);
+      
+      &:hover {
+        background-color: var(--colorNeutralBackground3);
+        color: var(--colorNeutralForeground1);
+      }
+
+      &:active {
+        background-color: var(--colorNeutralBackground4);
+        color: var(--colorNeutralForeground1);
+      }
+    }
+
+    .notificationConsoleContents {
+      background-color: var(--colorNeutralBackground1);
+      color: var(--colorNeutralForeground1);
+
+      .clearNotificationsButton {
+        border: @ButtonBorderWidth solid var(--colorNeutralStroke1);
+
+        &:hover {
+          background-color: var(--colorNeutralBackground3);
+          color: var(--colorNeutralForeground1);
+        }
+
+        &:active {
+          border: @ButtonBorderWidth dashed var(--colorBrandForeground1);
+          background-color: var(--colorBrandBackground);
+          color: var(--colorNeutralForegroundOnBrand);
+        }
+      }
+    }
+  }
+}

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -152,6 +152,82 @@ export class NotificationConsoleComponent extends React.Component<
                 selectedKey={this.state.selectedFilter}
                 options={NotificationConsoleComponent.FilterOptions}
                 onChange={this.onFilterSelected.bind(this)}
+                styles={{
+                  root: {
+                    color: "var(--colorNeutralForeground1)",
+                  },
+                  label: {
+                    color: "var(--colorNeutralForeground1)",
+                  },
+                  dropdown: {
+                    backgroundColor: "var(--colorNeutralBackground2)",
+                    borderColor: "var(--colorNeutralStroke1)",
+                    color: "var(--colorNeutralForeground1)",
+                  },
+                  title: {
+                    backgroundColor: "var(--colorNeutralBackground2)",
+                    color: "var(--colorNeutralForeground1)",
+                    borderColor: "var(--colorNeutralStroke1)",
+                    fontSize: "14px",
+                    selectors: {
+                      "&:hover": {
+                        backgroundColor: "var(--colorNeutralBackground3)",
+                        color: "var(--colorNeutralForeground1)",
+                        borderColor: "var(--colorNeutralStroke1)",
+                      },
+                      "&:focus": {
+                        backgroundColor: "var(--colorNeutralBackground2)",
+                        color: "var(--colorNeutralForeground1)",
+                        borderColor: "var(--colorBrandStroke1)",
+                      },
+                      "&:after": {
+                        borderColor: "var(--colorNeutralStroke1)",
+                      },
+                      span: {
+                        color: "var(--colorNeutralForeground1)",
+                      },
+                    },
+                  },
+                  caretDown: {
+                    color: "var(--colorNeutralForeground1)",
+                  },
+                  callout: {
+                    backgroundColor: "var(--colorNeutralBackground2)",
+                    border: "1px solid var(--colorNeutralStroke1)",
+                  },
+                  dropdownItems: {
+                    backgroundColor: "var(--colorNeutralBackground2)",
+                  },
+                  dropdownItem: {
+                    backgroundColor: "transparent",
+                    color: "var(--colorNeutralForeground1)",
+                    selectors: {
+                      "&:hover": {
+                        backgroundColor: "var(--colorNeutralBackground4)",
+                        color: "var(--colorNeutralForeground1)",
+                      },
+                      "&:focus": {
+                        backgroundColor: "var(--colorNeutralBackground4)",
+                        color: "var(--colorNeutralForeground1)",
+                      },
+                      ".ms-Dropdown-optionText": {
+                        color: "var(--colorNeutralForeground1)",
+                      },
+                    },
+                  },
+                  dropdownItemSelected: {
+                    backgroundColor: "var(--colorBrandBackground)",
+                    color: "var(--colorNeutralForegroundOnBrand)",
+                    selectors: {
+                      ".ms-Dropdown-optionText": {
+                        color: "var(--colorNeutralForegroundOnBrand)",
+                      },
+                    },
+                  },
+                  dropdownOptionText: {
+                    color: "var(--colorNeutralForeground1)",
+                  },
+                }}
               />
               <span className="consoleSplitter" />
               <span