ethereum · Aniket-Engg · Aug 11, 2025 · Aug 8, 2025 · Aug 8, 2025 · Aug 8, 2025
diff --git a/apps/circuit-compiler/src/app/components/versions.tsx b/apps/circuit-compiler/src/app/components/versions.tsx
@@ -7,7 +7,7 @@ export function VersionList ({ currentVersion, versionList, downloadList, setVer
   const versionListKeys = Object.keys(versionList)
   return (
     <Dropdown>
-      <Dropdown.Toggle as={CircomVersionMenuToggle} id="circomVersionList" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control">
+      <Dropdown.Toggle as={CircomVersionMenuToggle} id="circomVersionList" className="btn btn-light btn-block w-100 d-inline-block border form-select">
         <div style={{ flexGrow: 1, overflow: 'hidden', display:'flex', justifyContent:'left' }}>
           { versionList[currentVersion].name }
         </div>

diff --git a/apps/quick-dapp/src/components/DeployPanel/theme.tsx b/apps/quick-dapp/src/components/DeployPanel/theme.tsx
@@ -103,7 +103,7 @@ export function ThemeUI() {
       <Dropdown className="w-100">
         <Dropdown.Toggle
           as={CustomToggle}
-          className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control"
+          className="btn btn-light btn-block w-100 d-inline-block border form-select"
           icon={''}
         >
           {theme} - {themeMap[theme].quality}

diff --git a/apps/remix-ide/src/app/panels/styles/terminal-styles.js b/apps/remix-ide/src/app/panels/styles/terminal-styles.js
@@ -61,7 +61,7 @@ var css = csjs`
     line-height       : 1.7em;
     font-family       : monospace;
     padding           : .4em;
-    color             : var(--primary)
+    color             : var(--bs-primary)
     border-top        : solid 2px var(--bs-secondary);
   }
   .prompt             {

diff --git a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css b/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
@@ -79,8 +79,11 @@
   --bs-dark-border-subtle: #adb5bd;
   --bs-white-rgb: 255, 255, 255;
   --bs-black-rgb: 0, 0, 0;
-  --bs-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-font-sans-serif: "Nunito Sans", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
   --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
   --bs-body-font-family: var(--bs-font-sans-serif);
   --bs-body-font-size: 1rem;
@@ -2355,7 +2358,7 @@ textarea.form-control-lg {
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
   background-size: 16px 12px;
-  border: var(--bs-border-width) solid #222;
+  border: var(--bs-border-width) solid var(--bs-border-color);
   border-radius: var(--bs-border-radius);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
@@ -3086,7 +3089,7 @@ textarea.form-control-lg {
 }
 
 .btn-primary {
-  --bs-btn-color: #fff;
+  --bs-btn-color: var(--bs-body-bg);
   --bs-btn-bg: #64c4ff;
   --bs-btn-border-color: #64c4ff;
   --bs-btn-hover-color: #fff;
@@ -3914,7 +3917,7 @@ textarea.form-control-lg {
 .nav-tabs .nav-link.active,
 .nav-tabs .nav-item.show .nav-link {
   color: var(--bs-nav-tabs-link-active-color);
-  background-color: var(--bs-nav-tabs-link-active-bg);
+  background-color: var(--bs-light);
   border-color: var(--bs-nav-tabs-link-active-border-color);
 }
 .nav-tabs .dropdown-menu {
@@ -5584,9 +5587,9 @@ textarea.form-control-lg {
   display: flex;
   flex-direction: column;
   width: 100%;
-  color: var(--bs-modal-color);
+  color: var(--bs-white);
   pointer-events: auto;
-  background-color: var(--bs-modal-bg);
+  background-color: var(--bs-body-bg);
   background-clip: padding-box;
   border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
   border-radius: var(--bs-modal-border-radius);
@@ -5906,7 +5909,7 @@ textarea.form-control-lg {
   --bs-popover-zindex: 1070;
   --bs-popover-max-width: 276px;
   --bs-popover-font-size: 0.875rem;
-  --bs-popover-bg: var(--bs-secondary);
+  --bs-popover-bg: var(--bs-body-bg);
   --bs-popover-border-width: var(--bs-border-width);
   --bs-popover-border-color: var(--bs-border-color-translucent);
   --bs-popover-border-radius: var(--bs-border-radius-lg);
@@ -8884,7 +8887,7 @@ textarea.form-control-lg {
 
 .bg-dark {
   --bs-bg-opacity: 1;
-  background-color: rgba(var(--bs-boby-bg), var(--bs-bg-opacity)) !important;
+  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
 }
 
 .bg-black {

diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx
@@ -85,7 +85,7 @@ export const AssemblyItems = ({ registerEvent }) => {
 
     const currentItem = codeView.children[index]
     if (currentItem) {
-      currentItem.style.setProperty('background-color', 'var(--primary)')
+      currentItem.style.setProperty('background-color', 'var(--bs-primary)')
       currentItem.style.setProperty('color', 'var(--bs-light)')
       currentItem.setAttribute('selected', 'selected')
       codeView.scrollTop = currentItem.offsetTop - parseInt(codeView.offsetTop)
@@ -103,7 +103,7 @@ export const AssemblyItems = ({ registerEvent }) => {
 
       const currentItem = codeView.children[index]
       if (currentItem) {
-        currentItem.style.setProperty('color', 'var(--primary)')
+        currentItem.style.setProperty('color', 'var(--bs-primary)')
         currentItem.style.setProperty('font-weight', 'bold')
         currentItem.setAttribute('selected', 'selected')
       }

diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx
@@ -11,7 +11,7 @@ export const SolidityLocals = ({ data, message, registerEvent, triggerEvent, cla
   }, [data])
 
   const formatSelf = (key: string, data: ExtractData) => {
-    let color = 'var(--primary)'
+    let color = 'var(--bs-primary)'
     if (data.isArray || data.isStruct || data.isMapping) {
       color = 'var(--info)'
     } else if (data.type && data.type.indexOf && (data.type.indexOf('uint') === 0 || data.type.indexOf('int') === 0 || data.type.indexOf('bool') === 0 || data.type.indexOf('enum') === 0)) {

diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx
@@ -6,7 +6,7 @@ import {ExtractData} from '../../types' // eslint-disable-line
 export const SolidityState = ({ calldata, message, className }) => {
   const formatSelf = (key: string, data: ExtractData) => {
     try {
-      let color = 'var(--primary)'
+      let color = 'var(--bs-primary)'
       if (data.isArray || data.isStruct || data.isMapping) {
         color = 'var(--info)'
       } else if (data.type && data.type.indexOf && (data.type.indexOf('uint') === 0 || data.type.indexOf('int') === 0 || data.type.indexOf('bool') === 0 || data.type.indexOf('enum') === 0)) {

diff --git a/libs/remix-ui/git/src/types/styles.ts b/libs/remix-ui/git/src/types/styles.ts
@@ -45,9 +45,9 @@ export const selectTheme = (theme) => ({
   borderRadius: 0,
   colors: {
     ...theme.colors,
-    primary25: 'var(--primary)',
-    primary: 'var(--primary)',
-    primary50: 'var(--primary)',
-    primary75: 'var(--primary)',
+    primary25: 'var(--bs-primary)',
+    primary: 'var(--bs-primary)',
+    primary50: 'var(--bs-primary)',
+    primary75: 'var(--bs-primary)',
   },
 })
diff --git a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx
@@ -85,7 +85,7 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
     }}>
       { anyEnabled && <div className='me-2 mt-3 pb-1 d-flex flex-column'>
         <div className='d-flex flex-grid'>
-          <div className={ `${pinned ? "" : "border-dark "}` + "d-flex mx-0 p-2 bg-light border border-secondary remixui_grid_cell_container " + props.classList || ''} data-id={"remixUIGS" + props.title}>
+          <div className={ `${pinned ? "" : "border-light "}` + "d-flex mx-0 p-2 bg-light border border-secondary remixui_grid_cell_container " + props.classList || ''} data-id={"remixUIGS" + props.title}>
             <div className="d-flex remixui_grid_cell w-100 space-between justify-content-between flex-column">
               { !props.hideTitle && <div className='d-flex flex-row pb-1 my-1 align-items-end' style={{ minWidth: '8rem', height: '1rem' }}>
                 { props.logo ? props.logoURL !== '' ?

diff --git a/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx b/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx
@@ -7,7 +7,7 @@ import { CustomTooltipType } from '../../types/customtooltip'
 export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses, delay, hide, show }: CustomTooltipType) {
   if (typeof tooltipText !== 'string') {
     const newTooltipText = React.cloneElement(tooltipText, {
-      className: ' bg-secondary text-wrap p-1 px-2 '
+      className: ' bg-body text-wrap p-1 px-2 '
     })
     tooltipText = newTooltipText
   }
@@ -23,9 +23,9 @@ export function CustomTooltip({ children, placement, tooltipId, tooltipClasses,
               <Popover.Body
                 id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId}
                 style={{ minWidth: 'fit-content' }}
-                className={'text-wrap p-1 px-2 bg-secondary w-100' + tooltipClasses}
+                className={'text-wrap p-1 px-2 bg-body w-100' + tooltipClasses}
               >
-                {typeof tooltipText === 'string' ? <span className={'text-wrap p-1 px-2 bg-secondary ' + { tooltipTextClasses }}>{tooltipText}</span> : tooltipText}
+                {typeof tooltipText === 'string' ? <span className={'text-wrap p-1 px-2 bg-body ' + { tooltipTextClasses }}>{tooltipText}</span> : tooltipText}
               </Popover.Body>
             </Popover>
           }>

diff --git a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css b/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css
@@ -38,7 +38,7 @@
   flex-direction: row;
 }
 .remixui_isStuck {
-  background-color: var(--primary);
+  background-color: var(--bs-primary);
   /* color:  */
 }
 .remixui_versionWarning {

diff --git a/libs/remix-ui/remix-ai-assistant/src/css/color.css b/libs/remix-ui/remix-ai-assistant/src/css/color.css
@@ -220,8 +220,8 @@ div#composer-button {
   --nlux-Composer--Gap: 0;
 
   /* Override submit button colors */
-  --nlux-SubmitButton--BackgroundColor: var(--primary);
-  --nlux-SubmitButton-Active--BackgroundColor:var(--primary);
+  --nlux-SubmitButton--BackgroundColor: var(--bs-primary);
+  --nlux-SubmitButton-Active--BackgroundColor:var(--bs-primary);
   --nlux-SubmitButton-Disabled--BackgroundColor: var(--dark);
   --nlux-SubmitButton-Active--TextColor: var(--white);
   --nlux-SubmitButton-Disabled--TextColor: var(--text);

diff --git a/libs/remix-ui/run-tab/src/lib/components/account.tsx b/libs/remix-ui/run-tab/src/lib/components/account.tsx
@@ -415,7 +415,7 @@ export function AccountUI(props: AccountProps) {
       </label>
       <div className="udapp_account">
         <Dropdown className="udapp_selectExEnvOptions" data-id="runTabSelectAccount">
-          <Dropdown.Toggle as={CustomToggle} icon={null} id="txorigin" data-id="runTabSelectAccount" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control">
+          <Dropdown.Toggle as={CustomToggle} icon={null} id="txorigin" data-id="runTabSelectAccount" className="btn btn-light btn-block w-100 d-inline-block border form-select">
             {selectedAccount ? loadedAccounts[selectedAccount] : ''}
           </Dropdown.Toggle>
           <Dropdown.Menu as={CustomMenu} className="w-100 form-select" data-id="custom-dropdown-items">

diff --git a/libs/remix-ui/run-tab/src/lib/components/environment.tsx b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
@@ -161,7 +161,7 @@ export function EnvironmentUI(props: EnvironmentProps) {
       </label>
       <div className="" data-id={`selected-provider-${currentProvider && currentProvider.name}`}>
         <Dropdown id="selectExEnvOptions" data-id="settingsSelectEnvOptions" className="udapp_selectExEnvOptions">
-          <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control" icon={null}>
+          <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border form-select" icon={null}>
             {/* {isL2(currentProvider && currentProvider.displayName)} */}
             <DropdownLabel label={currentProvider && currentProvider.displayName} bridges={bridges} currentProvider={currentProvider} envLabel={props.envLabel} runTabState={props.udappState} setExecutionEnv={props.setExecutionContext} isL2={isL2} plugin={props.runTabPlugin} />
           </Dropdown.Toggle>

diff --git a/libs/remix-ui/run-tab/src/lib/css/run-tab.css b/libs/remix-ui/run-tab/src/lib/css/run-tab.css
@@ -272,7 +272,7 @@
   width: 100%;
 }
 .udapp_title .udapp_copy {
-  color: var(--primary);
+  color: var(--bs-primary);
 }
 .udapp_titleExpander {
   align-self: center;

diff --git a/libs/remix-ui/solidity-compiler/src/lib/components/compiler-dropdown.tsx b/libs/remix-ui/solidity-compiler/src/lib/components/compiler-dropdown.tsx
@@ -27,7 +27,7 @@ export const CompilerDropdown = (props: compilerDropdownProps) => {
   const { customVersions, selectedVersion, defaultVersion, allversions, handleLoadVersion, _shouldBeAdded, onlyDownloaded } = props
   return (
     <Dropdown id="versionSelector" data-id="versionSelector">
-      <Dropdown.Toggle as={CompilerMenuToggle} id="dropdown-custom-components" className="btn btn-light w-100 d-inline-block border border-dark form-select" icon={null}>
+      <Dropdown.Toggle as={CompilerMenuToggle} id="dropdown-custom-components" className="btn btn-light w-100 d-inline-block border form-select" icon={null}>
         <div style={{ flexGrow: 1, overflow: 'hidden', display:'flex', justifyContent:'left' }}>
           <div className="text-truncate">
             {customVersions.map((url, i) => {

diff --git a/libs/remix-ui/solidity-unit-testing/src/lib/solidity-unit-testing.tsx b/libs/remix-ui/solidity-unit-testing/src/lib/solidity-unit-testing.tsx
@@ -771,7 +771,7 @@ export const SolidityUnitTesting = (props: Record<string, any>) => {
                 data-id="uiPathInput"
                 name="utPath"
                 value={inputPathValue}
-                style={{ backgroundImage: 'var(--primary)' }}
+                style={{ backgroundImage: 'var(--bs-primary)' }}
                 onKeyDown={() => {
                   if (inputPathValue === '/') setInputPathValue('')
                 }}

diff --git a/libs/remix-ui/top-bar/src/css/topbar.css b/libs/remix-ui/top-bar/src/css/topbar.css
@@ -1,8 +1,8 @@
 .remixui_homeIcon svg path {
-  fill: var(--primary);
+  fill: var(--bs-primary);
 }
 .remixui_homeIcon svg polygon {
-  fill: var(--primary);
+  fill: var(--bs-primary);
 }
 
 .remixui_homeIcon:hover {
@@ -21,7 +21,7 @@
 
 .version-btn:hover {
   text-decoration: none;
-  color: var(--secondary);
+  color: var(--bs-secondary);
 }
 
 .top-bar-dropdownItem {

diff --git a/libs/remix-ui/top-bar/src/lib/remix-ui-topbar.tsx b/libs/remix-ui/top-bar/src/lib/remix-ui-topbar.tsx
@@ -561,7 +561,7 @@ export function RemixUiTopbar () {
             >
               <Dropdown.Item
                 onClick={() => {
-                  plugin.call('theme', 'switchTheme', 'Flatly')
+                  plugin.call('theme', 'switchTheme', 'Light')
                 }}
                 data-id="topbar-themeIcon-light"
               >

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -11,10 +11,10 @@
   }
 
   .remixui_homeIcon svg path {
-    fill: var(--primary);
+    fill: var(--bs-primary);
   }
   .remixui_homeIcon svg polygon {
-    fill: var(--primary);
+    fill: var(--bs-primary);
   }
   .remixui_icons {
     display: flex;

diff --git a/libs/remix-ui/workspace/src/lib/css/electron-menu.css b/libs/remix-ui/workspace/src/lib/css/electron-menu.css
@@ -16,7 +16,7 @@
 }
 
 .recentfolder_name:hover {
-  color: var(--primary);
+  color: var(--bs-primary);
   text-decoration: underline;
 }
 

diff --git a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
@@ -998,7 +998,7 @@ export function Workspace() {
       <Dropdown.Toggle
         as={CustomToggle}
         id="dropdown-custom-components"
-        className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control mt-1"
+        className="btn btn-light btn-block w-100 d-inline-block border form-select mt-1"
         icon={selectedWorkspace && selectedWorkspace.isGitRepo && !(currentWorkspace === LOCALHOST) ? 'far fa-code-branch' : null}
       >
         {selectedWorkspace ? selectedWorkspace.name === LOCALHOST ? togglerText : selectedWorkspace.name : currentWorkspace === LOCALHOST ? formatNameForReadonly('localhost') : NO_WORKSPACE}
@@ -1344,7 +1344,7 @@ export function Workspace() {
                   <Dropdown.Toggle
                     as={CustomToggle}
                     id="dropdown-custom-components"
-                    className="btn btn-sm btn-light d-inline-block border border-dark form-control h-100 p-0 ps-2 pe-2 text-dark"
+                    className="btn btn-sm btn-light d-inline-block border form-select h-100 p-0 ps-2 pe-2 text-dark"
                     icon={null}
                   >
                     {global.fs.browser.isRequestingCloning ? <i className="fad fa-spinner fa-spin"></i> : (currentBranch && currentBranch.name) || '-none-'}