Skip to content

Commit d17a197

Browse files
deholicdeholic
authored
Merge pull request #163 from deholic/feature/matcha-core-theme
말차코어 테마 추가
2 parents b05b1a1 + 3aa48ac commit d17a197

3 files changed

Lines changed: 368 additions & 2 deletions

File tree

‎src/App.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -836,10 +836,14 @@ const TimelineSection = ({
836836
);
837837
};
838838

839-
type ThemeMode = "default" | "christmas" | "sky-pink" | "monochrome";
839+
type ThemeMode = "default" | "christmas" | "sky-pink" | "monochrome" | "matcha-core";
840840

841841
const isThemeMode = (value: string): value is ThemeMode =>
842-
value === "default" || value === "christmas" || value === "sky-pink" || value === "monochrome";
842+
value === "default" ||
843+
value === "christmas" ||
844+
value === "sky-pink" ||
845+
value === "monochrome" ||
846+
value === "matcha-core";
843847

844848
const getStoredTheme = (): ThemeMode => {
845849
const storedTheme = localStorage.getItem("textodon.theme");
@@ -1881,6 +1885,7 @@ onAccountChange={setSectionAccount}
18811885
<option value="christmas">크리스마스</option>
18821886
<option value="sky-pink">하늘핑크</option>
18831887
<option value="monochrome">모노톤</option>
1888+
<option value="matcha-core">말차코어</option>
18841889
</select>
18851890
</div>
18861891
<div className="settings-item">

‎src/ui/styles/themes/dark.css‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -494,6 +494,127 @@
494494
--color-image-modal-delete-bg: #c62828;
495495
--color-image-modal-delete-text: #fff5f5;
496496
}
497+
498+
:root:not([data-color-scheme="light"])[data-theme="matcha-core"] {
499+
--page-background: radial-gradient(circle at top left, #0f1a13, #0a120e 55%, #060b08);
500+
--color-text-primary: #c6f3d0;
501+
--scrollbar-thumb: #3b6e50;
502+
--notification-badge-ring: #0d120f;
503+
--color-overlay-backdrop: rgba(4, 12, 8, 0.6);
504+
--color-panel-bg: #0c1410cc;
505+
--color-panel-border: #1f3a2b;
506+
--shadow-panel: 0 18px 40px rgba(0, 0, 0, 0.55);
507+
--color-timeline-column-bg: #0b130f;
508+
--color-timeline-column-border: #1f3a2b;
509+
--shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(0, 0, 0, 0.45);
510+
--color-status-bg: #0b130f;
511+
--color-status-border: #1f3a2b;
512+
--color-status-header: #a8e4b6;
513+
--color-app-header-text: #a8e4b6;
514+
--color-status-header-strong: #d8fde0;
515+
--color-status-meta: #7edc93;
516+
--color-status-time: #7edc93;
517+
--color-status-warning-bg: #132019;
518+
--color-status-warning-text: #9fe8b3;
519+
--color-status-link: #6ce48b;
520+
--color-link-preview-bg: #0b130f;
521+
--color-link-preview-border: #1f3a2b;
522+
--color-link-preview-text: #a8e4b6;
523+
--color-link-preview-strong: #d8fde0;
524+
--color-link-preview-url: #6ce48b;
525+
--color-reaction-text: #c6f3d0;
526+
--color-reaction-border: #2b4a38;
527+
--color-reaction-active-bg: #13271c;
528+
--color-reaction-active-border: #2b4a38;
529+
--color-reaction-active-text: #e6ffee;
530+
--color-account-add-button-bg: #39b56b;
531+
--color-account-add-button-text: #0b140f;
532+
--color-account-add-panel-bg: rgba(11, 19, 15, 0.88);
533+
--color-account-add-panel-text: #c6f3d0;
534+
--color-account-add-panel-border: #1f3a2b;
535+
--shadow-account-add-panel: 0 18px 40px rgba(0, 0, 0, 0.55);
536+
--color-section-menu-bg: rgba(11, 19, 15, 0.88);
537+
--color-section-menu-text: #c6f3d0;
538+
--color-section-menu-border: #1f3a2b;
539+
--shadow-section-menu: 0 18px 40px rgba(0, 0, 0, 0.55);
540+
--color-section-menu-danger: #e07a6d;
541+
--color-toast-success-bg: #133021;
542+
--color-toast-success-border: #2f8a5d;
543+
--color-toast-success-text: #c9f5d6;
544+
--color-toast-info-bg: #0c1410;
545+
--color-toast-info-border: #1f3a2b;
546+
--color-toast-info-text: #c6f3d0;
547+
--color-toast-error-bg: #3a1b1a;
548+
--color-toast-error-border: #e07a6d;
549+
--color-toast-error-text: #f6d4cf;
550+
--color-account-selector-bg: #0b130f;
551+
--color-account-selector-border: #1f3a2b;
552+
--shadow-account-selector: 0 18px 40px rgba(0, 0, 0, 0.55);
553+
--color-account-selector-placeholder: #8cd49a;
554+
--color-account-handle: #a8e4b6;
555+
--color-file-button-bg: #163126;
556+
--color-file-button-text: #d7f6df;
557+
--color-secondary-button-bg: #163126;
558+
--color-secondary-button-text: #d7f6df;
559+
--color-secondary-button-border: #1f3a2b;
560+
--color-emoji-panel-bg: #0b130f;
561+
--color-emoji-panel-border: #1f3a2b;
562+
--color-emoji-toggle-bg: #13271c;
563+
--color-emoji-toggle-text: #c6f3d0;
564+
--color-emoji-toggle-border: #1f3a2b;
565+
--color-emoji-count-bg: #1f3a2b;
566+
--color-emoji-count-text: #d8fde0;
567+
--color-emoji-button-bg: #13271c;
568+
--color-emoji-button-border: #1f3a2b;
569+
--color-emoji-empty-text: #7fb88f;
570+
--color-compose-busy-backdrop: rgba(5, 12, 8, 0.65);
571+
--color-compose-busy-bg: #0c1410;
572+
--color-compose-busy-border: #1f3a2b;
573+
--color-compose-busy-text: #a8e4b6;
574+
--color-compose-busy-spinner-border: #1f3a2b;
575+
--color-compose-busy-spinner-active: #6ce48b;
576+
--color-input-bg: #0a120e;
577+
--color-input-border: #1f3a2b;
578+
--color-input-text: #c6f3d0;
579+
--color-input-placeholder: #6f9f7f;
580+
--color-settings-select-bg: #0a120e;
581+
--color-settings-select-border: #1f3a2b;
582+
--color-settings-select-text: #c6f3d0;
583+
--color-compose-input-bg: #0a120e;
584+
--color-attachments-bg: #101c15;
585+
--color-attachments-border: #1f3a2b;
586+
--color-attachment-add-border: #6ce48b;
587+
--color-attachment-add-text: #8cd49a;
588+
--color-action-bg: #39b56b;
589+
--color-action-text: #0b140f;
590+
--color-action-danger-bg: #b5463b;
591+
--color-action-danger-text: #fff6f0;
592+
--color-action-active-bg: #6ce48b;
593+
--color-action-active-text: #0c1a12;
594+
--color-action-ghost-text: #6ce48b;
595+
--color-link: #6ce48b;
596+
--color-sidebar-description: #a8e4b6;
597+
--color-brand-text: #a8e4b6;
598+
--color-oss-list: #a8e4b6;
599+
--color-sidebar-description-link: #6ce48b;
600+
--color-sidebar-link: #6ce48b;
601+
--color-sidebar-divider: #1f3a2b;
602+
--color-settings-item-border: #1f3a2b;
603+
--color-settings-item-text: #a8e4b6;
604+
--color-status-backdrop: rgba(5, 12, 8, 0.7);
605+
--color-status-modal-bg: #0c1410;
606+
--color-status-modal-border: #1f3a2b;
607+
--color-status-modal-divider: #1f3a2b;
608+
--color-status-modal-title: #c6f3d0;
609+
--color-boosted-by: #7edc93;
610+
--color-notification-actor: #7edc93;
611+
--color-reply-info: #7edc93;
612+
--color-character-count-normal: #a8e4b6;
613+
--color-delete-button-bg: #b5463b;
614+
--color-delete-button-text: #fff6f0;
615+
--color-image-modal-delete-bg: #b5463b;
616+
--color-image-modal-delete-text: #fff6f0;
617+
}
497618
}
498619

499620
:root[data-color-scheme="dark"] {
@@ -991,3 +1112,124 @@
9911112
--color-image-modal-delete-bg: #c62828;
9921113
--color-image-modal-delete-text: #fff5f5;
9931114
}
1115+
1116+
:root[data-color-scheme="dark"][data-theme="matcha-core"] {
1117+
--page-background: radial-gradient(circle at top left, #0f1a13, #0a120e 55%, #060b08);
1118+
--color-text-primary: #c6f3d0;
1119+
--scrollbar-thumb: #3b6e50;
1120+
--notification-badge-ring: #0d120f;
1121+
--color-overlay-backdrop: rgba(4, 12, 8, 0.6);
1122+
--color-panel-bg: #0c1410cc;
1123+
--color-panel-border: #1f3a2b;
1124+
--shadow-panel: 0 18px 40px rgba(0, 0, 0, 0.55);
1125+
--color-timeline-column-bg: #0b130f;
1126+
--color-timeline-column-border: #1f3a2b;
1127+
--shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(0, 0, 0, 0.45);
1128+
--color-status-bg: #0b130f;
1129+
--color-status-border: #1f3a2b;
1130+
--color-status-header: #a8e4b6;
1131+
--color-app-header-text: #a8e4b6;
1132+
--color-status-header-strong: #d8fde0;
1133+
--color-status-meta: #7edc93;
1134+
--color-status-time: #7edc93;
1135+
--color-status-warning-bg: #132019;
1136+
--color-status-warning-text: #9fe8b3;
1137+
--color-status-link: #6ce48b;
1138+
--color-link-preview-bg: #0b130f;
1139+
--color-link-preview-border: #1f3a2b;
1140+
--color-link-preview-text: #a8e4b6;
1141+
--color-link-preview-strong: #d8fde0;
1142+
--color-link-preview-url: #6ce48b;
1143+
--color-reaction-text: #c6f3d0;
1144+
--color-reaction-border: #2b4a38;
1145+
--color-reaction-active-bg: #13271c;
1146+
--color-reaction-active-border: #2b4a38;
1147+
--color-reaction-active-text: #e6ffee;
1148+
--color-account-add-button-bg: #39b56b;
1149+
--color-account-add-button-text: #0b140f;
1150+
--color-account-add-panel-bg: rgba(11, 19, 15, 0.88);
1151+
--color-account-add-panel-text: #c6f3d0;
1152+
--color-account-add-panel-border: #1f3a2b;
1153+
--shadow-account-add-panel: 0 18px 40px rgba(0, 0, 0, 0.55);
1154+
--color-section-menu-bg: rgba(11, 19, 15, 0.88);
1155+
--color-section-menu-text: #c6f3d0;
1156+
--color-section-menu-border: #1f3a2b;
1157+
--shadow-section-menu: 0 18px 40px rgba(0, 0, 0, 0.55);
1158+
--color-section-menu-danger: #e07a6d;
1159+
--color-toast-success-bg: #133021;
1160+
--color-toast-success-border: #2f8a5d;
1161+
--color-toast-success-text: #c9f5d6;
1162+
--color-toast-info-bg: #0c1410;
1163+
--color-toast-info-border: #1f3a2b;
1164+
--color-toast-info-text: #c6f3d0;
1165+
--color-toast-error-bg: #3a1b1a;
1166+
--color-toast-error-border: #e07a6d;
1167+
--color-toast-error-text: #f6d4cf;
1168+
--color-account-selector-bg: #0b130f;
1169+
--color-account-selector-border: #1f3a2b;
1170+
--shadow-account-selector: 0 18px 40px rgba(0, 0, 0, 0.55);
1171+
--color-account-selector-placeholder: #8cd49a;
1172+
--color-account-handle: #a8e4b6;
1173+
--color-file-button-bg: #163126;
1174+
--color-file-button-text: #d7f6df;
1175+
--color-secondary-button-bg: #163126;
1176+
--color-secondary-button-text: #d7f6df;
1177+
--color-secondary-button-border: #1f3a2b;
1178+
--color-emoji-panel-bg: #0b130f;
1179+
--color-emoji-panel-border: #1f3a2b;
1180+
--color-emoji-toggle-bg: #13271c;
1181+
--color-emoji-toggle-text: #c6f3d0;
1182+
--color-emoji-toggle-border: #1f3a2b;
1183+
--color-emoji-count-bg: #1f3a2b;
1184+
--color-emoji-count-text: #d8fde0;
1185+
--color-emoji-button-bg: #13271c;
1186+
--color-emoji-button-border: #1f3a2b;
1187+
--color-emoji-empty-text: #7fb88f;
1188+
--color-compose-busy-backdrop: rgba(5, 12, 8, 0.65);
1189+
--color-compose-busy-bg: #0c1410;
1190+
--color-compose-busy-border: #1f3a2b;
1191+
--color-compose-busy-text: #a8e4b6;
1192+
--color-compose-busy-spinner-border: #1f3a2b;
1193+
--color-compose-busy-spinner-active: #6ce48b;
1194+
--color-input-bg: #0a120e;
1195+
--color-input-border: #1f3a2b;
1196+
--color-input-text: #c6f3d0;
1197+
--color-input-placeholder: #6f9f7f;
1198+
--color-settings-select-bg: #0a120e;
1199+
--color-settings-select-border: #1f3a2b;
1200+
--color-settings-select-text: #c6f3d0;
1201+
--color-compose-input-bg: #0a120e;
1202+
--color-attachments-bg: #101c15;
1203+
--color-attachments-border: #1f3a2b;
1204+
--color-attachment-add-border: #6ce48b;
1205+
--color-attachment-add-text: #8cd49a;
1206+
--color-action-bg: #39b56b;
1207+
--color-action-text: #0b140f;
1208+
--color-action-danger-bg: #b5463b;
1209+
--color-action-danger-text: #fff6f0;
1210+
--color-action-active-bg: #6ce48b;
1211+
--color-action-active-text: #0c1a12;
1212+
--color-action-ghost-text: #6ce48b;
1213+
--color-link: #6ce48b;
1214+
--color-sidebar-description: #a8e4b6;
1215+
--color-brand-text: #a8e4b6;
1216+
--color-oss-list: #a8e4b6;
1217+
--color-sidebar-description-link: #6ce48b;
1218+
--color-sidebar-link: #6ce48b;
1219+
--color-sidebar-divider: #1f3a2b;
1220+
--color-settings-item-border: #1f3a2b;
1221+
--color-settings-item-text: #a8e4b6;
1222+
--color-status-backdrop: rgba(5, 12, 8, 0.7);
1223+
--color-status-modal-bg: #0c1410;
1224+
--color-status-modal-border: #1f3a2b;
1225+
--color-status-modal-divider: #1f3a2b;
1226+
--color-status-modal-title: #c6f3d0;
1227+
--color-boosted-by: #7edc93;
1228+
--color-notification-actor: #7edc93;
1229+
--color-reply-info: #7edc93;
1230+
--color-character-count-normal: #a8e4b6;
1231+
--color-delete-button-bg: #b5463b;
1232+
--color-delete-button-text: #fff6f0;
1233+
--color-image-modal-delete-bg: #b5463b;
1234+
--color-image-modal-delete-text: #fff6f0;
1235+
}

0 commit comments

Comments
 (0)