Skip to content

Commit 2168220

Browse files
Aniket-EnggAniket-Engg
committed
dark theme color scheme
1 parent 6fb4dac commit 2168220

File tree

9 files changed

+64
-54
lines changed

9 files changed

+64
-54
lines changed

‎apps/contract-verification/src/app/components/NavMenu.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
2626

2727
export const NavMenu = () => {
2828
return (
29-
<nav className="d-flex medium flex-row w-100" style={{ backgroundColor: 'var(--body-bg)!important' }}>
29+
<nav className="d-flex medium flex-row w-100" style={{ backgroundColor: 'var(--bs-body-bg)!important' }}>
3030
<NavItem to="/" icon={<i className="fas fa-home"></i>} title={ <FormattedMessage id="contract-verification.verifyNavTitle" defaultMessage={'Verify'} /> } />
3131
<NavItem to="/receipts" icon={<i className="fas fa-receipt"></i>} title={ <FormattedMessage id="contract-verification.receiptsNavTitle" defaultMessage={'Receipts'} /> } />
3232
<NavItem to="/lookup" icon={<i className="fas fa-search"></i>} title={ <FormattedMessage id="contract-verification.lookupNavTitle" defaultMessage={'Lookup'} /> } />

‎apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css

Lines changed: 55 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -37,22 +37,22 @@
3737
--bs-gray-700: #444;
3838
--bs-gray-800: #303030;
3939
--bs-gray-900: #222;
40-
--bs-primary: #375a7f;
40+
--bs-primary: #007aa6;
4141
--bs-secondary: #444;
4242
--bs-success: #00bc8c;
4343
--bs-info: #3498db;
4444
--bs-warning: #f39c12;
4545
--bs-danger: #e74c3c;
46-
--bs-light: #adb5bd;
47-
--bs-dark: #303030;
48-
--bs-primary-rgb: 55, 90, 127;
46+
--bs-light: #2a2c3f;
47+
--bs-dark: #a2a3bd;
48+
--bs-primary-rgb: 0, 122, 166;
4949
--bs-secondary-rgb: 68, 68, 68;
5050
--bs-success-rgb: 0, 188, 140;
5151
--bs-info-rgb: 52, 152, 219;
5252
--bs-warning-rgb: 243, 156, 18;
5353
--bs-danger-rgb: 231, 76, 60;
54-
--bs-light-rgb: 173, 181, 189;
55-
--bs-dark-rgb: 48, 48, 48;
54+
--bs-light-rgb: 42, 44, 63;
55+
--bs-dark-rgb: 162, 163, 189;
5656
--bs-primary-text-emphasis: #162433;
5757
--bs-secondary-text-emphasis: #1b1b1b;
5858
--bs-success-text-emphasis: #004b38;
@@ -86,10 +86,10 @@
8686
--bs-body-font-size: 1rem;
8787
--bs-body-font-weight: 400;
8888
--bs-body-line-height: 1.5;
89-
--bs-body-color: #fff;
90-
--bs-body-color-rgb: 255, 255, 255;
91-
--bs-body-bg: #222;
92-
--bs-body-bg-rgb: 34, 34, 34;
89+
--bs-body-color: #a2a3bd;
90+
--bs-body-color-rgb: 162, 163, 189;
91+
--bs-body-bg: #222336;
92+
--bs-body-bg-rgb: 34, 35, 54;
9393
--bs-emphasis-color: #000;
9494
--bs-emphasis-color-rgb: 0, 0, 0;
9595
--bs-secondary-color: rgba(255, 255, 255, 0.75);
@@ -101,17 +101,17 @@
101101
--bs-tertiary-bg: #f8f9fa;
102102
--bs-tertiary-bg-rgb: 248, 249, 250;
103103
--bs-heading-color: inherit;
104-
--bs-link-color: #00bc8c;
105-
--bs-link-color-rgb: 0, 188, 140;
104+
--bs-link-color: #747b90;
105+
--bs-link-color-rgb: 116, 123, 144;
106106
--bs-link-decoration: underline;
107-
--bs-link-hover-color: #009670;
108-
--bs-link-hover-color-rgb: 0, 150, 112;
107+
--bs-link-hover-color: #525765;
108+
--bs-link-hover-color-rgb: 82, 87, 101;
109109
--bs-code-color: #e83e8c;
110110
--bs-highlight-color: #fff;
111111
--bs-highlight-bg: #fdebd0;
112112
--bs-border-width: 1px;
113113
--bs-border-style: solid;
114-
--bs-border-color: #dee2e6;
114+
--bs-border-color: #3f4455;
115115
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
116116
--bs-border-radius: 0.375rem;
117117
--bs-border-radius-sm: 0.25rem;
@@ -137,8 +137,8 @@
137137
color-scheme: dark;
138138
--bs-body-color: #dee2e6;
139139
--bs-body-color-rgb: 222, 226, 230;
140-
--bs-body-bg: #222;
141-
--bs-body-bg-rgb: 34, 34, 34;
140+
--bs-body-bg: #222336;
141+
--bs-body-bg-rgb: 34, 35, 54;
142142
--bs-emphasis-color: #fff;
143143
--bs-emphasis-color-rgb: 255, 255, 255;
144144
--bs-secondary-color: rgba(222, 226, 230, 0.75);
@@ -174,10 +174,10 @@
174174
--bs-light-border-subtle: #444;
175175
--bs-dark-border-subtle: #303030;
176176
--bs-heading-color: inherit;
177-
--bs-link-color: #879cb2;
178-
--bs-link-hover-color: #9fb0c1;
179-
--bs-link-color-rgb: 135, 156, 178;
180-
--bs-link-hover-color-rgb: 159, 176, 193;
177+
--bs-link-color: #a2a3bd;
178+
--bs-link-hover-color: #b6b8d4;
179+
--bs-link-color-rgb: 162, 163, 189;
180+
--bs-link-hover-color-rgb: 182, 184, 212;
181181
--bs-code-color: #f18bba;
182182
--bs-highlight-color: #dee2e6;
183183
--bs-highlight-bg: #613e07;
@@ -214,6 +214,16 @@ body {
214214
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
215215
}
216216

217+
*::-webkit-scrollbar {
218+
width: 8px;
219+
height: 6px;
220+
}
221+
*::-webkit-scrollbar-thumb {
222+
background-color: #41455b;
223+
opacity: 0.3;
224+
border-radius: 30px;
225+
}
226+
217227
hr {
218228
margin: 1rem 0;
219229
color: inherit;
@@ -3062,8 +3072,8 @@ textarea.form-control-lg {
30623072

30633073
.btn-primary {
30643074
--bs-btn-color: #fff;
3065-
--bs-btn-bg: #375a7f;
3066-
--bs-btn-border-color: #375a7f;
3075+
--bs-btn-bg: #64c4ff;
3076+
--bs-btn-border-color: #64c4ff;
30673077
--bs-btn-hover-color: #fff;
30683078
--bs-btn-hover-bg: #2f4d6c;
30693079
--bs-btn-hover-border-color: #2c4866;
@@ -3073,41 +3083,41 @@ textarea.form-control-lg {
30733083
--bs-btn-active-border-color: #29445f;
30743084
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
30753085
--bs-btn-disabled-color: #fff;
3076-
--bs-btn-disabled-bg: #375a7f;
3077-
--bs-btn-disabled-border-color: #375a7f;
3086+
--bs-btn-disabled-bg: #64c4ff;
3087+
--bs-btn-disabled-border-color: #64c4ff;
30783088
}
30793089

30803090
.btn-secondary {
30813091
--bs-btn-color: #fff;
3082-
--bs-btn-bg: #444;
3092+
--bs-btn-bg: #595c76;
30833093
--bs-btn-border-color: #444;
30843094
--bs-btn-hover-color: #fff;
3085-
--bs-btn-hover-bg: #3a3a3a;
3095+
--bs-btn-hover-bg: #676a83;
30863096
--bs-btn-hover-border-color: #363636;
30873097
--bs-btn-focus-shadow-rgb: 96, 96, 96;
30883098
--bs-btn-active-color: #fff;
3089-
--bs-btn-active-bg: #363636;
3099+
--bs-btn-active-bg: #4d516f;
30903100
--bs-btn-active-border-color: #333333;
30913101
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
30923102
--bs-btn-disabled-color: #fff;
3093-
--bs-btn-disabled-bg: #444;
3103+
--bs-btn-disabled-bg: #596b76;
30943104
--bs-btn-disabled-border-color: #444;
30953105
}
30963106

30973107
.btn-success {
30983108
--bs-btn-color: #fff;
3099-
--bs-btn-bg: #00bc8c;
3109+
--bs-btn-bg: #32ba89;
31003110
--bs-btn-border-color: #00bc8c;
31013111
--bs-btn-hover-color: #fff;
3102-
--bs-btn-hover-bg: #00a077;
3112+
--bs-btn-hover-bg: #36ce96;
31033113
--bs-btn-hover-border-color: #009670;
31043114
--bs-btn-focus-shadow-rgb: 38, 198, 157;
31053115
--bs-btn-active-color: #fff;
3106-
--bs-btn-active-bg: #009670;
3116+
--bs-btn-active-bg: #35b083;
31073117
--bs-btn-active-border-color: #008d69;
31083118
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
31093119
--bs-btn-disabled-color: #fff;
3110-
--bs-btn-disabled-bg: #00bc8c;
3120+
--bs-btn-disabled-bg: #35b083;
31113121
--bs-btn-disabled-border-color: #00bc8c;
31123122
}
31133123

@@ -3130,44 +3140,44 @@ textarea.form-control-lg {
31303140

31313141
.btn-warning {
31323142
--bs-btn-color: #fff;
3133-
--bs-btn-bg: #f39c12;
3143+
--bs-btn-bg: #c97539;
31343144
--bs-btn-border-color: #f39c12;
31353145
--bs-btn-hover-color: #fff;
3136-
--bs-btn-hover-bg: #cf850f;
3146+
--bs-btn-hover-bg: #d2844b;
31373147
--bs-btn-hover-border-color: #c27d0e;
31383148
--bs-btn-focus-shadow-rgb: 245, 171, 54;
31393149
--bs-btn-active-color: #fff;
3140-
--bs-btn-active-bg: #c27d0e;
3150+
--bs-btn-active-bg: #c56F31;
31413151
--bs-btn-active-border-color: #b6750e;
31423152
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
31433153
--bs-btn-disabled-color: #fff;
3144-
--bs-btn-disabled-bg: #f39c12;
3154+
--bs-btn-disabled-bg: #c97539;
31453155
--bs-btn-disabled-border-color: #f39c12;
31463156
}
31473157

31483158
.btn-danger {
31493159
--bs-btn-color: #fff;
3150-
--bs-btn-bg: #e74c3c;
3160+
--bs-btn-bg: #b84040;
31513161
--bs-btn-border-color: #e74c3c;
31523162
--bs-btn-hover-color: #fff;
3153-
--bs-btn-hover-bg: #c44133;
3163+
--bs-btn-hover-bg: #c44949;
31543164
--bs-btn-hover-border-color: #b93d30;
31553165
--bs-btn-focus-shadow-rgb: 235, 103, 89;
31563166
--bs-btn-active-color: #fff;
3157-
--bs-btn-active-bg: #b93d30;
3167+
--bs-btn-active-bg: #b13838;
31583168
--bs-btn-active-border-color: #ad392d;
31593169
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
31603170
--bs-btn-disabled-color: #fff;
3161-
--bs-btn-disabled-bg: #e74c3c;
3171+
--bs-btn-disabled-bg: #b84040;
31623172
--bs-btn-disabled-border-color: #e74c3c;
31633173
}
31643174

31653175
.btn-light {
31663176
--bs-btn-color: #fff;
3167-
--bs-btn-bg: #adb5bd;
3177+
--bs-btn-bg: #2a2c3f;
31683178
--bs-btn-border-color: #adb5bd;
31693179
--bs-btn-hover-color: #fff;
3170-
--bs-btn-hover-bg: #939aa1;
3180+
--bs-btn-hover-bg: #222336;
31713181
--bs-btn-hover-border-color: #8a9197;
31723182
--bs-btn-focus-shadow-rgb: 185, 192, 199;
31733183
--bs-btn-active-color: #fff;
@@ -4402,7 +4412,7 @@ textarea.form-control-lg {
44024412
--bs-card-cap-color: ;
44034413
--bs-card-height: ;
44044414
--bs-card-color: ;
4405-
--bs-card-bg: #303030;
4415+
--bs-card-bg: #333446;
44064416
--bs-card-img-overlay-padding: 1rem;
44074417
--bs-card-group-margin: 0.75rem;
44084418
position: relative;
@@ -8859,7 +8869,7 @@ textarea.form-control-lg {
88598869

88608870
.bg-dark {
88618871
--bs-bg-opacity: 1;
8862-
background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
8872+
background-color: rgba(var(--bs-boby-bg), var(--bs-bg-opacity)) !important;
88638873
}
88648874

88658875
.bg-black {

‎apps/vyper/src/app/app.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ html, body, #root, main {
9191
display: flex;
9292
flex-direction: column;
9393
align-items: stretch;
94-
background-color: var(--body-bg);
94+
background-color: var(--bs-body-bg);
9595
}
9696

9797
#result .copy {
@@ -232,7 +232,7 @@ html, body, #root, main {
232232
}
233233

234234
.accordion-background {
235-
background-color: var(--body-bg);
235+
background-color: var(--bs-body-bg);
236236
}
237237

238238
.accordion-background:hover {

‎libs/remix-ui/home-tab/src/lib/components/LoaderPlaceholder.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react'
33
export function LoadingCard() {
44
return (
55
<div className="card">
6-
<div className="d-flex align-items-center p-3 overflow-hidden justify-content-between" style={{ height: '80px', backgroundColor: 'var(--body-bg)' }}>
6+
<div className="d-flex align-items-center p-3 overflow-hidden justify-content-between" style={{ height: '80px', backgroundColor: 'var(--bs-body-bg)' }}>
77
<div className="skeleton-badge" style={{
88
width: '60px',
99
height: '30px',

‎libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ function HomeTabTitle() {
7070
return (
7171
<div className="card mb-3 p-5 rounded overflow-hidden border">
7272
<img src="assets/img/remix-link-illustration.svg" className="home-tab-banner" alt="Remix Logo" style={{ position: 'absolute', top: '-200px', left: '125px', width: 400, height: 400, zIndex: 0 }} />
73-
<div style={{ backgroundColor: 'var(--body-bg)', opacity: 0.8, position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 1 }}></div>
73+
<div style={{ backgroundColor: 'var(--bs-body-bg)', opacity: 0.8, position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 1 }}></div>
7474
<div style={{ zIndex: 2 }}>
7575
<div className="mb-0 d-flex align-items-center">
7676
<div className="ms-2 d-flex">

‎libs/remix-ui/home-tab/src/lib/components/homeTabUpdates.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ function HomeTabUpdates({ plugin }: HomeTabUpdatesProps) {
6464
return (
6565
<div className="card border h-100 d-flex flex-column justify-content-between">
6666
<div>
67-
<div className="d-flex align-items-center p-3 overflow-hidden justify-content-between" style={{ height: '80px', backgroundColor: 'var(--body-bg)' }}>
67+
<div className="d-flex align-items-center p-3 overflow-hidden justify-content-between" style={{ height: '80px', backgroundColor: 'var(--bs-body-bg)' }}>
6868
<span className={`badge bg-info bg-transparent border p-2 rounded-pill text-${updateInfo.theme}`} style={{ fontWeight: 'light', border: `1px solid var(--${updateInfo.theme})` }}>{updateInfo.badge}</span>
6969
{ updateInfo.icon ? <img src={`${HOME_TAB_BASE_URL + updateInfo.icon}`} alt="RemixAI Assistant" style={{ height: '150px', width: '150px' }} />
7070
: <img src={`${HOME_TAB_BASE_URL + 'images/illusion.svg'}`} alt="RemixAI Assistant" style={{ height: '150px', width: '150px' }} />

‎libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@
111111
}
112112

113113
.langSelectorbg {
114-
background-color: var(--body-bg);
114+
background-color: var(--bs-body-bg);
115115
color: var(--text);
116116
}
117117

‎libs/remix-ui/terminal/src/lib/remix-ui-terminal.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ element.style {
55
#terminalCliInput{
66
width: 97%;
77
font-weight: 800;
8-
background: var(--body-bg)
8+
background: var(--bs-body-bg)
99
}
1010
#terminalCliInput:focus {
1111
outline: none;

‎libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export default function VyperCompile({ result, theme, themeStyle }: VyperCompile
7070

7171
return (
7272
<div className='w-100 h-100 d-flex flex-row'>
73-
<Tabs className="flex-column" style={{ height: "fit-content", backgroundColor: 'var(--body-bg)' }} id="result" activeKey={active} onSelect={(key: any) => setActive(key)}>
73+
<Tabs className="flex-column" style={{ height: "fit-content", backgroundColor: 'var(--bs-body-bg)' }} id="result" activeKey={active} onSelect={(key: any) => setActive(key)}>
7474
{tabContent.map((content, index) => (
7575
<Tab className="border-top border-start p-4 bg-light" style={{ width: '50rem', height: 'fit-content', minHeight: '25rem' }} eventKey={content.eventKey} title={content.tabHeadingText} as={'span'} key={`${index}-${content.eventKey}`}>
7676
<div className="d-flex flex-column w-90 justify-content-center mx-auto rounded-2">

0 commit comments

Comments
 (0)