Skip to content

Commit 208b8d2

Browse files
saikrishnaraoyadagirisaikrishnaraoyadagiri
committed
Dark mode for Inventory Type page
1 parent 04c41e8 commit 208b8d2

1 file changed

Lines changed: 238 additions & 0 deletions

File tree

‎src/components/BMDashboard/InventoryTypesList/TypesList.module.css‎

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,241 @@
7373
border-radius: 5px;
7474
margin-right: 5px;
7575
}
76+
77+
78+
/* Main container dark mode */
79+
:global(.bm-dashboard-dark) .typesListContainer {
80+
color: #ffffff;
81+
}
82+
83+
:global(.bm-dashboard-dark) .typesListContainer h1 {
84+
color: #ffffff !important;
85+
}
86+
87+
/* Timestamp/DatePicker dark mode */
88+
:global(.bm-dashboard-dark) .timestampContainer {
89+
color: #ffffff;
90+
}
91+
92+
:global(.bm-dashboard-dark) .timestampContainer span {
93+
color: #ffffff !important;
94+
}
95+
96+
:global(.bm-dashboard-dark) #timestamp {
97+
background-color: #2e5061 !important;
98+
color: #ffffff !important;
99+
border-color: #3a506b !important;
100+
}
101+
102+
/* Card header (accordion toggle) dark mode */
103+
:global(.bm-dashboard-dark) .cardHeader {
104+
background-color: #2e5061 !important;
105+
color: #ffffff !important;
106+
border-color: #3a506b !important;
107+
}
108+
109+
:global(.bm-dashboard-dark) .cardHeader:hover {
110+
background-color: #3a506b !important;
111+
}
112+
113+
/* Accordion collapse body dark mode */
114+
:global(.bm-dashboard-dark) .accordionCollapse {
115+
background-color: #1c2541 !important;
116+
color: #ffffff !important;
117+
/* Firefox scrollbar */
118+
scrollbar-width: thin;
119+
scrollbar-color: #3a506b #1c2541;
120+
}
121+
122+
/* Scrollbar dark mode - Webkit browsers */
123+
:global(.bm-dashboard-dark) .accordionCollapse::-webkit-scrollbar {
124+
width: 8px;
125+
height: 8px;
126+
}
127+
128+
:global(.bm-dashboard-dark) .accordionCollapse::-webkit-scrollbar-track {
129+
background: #1c2541;
130+
border-radius: 4px;
131+
}
132+
133+
:global(.bm-dashboard-dark) .accordionCollapse::-webkit-scrollbar-thumb {
134+
background: #3a506b;
135+
border-radius: 4px;
136+
}
137+
138+
:global(.bm-dashboard-dark) .accordionCollapse::-webkit-scrollbar-thumb:hover {
139+
background: #5a7a9b;
140+
}
141+
142+
/* Table header dark mode */
143+
:global(.bm-dashboard-dark) .tableHeader {
144+
border-color: #3a506b !important;
145+
background-color: #1c2541 !important;
146+
}
147+
148+
:global(.bm-dashboard-dark) .tableHeader th {
149+
color: #ffffff !important;
150+
background-color: #1c2541 !important;
151+
}
152+
153+
/* Table dark mode - all tables */
154+
:global(.bm-dashboard-dark) .typesListContainer :global(table) {
155+
color: #ffffff !important;
156+
background-color: #1c2541 !important;
157+
}
158+
159+
:global(.bm-dashboard-dark) .typesListContainer :global(table) :global(thead) {
160+
background-color: #1c2541 !important;
161+
}
162+
163+
:global(.bm-dashboard-dark) .typesListContainer :global(table) :global(thead) th {
164+
color: #ffffff !important;
165+
background-color: #1c2541 !important;
166+
border-color: #3a506b !important;
167+
}
168+
169+
:global(.bm-dashboard-dark) .typesListContainer :global(table) :global(tbody) {
170+
background-color: #1c2541 !important;
171+
}
172+
173+
:global(.bm-dashboard-dark) .typesListContainer :global(table) td {
174+
color: #ffffff !important;
175+
background-color: transparent !important;
176+
}
177+
178+
:global(.bm-dashboard-dark) .typesListContainer :global(table) :global(tbody) tr {
179+
background-color: #1c2541 !important;
180+
}
181+
182+
:global(.bm-dashboard-dark) .typesListContainer :global(table) :global(tbody) tr:hover {
183+
background-color: #3a506b !important;
184+
}
185+
186+
/* Card header - Bootstrap override */
187+
:global(.bm-dashboard-dark) .typesListContainer :global(.card-header) {
188+
background-color: #2e5061 !important;
189+
color: #ffffff !important;
190+
border-color: #3a506b !important;
191+
}
192+
193+
/* Card body - Bootstrap override */
194+
:global(.bm-dashboard-dark) .typesListContainer :global(.card-body) {
195+
background-color: #1c2541 !important;
196+
color: #ffffff !important;
197+
}
198+
199+
/* Buttons dark mode */
200+
:global(.bm-dashboard-dark) .btnTypes {
201+
background-color: #3a506b !important;
202+
color: #ffffff !important;
203+
border-color: #5a7a9b !important;
204+
}
205+
206+
:global(.bm-dashboard-dark) .btnTypes:hover {
207+
background-color: #4a607b !important;
208+
border-color: #6a8aab !important;
209+
}
210+
211+
/* Back button dark mode */
212+
:global(.bm-dashboard-dark) .buttonContainer a {
213+
background-color: #2e5061 !important;
214+
color: #ffffff !important;
215+
}
216+
217+
:global(.bm-dashboard-dark) .buttonContainer a:hover {
218+
background-color: #3a506b !important;
219+
}
220+
221+
/* Input measurement dark mode */
222+
:global(.bm-dashboard-dark) #input-measurement {
223+
background-color: #2e5061 !important;
224+
color: #ffffff !important;
225+
border-color: #3a506b !important;
226+
}
227+
228+
:global(.bm-dashboard-dark) #input-measurement::placeholder {
229+
color: #b5bac5 !important;
230+
}
231+
232+
/* All inputs in the container */
233+
:global(.bm-dashboard-dark) .typesListContainer input {
234+
background-color: #2e5061 !important;
235+
color: #ffffff !important;
236+
border-color: #3a506b !important;
237+
}
238+
239+
:global(.bm-dashboard-dark) .typesListContainer input::placeholder {
240+
color: #b5bac5 !important;
241+
}
242+
243+
:global(.bm-dashboard-dark) .typesListContainer input:focus {
244+
background-color: #3a506b !important;
245+
border-color: #5a7a9b !important;
246+
box-shadow: 0 0 0 0.2rem rgba(106, 241, 234, 0.25) !important;
247+
}
248+
249+
/* Autocomplete styling */
250+
:global(.bm-dashboard-dark) .typesListContainer input:-webkit-autofill,
251+
:global(.bm-dashboard-dark) .typesListContainer input:-webkit-autofill:hover,
252+
:global(.bm-dashboard-dark) .typesListContainer input:-webkit-autofill:focus {
253+
-webkit-box-shadow: 0 0 0 30px #2e5061 inset !important;
254+
-webkit-text-fill-color: #ffffff !important;
255+
}
256+
257+
/* Bootstrap Card dark mode */
258+
:global(.bm-dashboard-dark) .typesListContainer :global(.card) {
259+
background-color: #1c2541 !important;
260+
border-color: #3a506b !important;
261+
}
262+
263+
/* DatePicker calendar dark mode */
264+
:global(.bm-dashboard-dark) .typesListContainer :global(.react-datepicker) {
265+
background-color: #2e5061 !important;
266+
border-color: #3a506b !important;
267+
}
268+
269+
:global(.bm-dashboard-dark) .typesListContainer :global(.react-datepicker__header) {
270+
background-color: #1c2541 !important;
271+
border-color: #3a506b !important;
272+
}
273+
274+
:global(.bm-dashboard-dark) .typesListContainer :global(.react-datepicker__current-month),
275+
:global(.bm-dashboard-dark) .typesListContainer :global(.react-datepicker__day-name),
276+
:global(.bm-dashboard-dark) .typesListContainer :global(.react-datepicker__day) {
277+
color: #ffffff !important;
278+
}
279+
280+
:global(.bm-dashboard-dark) .typesListContainer :global(.react-datepicker__day:hover) {
281+
background-color: #3a506b !important;
282+
}
283+
284+
:global(.bm-dashboard-dark) .typesListContainer :global(.react-datepicker__day--selected) {
285+
background-color: #2e86ab !important;
286+
}
287+
288+
:global(.bm-dashboard-dark) .typesListContainer :global(.react-datepicker__time-container) {
289+
background-color: #2e5061 !important;
290+
border-color: #3a506b !important;
291+
}
292+
293+
:global(.bm-dashboard-dark) .typesListContainer :global(.react-datepicker__time) {
294+
background-color: #2e5061 !important;
295+
}
296+
297+
:global(.bm-dashboard-dark) .typesListContainer :global(.react-datepicker__time-list-item) {
298+
color: #ffffff !important;
299+
}
300+
301+
:global(.bm-dashboard-dark) .typesListContainer :global(.react-datepicker__time-list-item:hover) {
302+
background-color: #3a506b !important;
303+
}
304+
305+
:global(.bm-dashboard-dark) .typesListContainer :global(.react-datepicker__input-time-container) {
306+
color: #ffffff !important;
307+
}
308+
309+
:global(.bm-dashboard-dark) .typesListContainer :global(.react-datepicker-time__input) input {
310+
background-color: #1c2541 !important;
311+
color: #ffffff !important;
312+
border-color: #3a506b !important;
313+
}

0 commit comments

Comments
 (0)