update to styles

app/components/ui/Settings.tsx

@@ -207,14 +207,14 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
         </RadixDialog.Overlay>
         <RadixDialog.Content asChild>
           <motion.div
-            className="fixed top-[50%] left-[50%] z-max h-[85vh] w-[90vw] max-w-[900px] translate-x-[-50%] translate-y-[-50%] border border-bolt-elements-borderColor rounded-lg bg-gray-800 shadow-lg focus:outline-none overflow-hidden"
+            className="fixed top-[50%] left-[50%] z-max h-[85vh] w-[90vw] max-w-[900px] translate-x-[-50%] translate-y-[-50%] border border-bolt-elements-borderColor rounded-lg shadow-lg focus:outline-none overflow-hidden"
             initial="closed"
             animate="open"
             exit="closed"
             variants={dialogVariants}
           >
             <div className="flex h-full">
-              <div className="w-48 border-r border-bolt-elements-borderColor bg-gray-700 p-4 flex flex-col justify-between settings-tabs">
+              <div className="w-48 border-r border-bolt-elements-borderColor bg-white dark:bg-gray-900 p-4 flex flex-col justify-between settings-tabs">
                 {tabs.map((tab) => (
                   <button
                     key={tab.id}
@@ -249,12 +249,12 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
                 </div>
               </div>
 
-              <div className="flex-1 flex flex-col p-8">
-                <DialogTitle className="flex-shrink-0 text-lg font-semibold text-white">Settings</DialogTitle>
+              <div className="flex-1 flex flex-col p-8 bg-gray-50 dark:bg-gray-800">
+                <DialogTitle className="flex-shrink-0 text-lg font-semibold text-bolt-elements-textPrimary">Settings</DialogTitle>
                 <div className="flex-1 overflow-y-auto">
                   {activeTab === 'chat-history' && (
                     <div className="p-4">
-                      <h3 className="text-lg font-medium text-white mb-4">Chat History</h3>
+                      <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Chat History</h3>
                       <button
                         onClick={handleExportAllChats}
                         className="bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 mb-4 transition-colors duration-200"
@@ -262,7 +262,7 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
                         Export All Chats
                       </button>
 
-                      <div className="text-white rounded-lg p-4 mb-4 settings-danger-area">
+                      <div className="text-bolt-elements-textPrimary rounded-lg p-4 mb-4 settings-danger-area">
                         <h4 className="font-semibold">Danger Area</h4>
                         <p className="mb-2">This action cannot be undone!</p>
                         <button
@@ -281,7 +281,7 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
                   {activeTab === 'providers' && (
                     <div className="p-4">
                       <div className="flex items-center justify-between mb-4">
-                        <h3 className="text-lg font-medium text-white">Providers</h3>
+                        <h3 className="text-lg font-medium text-bolt-elements-textPrimary">Providers</h3>
                         <input
                           type="text"
                           placeholder="Search providers..."
@@ -293,10 +293,10 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
                       {filteredProviders.map((provider) => (
                         <div
                           key={provider.name}
-                          className="flex flex-col mb-6 provider-item hover:bg-gray-600 p-4 rounded-lg"
+                          className="flex flex-col mb-6 provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg"
                         >
                           <div className="flex items-center justify-between mb-2">
-                            <span className="text-white">{provider.name}</span>
+                            <span className="text-bolt-elements-textPrimary">{provider.name}</span>
                             <label className="relative inline-flex items-center cursor-pointer">
                               <input
                                 type="checkbox"
@@ -317,13 +317,13 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
                           {/* Base URL input for configurable providers */}
                           {URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.isEnabled && (
                             <div className="mt-2">
-                              <label className="block text-sm text-gray-300 mb-1">Base URL:</label>
+                              <label className="block text-sm text-bolt-elements-textSecondary mb-1">Base URL:</label>
                               <input
                                 type="text"
                                 value={baseUrls[provider.name]}
                                 onChange={(e) => handleBaseUrlChange(provider.name, e.target.value)}
                                 placeholder={`Enter ${provider.name} base URL`}
-                                className="w-full p-2 rounded border border-gray-600 bg-gray-700 text-white text-sm"
+                                className="w-full p-2 rounded border border-bolt-elements-borderColor bg-bolt-elements-bg-depth-2 text-bolt-elements-textPrimary text-sm"
                               />
                             </div>
                           )}
@@ -332,10 +332,10 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
                     </div>
                   )}
                   {activeTab === 'features' && (
-                    <div className="p-4 bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded-lg mb-4">
-                      <h3 className="text-lg font-medium text-white mb-4">Feature Settings</h3>
+                    <div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg mb-4">
+                      <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Feature Settings</h3>
                       <div className="flex items-center justify-between mb-2">
-                        <span className="text-white">Debug Info</span>
+                        <span className="text-bolt-elements-textPrimary">Debug Info</span>
                         <label className="relative inline-flex items-center cursor-pointer">
                           <input
                             type="checkbox"
@@ -356,10 +356,10 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
                     </div>
                   )}
                   {activeTab === 'features' && (
-                    <div className="p-4 bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded-lg">
-                      <h3 className="text-lg font-medium text-white mb-4">Experimental Area</h3>
+                    <div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg">
+                      <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Experimental Area</h3>
                       <div className="flex items-center justify-between mb-2">
-                        <span className="text-white">Replace with local models</span>
+                        <span className="text-bolt-elements-textPrimary">Replace with local models</span>
                         <label className="relative inline-flex items-center cursor-pointer">
                           <input
                             type="checkbox"
@@ -381,7 +381,7 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
                   )}
                   {activeTab === 'debug' && isDebugEnabled && (
                     <div className="p-4">
-                      <h3 className="text-lg font-medium text-white mb-4">Debug Tab</h3>
+                      <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Debug Tab</h3>
                       <button
                         onClick={handleCopyToClipboard}
                         className="bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 mb-4 transition-colors duration-200"
@@ -389,30 +389,30 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
                         Copy to Clipboard
                       </button>
 
-                      <h4 className="text-md font-medium text-white">System Information</h4>
-                      <p className="text-white">OS: {navigator.platform}</p>
-                      <p className="text-white">Browser: {navigator.userAgent}</p>
+                      <h4 className="text-md font-medium text-bolt-elements-textPrimary">System Information</h4>
+                      <p className="text-bolt-elements-textSecondary">OS: {navigator.platform}</p>
+                      <p className="text-bolt-elements-textSecondary">Browser: {navigator.userAgent}</p>
 
-                      <h4 className="text-md font-medium text-white mt-4">Active Features</h4>
+                      <h4 className="text-md font-medium text-bolt-elements-textPrimary mt-4">Active Features</h4>
                       <ul>
                         {providers
                           .filter((provider) => provider.isEnabled)
                           .map((provider) => (
-                            <li key={provider.name} className="text-white">
+                            <li key={provider.name} className="text-bolt-elements-textSecondary">
                               {provider.name}
                             </li>
                           ))}
                       </ul>
 
-                      <h4 className="text-md font-medium text-white mt-4">Base URLs</h4>
+                      <h4 className="text-md font-medium text-bolt-elements-textPrimary mt-4">Base URLs</h4>
                       <ul>
-                        <li className="text-white">Ollama: {process.env.REACT_APP_OLLAMA_URL}</li>
-                        <li className="text-white">OpenAI: {process.env.REACT_APP_OPENAI_URL}</li>
-                        <li className="text-white">LM Studio: {process.env.REACT_APP_LM_STUDIO_URL}</li>
+                        <li className="text-bolt-elements-textSecondary">Ollama: {process.env.REACT_APP_OLLAMA_URL}</li>
+                        <li className="text-bolt-elements-textSecondary">OpenAI: {process.env.REACT_APP_OPENAI_URL}</li>
+                        <li className="text-bolt-elements-textSecondary">LM Studio: {process.env.REACT_APP_LM_STUDIO_URL}</li>
                       </ul>
 
-                      <h4 className="text-md font-medium text-white mt-4">Version Information</h4>
-                      <p className="text-white">Version Hash: {versionHash}</p>
+                      <h4 className="text-md font-medium text-bolt-elements-textPrimary mt-4">Version Information</h4>
+                      <p className="text-bolt-elements-textSecondary">Version Hash: {versionHash}</p>
                     </div>
                   )}
                 </div>

app/styles/components/Settings.scss

@@ -12,49 +12,49 @@
     margin-bottom: 0.5rem;
 
     &.active {
-      background: #b44aff;
-      color: white;
+      background: var(--bolt-elements-button-primary-background);
+      color: var(--bolt-elements-textPrimary);
     }
 
     &:not(.active) {
-      background: #4b5563;
-      color: #e5e7eb;
+      background: var(--bolt-elements-bg-depth-3);
+      color: var(--bolt-elements-textPrimary);
 
       &:hover {
-        background: linear-gradient(to right, #6b5bff, #3b82f6);
+        background: var(--bolt-elements-button-primary-backgroundHover);
       }
     }
   }
 }
 
 .settings-button {
-  background-color: #b44aff;
-  color: white;
+  background-color: var(--bolt-elements-button-primary-background);
+  color: var(--bolt-elements-textPrimary);
   border-radius: 0.5rem;
   padding: 0.5rem 1rem;
   transition: background-color 0.2s;
 
   &:hover {
-    background-color: #2563eb;
+    background-color: var(--bolt-elements-button-primary-backgroundHover);
   }
 }
 
 .settings-danger-area {
   background-color: transparent;
-  color: white;
+  color: var(--bolt-elements-textPrimary);
   border-radius: 0.5rem;
   padding: 1rem;
   margin-bottom: 1rem;
 
   button {
-    background-color: #dc2626;
-    color: white;
+    background-color: var(--bolt-elements-button-danger-background);
+    color: var(--bolt-elements-button-danger-text);
     border-radius: 0.5rem;
     padding: 0.5rem 1rem;
     transition: background-color 0.2s;
 
     &:hover {
-      background-color: #b91c1c;
+      background-color: var(--bolt-elements-button-danger-backgroundHover);
     }
   }
 } 

app/styles/components/SettingsSlider.scss

@@ -3,7 +3,7 @@
 
   &__thumb {
     @apply absolute h-full transition-all duration-300 rounded-lg;
-    background-color: #b44aff;
+    background-color: var(--bolt-elements-button-primary-background);
     
     &--left {
       @apply left-0 w-1/2;
@@ -18,7 +18,7 @@
     @apply relative z-10 flex-1 p-2 rounded-lg text-sm transition-colors duration-200;
 
     &--selected {
-      @apply text-white;
+      @apply text-bolt-elements-textPrimary;
     }
 
     &--unselected {
@@ -32,16 +32,17 @@
     @apply w-11 h-6 rounded-full shadow-inner transition-colors duration-200;
 
     &--enabled {
-      background-color: #b44aff;
+      background-color: var(--bolt-elements-item-contentAccent);
     }
 
     &--disabled {
-      @apply bg-gray-300;
+      background-color: var(--bolt-elements-bg-depth-3);
     }
   }
 
   &__thumb {
-    @apply absolute left-0 w-6 h-6 rounded-full shadow transition-transform duration-200 ease-in-out bg-white;
+    @apply absolute left-0 w-6 h-6 rounded-full shadow transition-transform duration-200 ease-in-out;
+    background-color: var(--bolt-elements-textPrimary);
 
     &--enabled {
       @apply transform translate-x-full;