Skip to content

Bs5 dark theme fixes 2 #6249

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Aug 14, 2025
Merged

Bs5 dark theme fixes 2 #6249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
575f92d
fix font size
Aniket-Engg Aug 12, 2025
e4628e0
fix primary button colors
Aniket-Engg Aug 12, 2025
2c8ffa6
fix border color
Aniket-Engg Aug 12, 2025
954ff2b
cookbook template card fix
Aniket-Engg Aug 12, 2025
e0772bd
heading configuration
Aniket-Engg Aug 12, 2025
04e4a46
compile button caret
Aniket-Engg Aug 12, 2025
64f3ecb
debugger buttons color
Aniket-Engg Aug 12, 2025
7d8e3e6
color fixes
Aniket-Engg Aug 12, 2025
349ae43
oz modal label fixes
Aniket-Engg Aug 12, 2025
b600e5d
Merge branch 'master' into bs5darkfixes2
Aniket-Engg Aug 13, 2025
a4485b3
fix border color
Aniket-Engg Aug 13, 2025
20ba9ae
method call result
Aniket-Engg Aug 13, 2025
527880d
dropdown font
Aniket-Engg Aug 13, 2025
b4c0ca1
Merge branch 'master' into bs5darkfixes2
Aniket-Engg Aug 14, 2025
d481020
fix btn border color
Aniket-Engg Aug 14, 2025
03c38df
e2e fix
Aniket-Engg Aug 14, 2025
27b3ad7
Merge branch 'master' into bs5darkfixes2
Aniket-Engg Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/circuit-compiler/src/app/components/versions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export function VersionList ({ currentVersion, versionList, downloadList, setVer
return (
<Dropdown>
<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' }}>
<div className="font-sm" style={{ flexGrow: 1, overflow: 'hidden', display:'flex', justifyContent:'left' }}>
{ versionList[currentVersion].name }
</div>
</Dropdown.Toggle>
Expand Down
2 changes: 1 addition & 1 deletion apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const CustomToggle = React.forwardRef(
className={className.replace('dropdown-toggle', '')}
>
<div className="d-flex">
<div className="me-auto text-nowrap text-truncate overflow-hidden" data-id={`dropdown-content`}>{children}</div>
<div className="me-auto text-nowrap text-truncate overflow-hidden font-sm" data-id={`dropdown-content`}>{children}</div>
{icon && (
<div className="pe-1">
<i className={`${icon} pe-1`}></i>
Expand Down
10 changes: 5 additions & 5 deletions apps/remix-ide-e2e/src/tests/editor.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,13 +110,13 @@ module.exports = {
.executeScriptInTerminal('remix.exeCurrent()')
.scrollToLine(33)
.waitForElementPresent('.highlightLine34', 60000)
.checkElementStyle('.highlightLine34', 'background-color', 'rgba(0, 0, 0, 0)')
.checkElementStyle('.highlightLine34', 'background-color', 'rgb(52, 152, 219)')
.scrollToLine(40)
.waitForElementPresent('.highlightLine41', 60000)
.checkElementStyle('.highlightLine41', 'background-color', 'rgba(0, 0, 0, 0)')
.checkElementStyle('.highlightLine41', 'background-color', 'rgb(52, 152, 219)')
.scrollToLine(50)
.waitForElementPresent('.highlightLine51', 60000)
.checkElementStyle('.highlightLine51', 'background-color', 'rgba(0, 0, 0, 0)')
.checkElementStyle('.highlightLine51', 'background-color', 'rgb(52, 152, 219)')
},

'Should remove 1 highlight from source code #group1':
Expand All @@ -132,8 +132,8 @@ module.exports = {
.waitForElementVisible('li[data-id="treeViewLitreeViewItemcontracts/3_Ballot.sol"]')
.click('li[data-id="treeViewLitreeViewItemcontracts/3_Ballot.sol"]')
.waitForElementNotPresent('.highlightLine33', 60000)
.checkElementStyle('.highlightLine41', 'background-color', 'rgba(0, 0, 0, 0)')
.checkElementStyle('.highlightLine51', 'background-color', 'rgba(0, 0, 0, 0)')
.checkElementStyle('.highlightLine41', 'background-color', 'rgb(52, 152, 219)')
.checkElementStyle('.highlightLine51', 'background-color', 'rgb(52, 152, 219)')
},

'Should remove all highlights from source code #group1': function (browser: NightwatchBrowser) {
Expand Down
8 changes: 4 additions & 4 deletions apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -361,7 +361,7 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
classList='TSCellStyle'
>
<div className='d-flex justify-content-between h-100 flex-column'>
<span className='pt-4 px-1 h6 text-dark'>{template.description}</span>
<span className='pt-2 px-1 h6 text-dark'>{template.description}</span>
<span style={{ cursor: 'pointer' }} className='mt-2 mb-1 btn btn-sm border align-items-left' onClick={() => template.onClick()}>{template.onClickLabel}</span>
</div>
</RemixUIGridCell>}
Expand Down Expand Up @@ -409,7 +409,7 @@ const createModalMessage = async (
<label
htmlFor="initGitRepository"
data-id="initGitRepositoryLabel"
className="m-0 form-check-label udapp_checkboxAlign"
className="ms-1 form-check-label udapp_checkboxAlign"
title={window._intl.formatMessage({ id: 'filePanel.initGitRepoTitle' })}
>
<FormattedMessage id="filePanel.initGitRepositoryLabel" />
Expand Down Expand Up @@ -442,7 +442,7 @@ const createOptionsModal = (
{['mintable', 'burnable', 'pausable'].map((feature) => (
<div key={feature} className="d-flex ms-2 form-check">
<input className="form-check-input" type="checkbox" name="feature" value={feature} id={feature} onChange={onChangeCheckBoxRefs} />
<label className="form-check-label" htmlFor={feature} data-id={`featureType${feature.charAt(0).toUpperCase() + feature.slice(1)}`}>
<label className="form-check-label ms-1" htmlFor={feature} data-id={`featureType${feature.charAt(0).toUpperCase() + feature.slice(1)}`}>
<FormattedMessage id={`filePanel.${feature}`} />
</label>
</div>
Expand All @@ -456,7 +456,7 @@ const createOptionsModal = (
{['transparent', 'uups'].map((type) => (
<div key={type} className="d-flex ms-2 form-check">
<input className="form-check-input" type="radio" name="upgradeability" value={type} id={type} onChange={onChangeRadioRefs} />
<label className="form-check-label" htmlFor={type} data-id={`upgradeType${type.charAt(0).toUpperCase() + type.slice(1)}`}>
<label className="form-check-label ms-1" htmlFor={type} data-id={`upgradeType${type.charAt(0).toUpperCase() + type.slice(1)}`}>
{type.toUpperCase()}
</label>
</div>
Expand Down
67 changes: 40 additions & 27 deletions apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@
--bs-tertiary-color-rgb: 255, 255, 255;
--bs-tertiary-bg: #f8f9fa;
--bs-tertiary-bg-rgb: 248, 249, 250;
--bs-heading-color: inherit;
--bs-heading-color: #fff;
--bs-link-color: #747b90;
--bs-link-color-rgb: 116, 123, 144;
--bs-link-decoration: underline;
Expand Down Expand Up @@ -139,6 +139,10 @@
--custom-onsurface-layer-3:#3b3c4d;
--custom-onsurface-layer-4:#434454;
--custom-ai-color: #2de7f3;
--custom-border-light: #51536b;
--custom-border-light-rgb: 81, 83, 107;
--custom-border-dark: #2c3244;
--custom-border-dark-rgb: 44, 50, 68;
}

[data-bs-theme=dark] {
Expand Down Expand Up @@ -181,7 +185,7 @@
--bs-danger-border-subtle: #8b2e24;
--bs-light-border-subtle: #444;
--bs-dark-border-subtle: #303030;
--bs-heading-color: inherit;
--bs-heading-color: #fff;
--bs-link-color: #a2a3bd;
--bs-link-hover-color: #b6b8d4;
--bs-link-color-rgb: 162, 163, 189;
Expand All @@ -200,6 +204,10 @@
--custom-onsurface-layer-3:#3b3c4d;
--custom-onsurface-layer-4:#434454;
--custom-ai-color: #2de7f3;
--custom-border-light: #51536b;
--custom-border-light-rgb: 81, 83, 107;
--custom-border-dark: #2c3244;
--custom-border-dark-rgb: 44, 50, 68;
}

*,
Expand Down Expand Up @@ -241,6 +249,10 @@ body {
color: var(--custom-ai-color) !important;
}

.font-sm {
font-size: 0.875em;
}

hr {
margin: 1rem 0;
color: inherit;
Expand All @@ -252,7 +264,8 @@ hr {
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
font-weight: 400;
font-family: inherit;
line-height: 1.2;
color: var(--bs-heading-color);
}
Expand Down Expand Up @@ -358,7 +371,7 @@ strong {
}

small, .small {
font-size: 0.875em;
font-size: 80%;
}

mark, .mark {
Expand Down Expand Up @@ -2346,7 +2359,7 @@ textarea.form-control-lg {
display: block;
width: 100%;
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
font-size: 1rem;
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
color: #fff;
Expand Down Expand Up @@ -3092,34 +3105,34 @@ textarea.form-control-lg {
--bs-btn-color: var(--bs-body-bg);
--bs-btn-bg: #64c4ff;
--bs-btn-border-color: #64c4ff;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #2f4d6c;
--bs-btn-hover-border-color: #2c4866;
--bs-btn-hover-color: var(--bs-body-bg);
--bs-btn-hover-bg: #64c4ff;
--bs-btn-hover-border-color: #64c4ff;
--bs-btn-focus-shadow-rgb: 85, 115, 146;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #2c4866;
--bs-btn-active-border-color: #29445f;
--bs-btn-active-color: var(--bs-body-bg);
--bs-btn-active-bg: #64c4ff;
--bs-btn-active-border-color: #64c4ff;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-color: var(--bs-body-bg);
--bs-btn-disabled-bg: #64c4ff;
--bs-btn-disabled-border-color: #64c4ff;
}

.btn-secondary {
--bs-btn-color: #fff;
--bs-btn-bg: #595c76;
--bs-btn-border-color: #444;
--bs-btn-border-color: #595c76;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #676a83;
--bs-btn-hover-border-color: #363636;
--bs-btn-hover-border-color: #676a83;
--bs-btn-focus-shadow-rgb: 96, 96, 96;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #4d516f;
--bs-btn-active-border-color: #333333;
--bs-btn-active-border-color: #4d516f;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #596b76;
--bs-btn-disabled-border-color: #444;
--bs-btn-disabled-border-color: #596b76;
}

.btn-success {
Expand Down Expand Up @@ -3159,35 +3172,35 @@ textarea.form-control-lg {
.btn-warning {
--bs-btn-color: #fff;
--bs-btn-bg: #c97539;
--bs-btn-border-color: #f39c12;
--bs-btn-border-color: #c97539;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #d2844b;
--bs-btn-hover-border-color: #c27d0e;
--bs-btn-hover-border-color: #d2844b;
--bs-btn-focus-shadow-rgb: 245, 171, 54;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #c56F31;
--bs-btn-active-border-color: #b6750e;
--bs-btn-active-border-color: #c56F31;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #c97539;
--bs-btn-disabled-border-color: #f39c12;
--bs-btn-disabled-border-color: #c97539;
}

.btn-danger {
--bs-btn-color: #fff;
--bs-btn-bg: #b84040;
--bs-btn-border-color: #e74c3c;
--bs-btn-border-color: #b84040;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #c44949;
--bs-btn-hover-border-color: #b93d30;
--bs-btn-hover-border-color: #c44949;
--bs-btn-focus-shadow-rgb: 235, 103, 89;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #b13838;
--bs-btn-active-border-color: #ad392d;
--bs-btn-active-border-color: #b13838;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #b84040;
--bs-btn-disabled-border-color: #e74c3c;
--bs-btn-disabled-border-color: #b84040;
}

.btn-light {
Expand Down Expand Up @@ -3465,7 +3478,7 @@ textarea.form-control-lg {
--bs-dropdown-padding-x: 0;
--bs-dropdown-padding-y: 0.5rem;
--bs-dropdown-spacer: 0.125rem;
--bs-dropdown-font-size: 1rem;
--bs-dropdown-font-size: .875rem;
--bs-dropdown-color: var(--bs-body-color);
--bs-dropdown-bg: var(--custom-onsurface-layer-1);
--bs-dropdown-border-color: #444;
Expand Down Expand Up @@ -7621,12 +7634,12 @@ textarea.form-control-lg {

.border-light {
--bs-border-opacity: 1;
border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;
border-color: rgba(var(--custom-border-light-rgb), var(--bs-border-opacity)) !important;
}

.border-dark {
--bs-border-opacity: 1;
border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important;
border-color: rgba(var(--custom-border-dark-rgb), var(--bs-border-opacity)) !important;
}

.border-black {
Expand Down
8 changes: 6 additions & 2 deletions apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,10 @@ body {
color: var(--custom-ai-color) !important;
}

.font-sm {
font-size: 0.875em;
}

hr {
margin: 1rem 0;
color: inherit;
Expand Down Expand Up @@ -2342,7 +2346,7 @@ textarea.form-control-lg {
display: block;
width: 100%;
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
font-size: 1rem;
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
Expand Down Expand Up @@ -3459,7 +3463,7 @@ textarea.form-control-lg {
--bs-dropdown-padding-x: 0;
--bs-dropdown-padding-y: 0.5rem;
--bs-dropdown-spacer: 0.125rem;
--bs-dropdown-font-size: 1rem;
--bs-dropdown-font-size: .875rem;
--bs-dropdown-color: var(--bs-body-color);
--bs-dropdown-bg: var(--bs-body-bg);
--bs-dropdown-border-color: #ced4da;
Expand Down
Loading