From f1fe7c8503c58d8e16f1f5c8b50f7d6f90bf200f Mon Sep 17 00:00:00 2001
From: 8prashant <prashant.kumar2021@vitbhopal.ac.in>
Date: Mon, 31 Aug 2026 11:46:37 +0530
Subject: [PATCH 1/2] Fix #11263: use theme-aware colors in Edit Configurations
 UI

---
 Extension/ui/settings.html | 77 ++++++++++++++++++++++----------------
 1 file changed, 44 insertions(+), 33 deletions(-)

diff --git a/Extension/ui/settings.html b/Extension/ui/settings.html
index 5ad5407da..e0ec84e5f 100644
--- a/Extension/ui/settings.html
+++ b/Extension/ui/settings.html
@@ -6,6 +6,17 @@
     <meta http-equiv="Content-Security-Policy" content="style-src 'unsafe-inline'; script-src 'nonce-{{nonce}}';">
 
     <style type="text/css">
+        :root {
+            --cpptools-foreground: var(--vscode-foreground);
+            --cpptools-background: var(--vscode-editor-background, var(--vscode-background));
+            --cpptools-input-foreground: var(--vscode-settings-textInputForeground, var(--vscode-input-foreground));
+            --cpptools-input-background: var(--vscode-settings-textInputBackground, var(--vscode-input-background));
+            --cpptools-input-border: var(--vscode-settings-textInputBorder, var(--vscode-input-border));
+            --cpptools-dropdown-foreground: var(--vscode-settings-dropdownForeground, var(--vscode-input-foreground));
+            --cpptools-dropdown-background: var(--vscode-settings-dropdownBackground, var(--vscode-input-background));
+            --cpptools-dropdown-border: var(--vscode-settings-dropdownBorder, var(--vscode-input-border));
+        }
+
         @media (max-width: 1140px) {
             #sidebar {
                 display: none;
@@ -121,7 +132,9 @@
         }
 
         body {
-            line-height: 19px
+            line-height: 19px;
+            color: var(--cpptools-foreground);
+            background: var(--cpptools-background);
         }
 
         body:not(.tabbing) button:focus {
@@ -129,7 +142,8 @@
         }
 
         a {
-            text-decoration: none
+            text-decoration: none;
+            color: var(--vscode-textLink-foreground);
         }
 
         checkbox {
@@ -176,9 +190,9 @@
             border: solid 1px;
             font-size: 13px;
             font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
-            color: var(--vscode-settings-textInputForeground);
-            background: var(--vscode-settings-textInputBackground);
-            border: 1px solid var(--vscode-settings-textInputBorder);
+            color: var(--cpptools-input-foreground);
+            background: var(--cpptools-input-background);
+            border: 1px solid var(--cpptools-input-border);
         }
 
         textarea {
@@ -186,9 +200,9 @@
             padding: 4px, 4px;
             font-size: 13px;
             font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
-            color: var(--vscode-settings-textInputForeground);
-            background: var(--vscode-settings-textInputBackground);
-            border: 1px solid var(--vscode-settings-textInputBorder);
+            color: var(--cpptools-input-foreground);
+            background: var(--cpptools-input-background);
+            border: 1px solid var(--cpptools-input-border);
         }
 
         button {
@@ -216,14 +230,14 @@
             height: 27px;
             font-size: 13px;
             font-family:sans-serif;
-            color: var(--vscode-settings-dropdownForeground);
-            background: var(--vscode-settings-dropdownBackground);
-            border: 1px solid var(--vscode-settings-dropdownBorder);
+            color: var(--cpptools-dropdown-foreground);
+            background: var(--cpptools-dropdown-background);
+            border: 1px solid var(--cpptools-dropdown-border);
         }
 
         .select-editable {
             position: relative;
-            background-color: var(--vscode-settings-textInputBackground);
+            background-color: var(--cpptools-input-background);
             width: 800px;
             height: 31px;
         }
@@ -232,11 +246,16 @@
             position: absolute;
             font-size: 13px;
             font-family: sans-serif;
-            border: 1px solid var(--vscode-settings-textInputBorder);
+            border: 1px solid var(--cpptools-dropdown-border);
             height: 31px;
             margin: auto;
-            color: var(--vscode-settings-textInputForeground);
-            background: var(--vscode-settings-textInputBackground);
+            color: transparent;
+            background: var(--cpptools-dropdown-background);
+        }
+
+        .select-editable select option {
+            color: var(--cpptools-dropdown-foreground);
+            background: var(--cpptools-dropdown-background);
         }
 
         .select-editable input {
@@ -248,8 +267,8 @@
             height: 17px;
             font-size: 13px;
             border: none;
-            color: var(--vscode-settings-textInputForeground);
-            background: var(--vscode-settings-textInputBackground);
+            color: var(--cpptools-input-foreground);
+            background: var(--cpptools-input-background);
         }
 
         .select-editable input:focus {
@@ -284,31 +303,31 @@
         /** Theming */
 
         .vscode-light {
-            color: #1e1e1e
+            color: var(--cpptools-foreground)
         }
 
         .vscode-dark {
-            color: #ddd
+            color: var(--cpptools-foreground)
         }
 
         .vscode-high-contrast {
-            color: #fff
+            color: var(--cpptools-foreground)
         }
 
         .vscode-light code {
-            color: #a31515
+            color: var(--vscode-textPreformat-foreground, var(--cpptools-foreground))
         }
 
         .vscode-dark code {
-            color: #d7ba7d
+            color: var(--vscode-textPreformat-foreground, var(--cpptools-foreground))
         }
 
         .vscode-light code > div {
-            background-color: rgba(220, 220, 220, .4)
+            background-color: var(--vscode-textCodeBlock-background, var(--cpptools-background))
         }
 
         .vscode-dark code > div {
-            background-color: rgba(10, 10, 10, .4)
+            background-color: var(--vscode-textCodeBlock-background, var(--cpptools-background))
         }
 
         .vscode-light .input-disabled {
@@ -329,7 +348,7 @@
         }
 
         .vscode-high-contrast code > div {
-            background-color: #000
+            background-color: var(--vscode-textCodeBlock-background, var(--cpptools-background))
         }
 
         .vscode-high-contrast h1 {
@@ -384,14 +403,6 @@
             text-align: center
         }
 
-        .vscode-light a {
-            color: #4080D0
-        }
-
-        .vscode-dark a {
-            color: #a2c1e8
-        }
-
     </style>
 
   </head>

From ac240f5263b78a9e93bec9cee04ee47d0967ff05 Mon Sep 17 00:00:00 2001
From: 8prashant <prashant.kumar2021@vitbhopal.ac.in>
Date: Tue, 1 Sep 2026 21:43:30 +0530
Subject: [PATCH 2/2] Enhance dropdown styling with theme-aware colors in
 settings UI

---
 Extension/ui/settings.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/Extension/ui/settings.html b/Extension/ui/settings.html
index e0ec84e5f..5f1a25091 100644
--- a/Extension/ui/settings.html
+++ b/Extension/ui/settings.html
@@ -249,12 +249,14 @@
             border: 1px solid var(--cpptools-dropdown-border);
             height: 31px;
             margin: auto;
-            color: transparent;
+            color: var(--cpptools-dropdown-foreground);
+            -webkit-text-fill-color: transparent;
             background: var(--cpptools-dropdown-background);
         }
 
         .select-editable select option {
             color: var(--cpptools-dropdown-foreground);
+            -webkit-text-fill-color: var(--cpptools-dropdown-foreground);
             background: var(--cpptools-dropdown-background);
         }