Skip to content

Commit b976d48

Browse files
Danto7632Danto7632
committed
마이페이지 dark모드 컬러개선
1 parent 867daf2 commit b976d48

5 files changed

Lines changed: 121 additions & 74 deletions

File tree

‎src/components/mypage/MyCommunity.css‎

Lines changed: 56 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
font-size: 14px;
3535
text-decoration: none;
3636
color: var(--mypage-accent);
37-
background: rgba(255, 255, 255, 0.7);
38-
border: 1px solid rgba(108, 92, 231, 0.2);
37+
background: var(--mypage-surface);
38+
border: 1px solid var(--mypage-border);
3939
transition: transform 0.18s ease, box-shadow 0.18s ease;
4040
}
4141

@@ -65,8 +65,8 @@
6565
gap: 10px;
6666
padding: 12px 16px;
6767
border-radius: 14px;
68-
border: 1px solid rgba(148, 163, 184, 0.25);
69-
background: rgba(248, 250, 252, 0.75);
68+
border: 1px solid var(--mypage-border);
69+
background: var(--surface-input);
7070
}
7171

7272
.mycommunity-search__input svg {
@@ -134,8 +134,8 @@
134134
gap: 10px;
135135
padding: 10px 16px;
136136
border-radius: 14px;
137-
border: 1px solid rgba(148, 163, 184, 0.2);
138-
background: rgba(255, 255, 255, 0.8);
137+
border: 1px solid var(--mypage-border);
138+
background: var(--mypage-surface);
139139
color: var(--mypage-text-secondary);
140140
font-size: 14px;
141141
font-weight: 600;
@@ -159,7 +159,7 @@
159159
min-width: 32px;
160160
padding: 2px 8px;
161161
border-radius: 10px;
162-
background: rgba(108, 92, 231, 0.08);
162+
background: rgba(108, 92, 231, 0.12);
163163
color: var(--mypage-accent);
164164
text-align: center;
165165
font-size: 13px;
@@ -182,9 +182,9 @@
182182
padding: 36px;
183183
text-align: center;
184184
border-radius: 18px;
185-
border: 1px dashed rgba(148, 163, 184, 0.32);
185+
border: 1px dashed var(--mypage-border);
186186
color: var(--mypage-text-secondary);
187-
background: rgba(248, 250, 252, 0.55);
187+
background: rgba(148, 163, 184, 0.08);
188188
font-weight: 600;
189189
display: flex;
190190
align-items: center;
@@ -210,6 +210,10 @@
210210
gap: 16px;
211211
padding: 26px;
212212
min-height: 220px;
213+
background: var(--mypage-surface);
214+
border: 1px solid var(--mypage-border);
215+
border-radius: 20px;
216+
box-shadow: var(--mypage-shadow);
213217
}
214218

215219
.card-header {
@@ -353,54 +357,81 @@
353357
}
354358

355359
.dark-mode .mycommunity-header__link {
356-
background: rgba(31, 33, 45, 0.82);
357-
border-color: rgba(167, 139, 250, 0.24);
358-
color: rgba(226, 232, 240, 0.88);
360+
background: var(--mypage-elevated);
361+
border-color: var(--mypage-border);
362+
color: var(--mypage-text);
359363
}
360364

361365
.dark-mode .mycommunity-controls {
362-
background: rgba(25, 26, 36, 0.92);
366+
background: var(--mypage-surface);
363367
}
364368

365369
.dark-mode .mycommunity-search__input {
366-
background: rgba(36, 37, 47, 0.9);
367-
border-color: rgba(148, 163, 184, 0.18);
370+
background: var(--surface-input);
371+
border-color: var(--mypage-border);
368372
}
369373

370374
.dark-mode .search-button {
371375
box-shadow: 0 14px 24px -20px rgba(167, 139, 250, 0.75);
372376
}
373377

378+
.dark-mode .reset-button {
379+
background: rgba(148, 163, 184, 0.24);
380+
color: var(--mypage-text);
381+
}
382+
374383
.dark-mode .mycommunity-tab {
375-
background: rgba(31, 32, 44, 0.84);
384+
background: var(--mypage-surface);
385+
border-color: var(--mypage-border);
376386
}
377387

378388
.dark-mode .mycommunity-tab .tab-icon {
379-
background: rgba(167, 139, 250, 0.16);
380-
color: rgba(226, 232, 240, 0.85);
389+
background: rgba(167, 139, 250, 0.22);
390+
color: var(--mypage-text);
381391
}
382392

383393
.dark-mode .mycommunity-tab .tab-count {
384-
background: rgba(167, 139, 250, 0.16);
385-
color: rgba(226, 232, 240, 0.85);
394+
background: rgba(167, 139, 250, 0.22);
395+
color: var(--mypage-text);
386396
}
387397

388398
.dark-mode .mycommunity-tab.is-active {
389399
background: linear-gradient(135deg, rgba(167, 139, 250, 0.24), rgba(96, 165, 250, 0.18));
390400
border-color: rgba(167, 139, 250, 0.24);
401+
color: var(--mypage-text);
391402
}
392403

393404
.dark-mode .mycommunity-state {
394-
background: rgba(31, 32, 44, 0.7);
395-
border-color: rgba(148, 163, 184, 0.24);
405+
background: rgba(31, 32, 44, 0.72);
406+
border-color: var(--mypage-border);
407+
color: var(--mypage-text);
396408
}
397409

398410
.dark-mode .mycommunity-card {
399-
background: rgba(24, 25, 34, 0.95);
400-
border-color: rgba(148, 163, 184, 0.16);
411+
background: var(--mypage-surface);
412+
border-color: var(--mypage-border);
413+
box-shadow: var(--mypage-shadow);
414+
}
415+
416+
.dark-mode .badge {
417+
background: rgba(148, 163, 184, 0.26);
418+
color: var(--mypage-text-secondary);
419+
}
420+
421+
.dark-mode .badge--ghost {
422+
background: rgba(167, 139, 250, 0.14);
423+
color: var(--mypage-accent);
424+
}
425+
426+
.dark-mode .card-summary {
427+
color: var(--mypage-text-secondary);
401428
}
402429

403430
.dark-mode .card-tags .tag {
404431
background: rgba(59, 130, 246, 0.18);
405-
color: rgba(191, 219, 254, 0.9);
432+
color: #93c5fd;
433+
}
434+
435+
.dark-mode .card-footer {
436+
color: var(--mypage-text-secondary);
406437
}

‎src/components/mypage/MyProject.css‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -282,28 +282,33 @@
282282
}
283283

284284
.dark-mode .ghost-button.compact {
285-
background: rgba(28, 32, 44, 0.92);
285+
background: var(--mypage-surface);
286+
border-color: var(--mypage-border);
287+
color: var(--mypage-text-secondary);
286288
}
287289

288290
.dark-mode .project-search {
289-
background: rgba(28, 32, 44, 0.9);
290-
border-color: rgba(148, 163, 184, 0.22);
291+
background: var(--surface-input);
292+
border-color: var(--mypage-border);
291293
}
292294

293295
.dark-mode .toolbar-chip {
294-
background: rgba(108, 92, 231, 0.18);
296+
background: rgba(108, 92, 231, 0.22);
297+
color: var(--mypage-text);
295298
}
296299

297300
.dark-mode .project-collection__card {
298-
background: rgba(28, 32, 44, 0.95);
299-
border-color: rgba(148, 163, 184, 0.18);
301+
background: var(--mypage-surface);
302+
border-color: var(--mypage-border);
303+
box-shadow: var(--mypage-shadow);
300304
}
301305

302306
.dark-mode .project-progress {
303-
background: rgba(148, 163, 184, 0.22);
307+
background: rgba(148, 163, 184, 0.24);
304308
}
305309

306310
.dark-mode .secondary-button {
307-
background: rgba(28, 32, 44, 0.88);
308-
border-color: rgba(148, 163, 184, 0.22);
311+
background: var(--surface-input);
312+
border-color: var(--mypage-border);
313+
color: var(--mypage-text-secondary);
309314
}

‎src/components/mypage/Mypage.css‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
/* src/components/mypage/Mypage.css */
22

33
.mypage-wrapper {
4-
background: #ffffff;
4+
background: var(--surface-page);
55
min-height: 100vh;
66
display: flex;
77
flex-direction: column;
88
}
99

1010
.mypage {
11-
--mypage-bg: #ffffff;
12-
--mypage-surface: #ffffff;
11+
--mypage-bg: var(--surface-page);
12+
--mypage-surface: var(--surface-card);
1313
--mypage-elevated: rgba(255, 255, 255, 0.92);
1414
--mypage-border: rgba(15, 23, 42, 0.06);
1515
--mypage-text-primary: #161829;
@@ -462,22 +462,28 @@ body.body-scroll .mypage-content {
462462
}
463463

464464
.dark-mode .mypage {
465-
--mypage-bg: #0f1119;
465+
--mypage-bg: var(--surface-page);
466466
--mypage-surface: #181c2b;
467-
--mypage-border: rgba(255, 255, 255, 0.08);
468-
--mypage-text: #f2f4ff;
469-
--mypage-muted: #c9cff7;
467+
--mypage-elevated: rgba(31, 32, 48, 0.92);
468+
--mypage-border: rgba(124, 104, 220, 0.32);
469+
--mypage-text-primary: #f4f3ff;
470+
--mypage-text-secondary: #b3b0de;
471+
--mypage-text-tertiary: #8f8bbb;
472+
--mypage-text: #f4f3ff;
473+
--mypage-muted: #9b97c9;
470474
--mypage-accent: var(--accent-primary);
471-
--mypage-soft: rgba(147, 123, 255, 0.28);
475+
--mypage-soft: rgba(108, 92, 231, 0.22);
476+
--mypage-shadow: 0 28px 46px -36px rgba(4, 4, 8, 0.62);
472477
}
473478

474479
.dark-mode .section-card,
475480
.dark-mode .stat-card {
476-
box-shadow: none;
481+
box-shadow: var(--mypage-shadow);
477482
}
478483

479484
.dark-mode .project-card {
480-
background: rgba(24, 28, 43, 0.85);
485+
background: var(--mypage-surface);
486+
border-color: var(--mypage-border);
481487
}
482488

483489
@media (max-width: 1024px) {

‎src/components/mypage/Settings.css‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -413,67 +413,68 @@
413413
}
414414

415415
.dark-mode .settings-tab {
416-
background: rgba(15, 23, 42, 0.45);
417-
border-color: rgba(148, 163, 184, 0.2);
418-
color: rgba(226, 232, 240, 0.76);
416+
background: var(--mypage-surface);
417+
border-color: var(--mypage-border);
418+
color: var(--mypage-text-secondary);
419419
}
420420

421421
.dark-mode .settings-tab.is-active {
422-
background: rgba(124, 92, 255, 0.2);
422+
background: rgba(124, 92, 255, 0.24);
423423
border-color: rgba(124, 92, 255, 0.54);
424-
color: #dbeafe;
424+
color: var(--mypage-text);
425425
}
426426

427427
.dark-mode .settings-profile-card {
428-
border-color: rgba(124, 92, 255, 0.4);
429-
background: linear-gradient(150deg, rgba(124, 92, 255, 0.18), rgba(15, 23, 42, 0.52));
428+
border-color: var(--mypage-border);
429+
background: var(--mypage-surface);
430430
}
431431

432432
.dark-mode .settings-tip {
433-
background: rgba(148, 163, 184, 0.12);
434-
color: rgba(226, 232, 240, 0.76);
433+
background: rgba(148, 163, 184, 0.16);
434+
color: var(--mypage-text-secondary);
435435
}
436436

437437
.dark-mode .settings-form input,
438438
.dark-mode .settings-form textarea {
439-
background: rgba(15, 23, 42, 0.64);
440-
border-color: rgba(148, 163, 184, 0.25);
441-
color: rgba(248, 250, 252, 0.94);
439+
background: var(--surface-input);
440+
border-color: var(--mypage-border);
441+
color: var(--mypage-text);
442442
}
443443

444444
.dark-mode .settings-form input:focus,
445445
.dark-mode .settings-form textarea:focus {
446446
border-color: rgba(124, 92, 255, 0.8);
447-
box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.18);
447+
box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.22);
448448
}
449449

450450
.dark-mode .tech-tag {
451-
background: rgba(124, 92, 255, 0.24);
452-
color: #dbeafe;
451+
background: rgba(124, 92, 255, 0.28);
452+
color: var(--mypage-text);
453+
border-color: var(--mypage-border);
453454
}
454455

455456
.dark-mode .tech-stack {
456-
background: rgba(124, 92, 255, 0.12);
457-
border-color: rgba(124, 92, 255, 0.28);
457+
background: rgba(124, 92, 255, 0.16);
458+
border-color: var(--mypage-border);
458459
}
459460

460461
.dark-mode .settings-preferences {
461-
background: rgba(15, 23, 42, 0.52);
462-
border-color: rgba(124, 92, 255, 0.28);
462+
background: var(--mypage-surface);
463+
border-color: var(--mypage-border);
463464
}
464465

465466
.dark-mode .preference-item {
466-
border-bottom-color: rgba(148, 163, 184, 0.15);
467+
border-bottom-color: var(--mypage-border);
467468
}
468469

469470
.dark-mode .social-links input {
470-
background: rgba(15, 23, 42, 0.64);
471-
border-color: rgba(124, 92, 255, 0.32);
472-
color: rgba(248, 250, 252, 0.94);
471+
background: var(--surface-input);
472+
border-color: var(--mypage-border);
473+
color: var(--mypage-text);
473474
}
474475

475476
.dark-mode .social-links input:focus {
476-
box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.22);
477+
box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.26);
477478
}
478479

479480
.dark-mode .slider {

‎src/components/mypage/Shared.css‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -205,23 +205,27 @@
205205
}
206206

207207
.dark-mode .shared-controls {
208-
background: rgba(24, 27, 39, 0.95);
208+
background: var(--mypage-surface);
209209
}
210210

211211
.dark-mode .shared-tab {
212-
background: rgba(30, 33, 45, 0.9);
213-
border-color: rgba(148, 163, 184, 0.2);
212+
background: var(--mypage-surface);
213+
border-color: var(--mypage-border);
214+
color: var(--mypage-text-secondary);
214215
}
215216

216217
.dark-mode .shared-tab.is-active {
217218
background: var(--mypage-accent);
219+
color: #fff;
218220
}
219221

220222
.dark-mode .shared-stat {
221-
background: rgba(124, 92, 255, 0.22);
223+
background: rgba(124, 92, 255, 0.24);
224+
color: var(--mypage-text-secondary);
222225
}
223226

224227
.dark-mode .shared-card {
225-
background: rgba(24, 27, 39, 0.96);
226-
border-color: rgba(148, 163, 184, 0.18);
228+
background: var(--mypage-surface);
229+
border-color: var(--mypage-border);
230+
box-shadow: var(--mypage-shadow);
227231
}

0 commit comments

Comments
 (0)