diff --git a/src/ui/components/SettingsModal.tsx b/src/ui/components/SettingsModal.tsx
index ac3cc08..e79860b 100644
--- a/src/ui/components/SettingsModal.tsx
+++ b/src/ui/components/SettingsModal.tsx
@@ -104,7 +104,7 @@ export const SettingsModal = ({
테마
-
기본, 크리스마스, 하늘핑크, 모노톤 테마를 선택합니다.
+
기본, 크리스마스, 하늘핑크, 모노톤, 말차코어, 로얄퍼플, 여름해변 테마를 선택합니다.
diff --git a/src/ui/styles/themes/dark.css b/src/ui/styles/themes/dark.css
index b48e246..1c23692 100644
--- a/src/ui/styles/themes/dark.css
+++ b/src/ui/styles/themes/dark.css
@@ -271,8 +271,6 @@
--color-boosted-by: #9cc7ab;
--color-notification-actor: #9cc7ab;
--color-reply-info: #cf8c8c;
- --color-status-link: #9cc7ab;
- --color-link-preview-url: #9cc7ab;
--color-character-count-normal: #cf8c8c;
}
@@ -520,8 +518,8 @@
}
:root:not([data-color-scheme="light"])[data-theme="matcha-core"] {
- --page-background: radial-gradient(circle at top left, #0f1a13, #0a120e 55%, #060b08);
- --color-text-primary: #c6f3d0;
+ --page-background: radial-gradient(circle at top left, #132018, #0d1611 55%, #08100b);
+ --color-text-primary: #c9debf;
--scrollbar-thumb: #3b6e50;
--notification-badge-ring: #0d120f;
--color-overlay-backdrop: rgba(4, 12, 8, 0.6);
@@ -533,116 +531,366 @@
--shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(0, 0, 0, 0.45);
--color-status-bg: #0b130f;
--color-status-border: #1f3a2b;
- --color-status-header: #a8e4b6;
- --color-app-header-text: #a8e4b6;
- --color-status-header-strong: #d8fde0;
- --color-status-meta: #7edc93;
- --color-status-time: #7edc93;
+ --color-status-header: #abd3ac;
+ --color-app-header-text: #abd3ac;
+ --color-status-header-strong: #dceede;
+ --color-status-meta: #6f9f75;
+ --color-status-time: #6f9f75;
--color-status-warning-bg: #132019;
- --color-status-warning-text: #9fe8b3;
- --color-status-link: #6ce48b;
+ --color-status-warning-text: #a4c097;
+ --color-status-link: #84c783;
--color-link-preview-bg: #0b130f;
--color-link-preview-border: #1f3a2b;
- --color-link-preview-text: #a8e4b6;
- --color-link-preview-strong: #d8fde0;
- --color-link-preview-url: #6ce48b;
- --color-reaction-text: #c6f3d0;
+ --color-link-preview-text: #abd3ac;
+ --color-link-preview-strong: #dceede;
+ --color-link-preview-url: #84c783;
+ --color-reaction-text: #c9debf;
--color-reaction-border: #2b4a38;
--color-reaction-active-bg: #13271c;
--color-reaction-active-border: #2b4a38;
--color-reaction-active-text: #e6ffee;
- --color-account-add-button-bg: #39b56b;
+ --color-account-add-button-bg: #6ab064;
--color-account-add-button-text: #0b140f;
--color-account-add-panel-bg: rgba(11, 19, 15, 0.88);
- --color-account-add-panel-text: #c6f3d0;
+ --color-account-add-panel-text: #c9debf;
--color-account-add-panel-border: #1f3a2b;
--shadow-account-add-panel: 0 18px 40px rgba(0, 0, 0, 0.55);
--color-section-menu-bg: rgba(11, 19, 15, 0.88);
- --color-section-menu-text: #c6f3d0;
+ --color-section-menu-text: #c9debf;
--color-section-menu-border: #1f3a2b;
--shadow-section-menu: 0 18px 40px rgba(0, 0, 0, 0.55);
--color-section-menu-danger: #e07a6d;
--color-toast-success-bg: #133021;
--color-toast-success-border: #2f8a5d;
- --color-toast-success-text: #c9f5d6;
+ --color-toast-success-text: #c7debf;
--color-toast-info-bg: #0c1410;
--color-toast-info-border: #1f3a2b;
- --color-toast-info-text: #c6f3d0;
+ --color-toast-info-text: #c9debf;
--color-toast-error-bg: #3a1b1a;
--color-toast-error-border: #e07a6d;
--color-toast-error-text: #f6d4cf;
--color-account-selector-bg: #0b130f;
--color-account-selector-border: #1f3a2b;
--shadow-account-selector: 0 18px 40px rgba(0, 0, 0, 0.55);
- --color-account-selector-placeholder: #8cd49a;
+ --color-account-selector-placeholder: #90b186;
--color-account-selector-highlight: rgba(255, 255, 255, 0.08);
- --color-account-handle: #a8e4b6;
+ --color-account-handle: #abd3ac;
--color-file-button-bg: #163126;
- --color-file-button-text: #d7f6df;
+ --color-file-button-text: #cadfbe;
--color-secondary-button-bg: #163126;
- --color-secondary-button-text: #d7f6df;
+ --color-secondary-button-text: #cadfbe;
--color-secondary-button-border: #1f3a2b;
--color-emoji-panel-bg: #0b130f;
--color-emoji-panel-border: #1f3a2b;
--color-emoji-toggle-bg: #13271c;
- --color-emoji-toggle-text: #c6f3d0;
+ --color-emoji-toggle-text: #c9debf;
--color-emoji-toggle-border: #1f3a2b;
--color-emoji-count-bg: #1f3a2b;
- --color-emoji-count-text: #d8fde0;
+ --color-emoji-count-text: #d8e8cd;
--color-emoji-button-bg: #13271c;
--color-emoji-button-border: #1f3a2b;
- --color-emoji-empty-text: #7fb88f;
+ --color-emoji-empty-text: #8aa481;
--color-compose-busy-backdrop: rgba(5, 12, 8, 0.65);
--color-compose-busy-bg: #0c1410;
--color-compose-busy-border: #1f3a2b;
- --color-compose-busy-text: #a8e4b6;
+ --color-compose-busy-text: #abd3ac;
--color-compose-busy-spinner-border: #1f3a2b;
- --color-compose-busy-spinner-active: #6ce48b;
+ --color-compose-busy-spinner-active: #84c783;
--color-input-bg: #0a120e;
--color-input-border: #1f3a2b;
- --color-input-text: #c6f3d0;
- --color-input-placeholder: #6f9f7f;
+ --color-input-text: #c9debf;
+ --color-input-placeholder: #819779;
--color-settings-select-bg: #0a120e;
--color-settings-select-border: #1f3a2b;
- --color-settings-select-text: #c6f3d0;
- --color-settings-scrollbar-track: rgba(198, 243, 208, 0.1);
- --color-settings-scrollbar-thumb: rgba(198, 243, 208, 0.3);
- --color-settings-scrollbar-thumb-hover: rgba(198, 243, 208, 0.5);
+ --color-settings-select-text: #c9debf;
+ --color-settings-scrollbar-track: rgba(195, 217, 184, 0.1);
+ --color-settings-scrollbar-thumb: rgba(195, 217, 184, 0.3);
+ --color-settings-scrollbar-thumb-hover: rgba(195, 217, 184, 0.5);
--color-compose-input-bg: #0a120e;
--color-attachments-bg: #101c15;
--color-attachments-border: #1f3a2b;
- --color-attachment-add-text: #8cd49a;
- --color-action-bg: #39b56b;
+ --color-attachment-add-text: #92c08f;
+ --color-action-bg: #6ab064;
--color-action-text: #0b140f;
--color-action-danger-bg: #b5463b;
--color-action-danger-text: #fff6f0;
- --color-action-active-bg: #6ce48b;
+ --color-action-active-bg: #84c783;
--color-action-active-text: #0c1a12;
- --color-action-ghost-text: #6ce48b;
- --color-link: #6ce48b;
- --color-sidebar-description: #a8e4b6;
- --color-brand-text: #a8e4b6;
- --color-oss-list: #a8e4b6;
- --color-sidebar-description-link: #6ce48b;
- --color-sidebar-link: #6ce48b;
+ --color-action-ghost-text: #84c783;
+ --color-link: #84c783;
+ --color-sidebar-description: #abd3ac;
+ --color-brand-text: #abd3ac;
+ --color-oss-list: #abd3ac;
+ --color-sidebar-description-link: #84c783;
+ --color-sidebar-link: #84c783;
--color-sidebar-divider: #1f3a2b;
--color-settings-item-border: #1f3a2b;
- --color-settings-item-text: #a8e4b6;
+ --color-settings-item-text: #abd3ac;
--color-status-backdrop: rgba(5, 12, 8, 0.7);
--color-status-modal-bg: #0c1410;
--color-status-modal-border: #1f3a2b;
--color-status-modal-divider: #1f3a2b;
- --color-status-modal-title: #c6f3d0;
- --color-boosted-by: #7edc93;
- --color-notification-actor: #7edc93;
- --color-reply-info: #7edc93;
- --color-character-count-normal: #a8e4b6;
+ --color-status-modal-title: #c9debf;
+ --color-boosted-by: #6f9f75;
+ --color-notification-actor: #6f9f75;
+ --color-reply-info: #6f9f75;
+ --color-character-count-normal: #abd3ac;
--color-delete-button-bg: #b5463b;
--color-delete-button-text: #fff6f0;
--color-image-modal-delete-bg: #b5463b;
--color-image-modal-delete-text: #fff6f0;
}
+
+ :root:not([data-color-scheme="light"])[data-theme="royal-purple"] {
+ --page-background: radial-gradient(circle at top left, #1a1225, #161023 55%, #0f0a18);
+ --color-text-primary: #ede8f5;
+ --scrollbar-thumb: #6a5b86;
+ --notification-badge-ring: #151021;
+ --color-overlay-backdrop: rgba(56, 40, 83, 0.45);
+ --color-panel-bg: #171124cc;
+ --color-panel-border: #3d2f53;
+ --shadow-panel: 0 18px 40px rgba(9, 6, 16, 0.55);
+ --color-timeline-column-bg: #151022;
+ --color-timeline-column-border: #3d2f53;
+ --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(9, 6, 16, 0.4);
+ --color-status-bg: #151022;
+ --color-status-border: #3d2f53;
+ --color-status-header: #d8c9e8;
+ --color-app-header-text: #d8c9e8;
+ --color-status-header-strong: #f1e9ff;
+ --color-status-meta: #e2bc69;
+ --color-status-time: #e2bc69;
+ --color-status-warning-bg: #21192f;
+ --color-status-warning-text: #c9ade6;
+ --color-status-link: #baa3f6;
+ --color-link-preview-bg: #151022;
+ --color-link-preview-border: #3d2f53;
+ --color-link-preview-text: #d8c9e8;
+ --color-link-preview-strong: #f1e9ff;
+ --color-link-preview-url: #baa3f6;
+ --color-reaction-text: #ede8f5;
+ --color-reaction-border: #3d2f53;
+ --color-reaction-active-bg: #251a37;
+ --color-reaction-active-border: #3d2f53;
+ --color-reaction-active-text: #f8f4ff;
+ --color-account-add-button-bg: #f5c84b;
+ --color-account-add-button-text: #2b1f06;
+ --color-account-add-panel-bg: rgba(21, 16, 34, 0.9);
+ --color-account-add-panel-text: #ede8f5;
+ --color-account-add-panel-border: #3d2f53;
+ --shadow-account-add-panel: 0 18px 40px rgba(9, 6, 16, 0.55);
+ --color-section-menu-bg: rgba(21, 16, 34, 0.9);
+ --color-section-menu-text: #ede8f5;
+ --color-section-menu-border: #3d2f53;
+ --shadow-section-menu: 0 18px 40px rgba(9, 6, 16, 0.55);
+ --color-toast-success-bg: #173026;
+ --color-toast-success-border: #3f8564;
+ --color-toast-success-text: #dcf2e4;
+ --color-toast-info-bg: #151022;
+ --color-toast-info-border: #3d2f53;
+ --color-toast-info-text: #ede8f5;
+ --color-toast-error-bg: #3a1c28;
+ --color-toast-error-border: #d06a84;
+ --color-toast-error-text: #f9d8e3;
+ --color-account-selector-bg: #151022;
+ --color-account-selector-border: #3d2f53;
+ --shadow-account-selector: 0 18px 40px rgba(9, 6, 16, 0.55);
+ --color-account-selector-placeholder: #c9ade6;
+ --color-account-selector-highlight: rgba(255, 255, 255, 0.08);
+ --color-account-handle: #d8c9e8;
+ --color-file-button-bg: #2a1f3d;
+ --color-file-button-text: #e8def8;
+ --color-secondary-button-bg: #2a1f3d;
+ --color-secondary-button-text: #e8def8;
+ --color-secondary-button-border: #3d2f53;
+ --color-emoji-panel-bg: #151022;
+ --color-emoji-panel-border: #3d2f53;
+ --color-emoji-toggle-bg: #2a1f3d;
+ --color-emoji-toggle-text: #ede8f5;
+ --color-emoji-toggle-border: #3d2f53;
+ --color-emoji-count-bg: #3d2f53;
+ --color-emoji-count-text: #f1e9ff;
+ --color-emoji-button-bg: #2a1f3d;
+ --color-emoji-button-border: #3d2f53;
+ --color-emoji-empty-text: #b7a6cc;
+ --color-compose-busy-backdrop: rgba(21, 16, 34, 0.62);
+ --color-compose-busy-bg: #151022;
+ --color-compose-busy-border: #3d2f53;
+ --color-compose-busy-text: #d8c9e8;
+ --color-compose-busy-spinner-border: #3d2f53;
+ --color-compose-busy-spinner-active: #baa3f6;
+ --color-input-bg: #151022;
+ --color-input-border: #3d2f53;
+ --color-input-text: #ede8f5;
+ --color-input-placeholder: #aa97c2;
+ --color-settings-select-bg: #151022;
+ --color-settings-select-border: #3d2f53;
+ --color-settings-select-text: #ede8f5;
+ --color-settings-scrollbar-track: rgba(237, 232, 245, 0.1);
+ --color-settings-scrollbar-thumb: rgba(237, 232, 245, 0.3);
+ --color-settings-scrollbar-thumb-hover: rgba(237, 232, 245, 0.5);
+ --color-compose-input-bg: #151022;
+ --color-attachments-bg: #21182f;
+ --color-attachments-border: #3d2f53;
+
+ --color-attachment-add-border: #baa3f6;
+ --color-attachment-add-text: #d8c9e8;
+ --color-action-bg: #f5c84b;
+ --color-action-text: #2b1f06;
+ --color-action-danger-bg: #b34762;
+ --color-action-danger-text: #fff3f6;
+ --color-action-active-bg: #a78bfa;
+ --color-action-active-text: #1f1534;
+ --color-action-ghost-text: #c9ade6;
+ --color-link: #c9ade6;
+ --color-sidebar-description: #d8c9e8;
+ --color-brand-text: #d8c9e8;
+ --color-oss-list: #d8c9e8;
+ --color-sidebar-description-link: #baa3f6;
+ --color-sidebar-link: #e2bc69;
+ --color-sidebar-divider: #3d2f53;
+ --color-settings-item-border: #3d2f53;
+ --color-settings-item-text: #d8c9e8;
+ --color-status-backdrop: rgba(21, 16, 34, 0.7);
+ --color-status-modal-bg: #171124;
+ --color-status-modal-border: #3d2f53;
+ --color-status-modal-divider: #3d2f53;
+ --color-status-modal-title: #ede8f5;
+ --color-boosted-by: #e2bc69;
+ --color-notification-actor: #e2bc69;
+ --color-reply-info: #c9ade6;
+ --color-character-count-normal: #d8c9e8;
+ --color-delete-button-bg: #b34762;
+ --color-delete-button-text: #fff3f6;
+ --color-image-modal-delete-bg: #b34762;
+ --color-image-modal-delete-text: #fff3f6;
+ }
+
+ :root:not([data-color-scheme="light"])[data-theme="summer-beach"] {
+ --page-background: radial-gradient(circle at top left, #0c1929, #102337 55%, #141a23);
+ --color-text-primary: #e8f4f8;
+ --scrollbar-thumb: #56748a;
+ --notification-badge-ring: #0c1a2a;
+ --color-overlay-backdrop: rgba(14, 76, 113, 0.4);
+ --color-panel-bg: #0f2538cc;
+ --color-panel-border: #2b4b61;
+ --shadow-panel: 0 18px 40px rgba(6, 14, 24, 0.55);
+ --color-timeline-column-bg: #102133;
+ --color-timeline-column-border: #2b4b61;
+ --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(6, 14, 24, 0.4);
+ --color-status-bg: #102133;
+ --color-status-border: #2b4b61;
+ --color-status-header: #b9deed;
+ --color-app-header-text: #b9deed;
+ --color-status-header-strong: #eaf8ff;
+ --color-status-meta: #ffb07a;
+ --color-status-time: #ffb07a;
+ --color-status-warning-bg: #2b2a22;
+ --color-status-warning-text: #f0c58f;
+ --color-status-link: #66d2ff;
+ --color-link-preview-bg: #102133;
+ --color-link-preview-border: #2b4b61;
+ --color-link-preview-text: #b9deed;
+ --color-link-preview-strong: #eaf8ff;
+ --color-link-preview-url: #66d2ff;
+ --color-reaction-text: #e8f4f8;
+ --color-reaction-border: #2b4b61;
+ --color-reaction-active-bg: #16374f;
+ --color-reaction-active-border: #2b4b61;
+ --color-reaction-active-text: #f0fbff;
+ --color-account-add-button-bg: #38bdf8;
+ --color-account-add-button-text: #0c2434;
+ --color-account-add-panel-bg: rgba(16, 33, 51, 0.9);
+ --color-account-add-panel-text: #e8f4f8;
+ --color-account-add-panel-border: #2b4b61;
+ --shadow-account-add-panel: 0 18px 40px rgba(6, 14, 24, 0.55);
+ --color-section-menu-bg: rgba(16, 33, 51, 0.9);
+ --color-section-menu-text: #e8f4f8;
+ --color-section-menu-border: #2b4b61;
+ --shadow-section-menu: 0 18px 40px rgba(6, 14, 24, 0.55);
+ --color-toast-success-bg: #173026;
+ --color-toast-success-border: #3f8564;
+ --color-toast-success-text: #dcf2e4;
+ --color-toast-info-bg: #102133;
+ --color-toast-info-border: #2b4b61;
+ --color-toast-info-text: #e8f4f8;
+ --color-toast-error-bg: #3a1f1a;
+ --color-toast-error-border: #e0705d;
+ --color-toast-error-text: #f8d8d1;
+ --color-account-selector-bg: #102133;
+ --color-account-selector-border: #2b4b61;
+ --shadow-account-selector: 0 18px 40px rgba(6, 14, 24, 0.55);
+ --color-account-selector-placeholder: #90b7ca;
+ --color-account-selector-highlight: rgba(255, 255, 255, 0.08);
+ --color-account-handle: #b9deed;
+ --color-file-button-bg: #193a52;
+ --color-file-button-text: #dcf2fc;
+ --color-secondary-button-bg: #193a52;
+ --color-secondary-button-text: #dcf2fc;
+ --color-secondary-button-border: #2b4b61;
+ --color-emoji-panel-bg: #102133;
+ --color-emoji-panel-border: #2b4b61;
+ --color-emoji-toggle-bg: #193a52;
+ --color-emoji-toggle-text: #e8f4f8;
+ --color-emoji-toggle-border: #2b4b61;
+ --color-emoji-count-bg: #2b4b61;
+ --color-emoji-count-text: #eaf8ff;
+ --color-emoji-button-bg: #193a52;
+ --color-emoji-button-border: #2b4b61;
+ --color-emoji-empty-text: #8eacbf;
+ --color-compose-busy-backdrop: rgba(8, 19, 31, 0.62);
+ --color-compose-busy-bg: #102133;
+ --color-compose-busy-border: #2b4b61;
+ --color-compose-busy-text: #b9deed;
+ --color-compose-busy-spinner-border: #2b4b61;
+ --color-compose-busy-spinner-active: #66d2ff;
+ --color-input-bg: #102133;
+ --color-input-border: #2b4b61;
+ --color-input-text: #e8f4f8;
+ --color-input-placeholder: #8eacbf;
+ --color-settings-select-bg: #102133;
+ --color-settings-select-border: #2b4b61;
+ --color-settings-select-text: #e8f4f8;
+ --color-settings-scrollbar-track: rgba(232, 244, 248, 0.1);
+ --color-settings-scrollbar-thumb: rgba(232, 244, 248, 0.3);
+ --color-settings-scrollbar-thumb-hover: rgba(232, 244, 248, 0.5);
+ --color-compose-input-bg: #102133;
+ --color-attachments-bg: #162f45;
+ --color-attachments-border: #2b4b61;
+
+ --color-attachment-add-border: #66d2ff;
+ --color-attachment-add-text: #b9deed;
+ --color-action-bg: #fb923c;
+ --color-action-text: #2f1808;
+ --color-action-danger-bg: #b84444;
+ --color-action-danger-text: #fff4f4;
+ --color-action-active-bg: #38bdf8;
+ --color-action-active-text: #0b2434;
+ --color-action-ghost-text: #66d2ff;
+ --color-link: #66d2ff;
+ --color-sidebar-description: #b9deed;
+ --color-brand-text: #b9deed;
+ --color-oss-list: #b9deed;
+ --color-sidebar-description-link: #66d2ff;
+ --color-sidebar-link: #ffb07a;
+ --color-sidebar-divider: #2b4b61;
+ --color-settings-item-border: #2b4b61;
+ --color-settings-item-text: #b9deed;
+ --color-status-backdrop: rgba(8, 19, 31, 0.7);
+ --color-status-modal-bg: #0f2538;
+ --color-status-modal-border: #2b4b61;
+ --color-status-modal-divider: #2b4b61;
+ --color-status-modal-title: #e8f4f8;
+ --color-boosted-by: #66d2ff;
+ --color-notification-actor: #66d2ff;
+ --color-reply-info: #ffb07a;
+ --color-character-count-normal: #b9deed;
+ --color-delete-button-bg: #b84444;
+ --color-delete-button-text: #fff4f4;
+ --color-image-modal-delete-bg: #b84444;
+ --color-image-modal-delete-text: #fff4f4;
+ }
}
:root[data-color-scheme="dark"] {
@@ -913,8 +1161,6 @@
--color-boosted-by: #9cc7ab;
--color-notification-actor: #9cc7ab;
--color-reply-info: #cf8c8c;
- --color-status-link: #9cc7ab;
- --color-link-preview-url: #9cc7ab;
--color-character-count-normal: #cf8c8c;
}
@@ -1162,8 +1408,8 @@
}
:root[data-color-scheme="dark"][data-theme="matcha-core"] {
- --page-background: radial-gradient(circle at top left, #0f1a13, #0a120e 55%, #060b08);
- --color-text-primary: #c6f3d0;
+ --page-background: radial-gradient(circle at top left, #132018, #0d1611 55%, #08100b);
+ --color-text-primary: #c9debf;
--scrollbar-thumb: #3b6e50;
--notification-badge-ring: #0d120f;
--color-overlay-backdrop: rgba(4, 12, 8, 0.6);
@@ -1175,113 +1421,363 @@
--shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(0, 0, 0, 0.45);
--color-status-bg: #0b130f;
--color-status-border: #1f3a2b;
- --color-status-header: #a8e4b6;
- --color-app-header-text: #a8e4b6;
- --color-status-header-strong: #d8fde0;
- --color-status-meta: #7edc93;
- --color-status-time: #7edc93;
+ --color-status-header: #abd3ac;
+ --color-app-header-text: #abd3ac;
+ --color-status-header-strong: #dceede;
+ --color-status-meta: #6f9f75;
+ --color-status-time: #6f9f75;
--color-status-warning-bg: #132019;
- --color-status-warning-text: #9fe8b3;
- --color-status-link: #6ce48b;
+ --color-status-warning-text: #a4c097;
+ --color-status-link: #84c783;
--color-link-preview-bg: #0b130f;
--color-link-preview-border: #1f3a2b;
- --color-link-preview-text: #a8e4b6;
- --color-link-preview-strong: #d8fde0;
- --color-link-preview-url: #6ce48b;
- --color-reaction-text: #c6f3d0;
+ --color-link-preview-text: #abd3ac;
+ --color-link-preview-strong: #dceede;
+ --color-link-preview-url: #84c783;
+ --color-reaction-text: #c9debf;
--color-reaction-border: #2b4a38;
--color-reaction-active-bg: #13271c;
--color-reaction-active-border: #2b4a38;
--color-reaction-active-text: #e6ffee;
- --color-account-add-button-bg: #39b56b;
+ --color-account-add-button-bg: #6ab064;
--color-account-add-button-text: #0b140f;
--color-account-add-panel-bg: rgba(11, 19, 15, 0.88);
- --color-account-add-panel-text: #c6f3d0;
+ --color-account-add-panel-text: #c9debf;
--color-account-add-panel-border: #1f3a2b;
--shadow-account-add-panel: 0 18px 40px rgba(0, 0, 0, 0.55);
--color-section-menu-bg: rgba(11, 19, 15, 0.88);
- --color-section-menu-text: #c6f3d0;
+ --color-section-menu-text: #c9debf;
--color-section-menu-border: #1f3a2b;
--shadow-section-menu: 0 18px 40px rgba(0, 0, 0, 0.55);
--color-section-menu-danger: #e07a6d;
--color-toast-success-bg: #133021;
--color-toast-success-border: #2f8a5d;
- --color-toast-success-text: #c9f5d6;
+ --color-toast-success-text: #c7debf;
--color-toast-info-bg: #0c1410;
--color-toast-info-border: #1f3a2b;
- --color-toast-info-text: #c6f3d0;
+ --color-toast-info-text: #c9debf;
--color-toast-error-bg: #3a1b1a;
--color-toast-error-border: #e07a6d;
--color-toast-error-text: #f6d4cf;
--color-account-selector-bg: #0b130f;
--color-account-selector-border: #1f3a2b;
--shadow-account-selector: 0 18px 40px rgba(0, 0, 0, 0.55);
- --color-account-selector-placeholder: #8cd49a;
+ --color-account-selector-placeholder: #90b186;
--color-account-selector-highlight: rgba(255, 255, 255, 0.08);
- --color-account-handle: #a8e4b6;
+ --color-account-handle: #abd3ac;
--color-file-button-bg: #163126;
- --color-file-button-text: #d7f6df;
+ --color-file-button-text: #cadfbe;
--color-secondary-button-bg: #163126;
- --color-secondary-button-text: #d7f6df;
+ --color-secondary-button-text: #cadfbe;
--color-secondary-button-border: #1f3a2b;
--color-emoji-panel-bg: #0b130f;
--color-emoji-panel-border: #1f3a2b;
--color-emoji-toggle-bg: #13271c;
- --color-emoji-toggle-text: #c6f3d0;
+ --color-emoji-toggle-text: #c9debf;
--color-emoji-toggle-border: #1f3a2b;
--color-emoji-count-bg: #1f3a2b;
- --color-emoji-count-text: #d8fde0;
+ --color-emoji-count-text: #d8e8cd;
--color-emoji-button-bg: #13271c;
--color-emoji-button-border: #1f3a2b;
- --color-emoji-empty-text: #7fb88f;
+ --color-emoji-empty-text: #8aa481;
--color-compose-busy-backdrop: rgba(5, 12, 8, 0.65);
--color-compose-busy-bg: #0c1410;
--color-compose-busy-border: #1f3a2b;
- --color-compose-busy-text: #a8e4b6;
+ --color-compose-busy-text: #abd3ac;
--color-compose-busy-spinner-border: #1f3a2b;
- --color-compose-busy-spinner-active: #6ce48b;
+ --color-compose-busy-spinner-active: #84c783;
--color-input-bg: #0a120e;
--color-input-border: #1f3a2b;
- --color-input-text: #c6f3d0;
- --color-input-placeholder: #6f9f7f;
+ --color-input-text: #c9debf;
+ --color-input-placeholder: #819779;
--color-settings-select-bg: #0a120e;
--color-settings-select-border: #1f3a2b;
- --color-settings-select-text: #c6f3d0;
- --color-settings-scrollbar-track: rgba(198, 243, 208, 0.1);
- --color-settings-scrollbar-thumb: rgba(198, 243, 208, 0.3);
- --color-settings-scrollbar-thumb-hover: rgba(198, 243, 208, 0.5);
+ --color-settings-select-text: #c9debf;
+ --color-settings-scrollbar-track: rgba(195, 217, 184, 0.1);
+ --color-settings-scrollbar-thumb: rgba(195, 217, 184, 0.3);
+ --color-settings-scrollbar-thumb-hover: rgba(195, 217, 184, 0.5);
--color-compose-input-bg: #0a120e;
--color-attachments-bg: #101c15;
--color-attachments-border: #1f3a2b;
- --color-attachment-add-border: #6ce48b;
- --color-attachment-add-text: #8cd49a;
- --color-action-bg: #39b56b;
+ --color-attachment-add-border: #84c783;
+ --color-attachment-add-text: #92c08f;
+ --color-action-bg: #6ab064;
--color-action-text: #0b140f;
--color-action-danger-bg: #b5463b;
--color-action-danger-text: #fff6f0;
- --color-action-active-bg: #6ce48b;
+ --color-action-active-bg: #84c783;
--color-action-active-text: #0c1a12;
- --color-action-ghost-text: #6ce48b;
- --color-link: #6ce48b;
- --color-sidebar-description: #a8e4b6;
- --color-brand-text: #a8e4b6;
- --color-oss-list: #a8e4b6;
- --color-sidebar-description-link: #6ce48b;
- --color-sidebar-link: #6ce48b;
+ --color-action-ghost-text: #84c783;
+ --color-link: #84c783;
+ --color-sidebar-description: #abd3ac;
+ --color-brand-text: #abd3ac;
+ --color-oss-list: #abd3ac;
+ --color-sidebar-description-link: #84c783;
+ --color-sidebar-link: #84c783;
--color-sidebar-divider: #1f3a2b;
--color-settings-item-border: #1f3a2b;
- --color-settings-item-text: #a8e4b6;
+ --color-settings-item-text: #abd3ac;
--color-status-backdrop: rgba(5, 12, 8, 0.7);
--color-status-modal-bg: #0c1410;
--color-status-modal-border: #1f3a2b;
--color-status-modal-divider: #1f3a2b;
- --color-status-modal-title: #c6f3d0;
- --color-boosted-by: #7edc93;
- --color-notification-actor: #7edc93;
- --color-reply-info: #7edc93;
- --color-character-count-normal: #a8e4b6;
+ --color-status-modal-title: #c9debf;
+ --color-boosted-by: #6f9f75;
+ --color-notification-actor: #6f9f75;
+ --color-reply-info: #6f9f75;
+ --color-character-count-normal: #abd3ac;
--color-delete-button-bg: #b5463b;
--color-delete-button-text: #fff6f0;
--color-image-modal-delete-bg: #b5463b;
--color-image-modal-delete-text: #fff6f0;
}
+
+:root[data-color-scheme="dark"][data-theme="royal-purple"] {
+ --page-background: radial-gradient(circle at top left, #1a1225, #161023 55%, #0f0a18);
+ --color-text-primary: #ede8f5;
+ --scrollbar-thumb: #6a5b86;
+ --notification-badge-ring: #151021;
+ --color-overlay-backdrop: rgba(56, 40, 83, 0.45);
+ --color-panel-bg: #171124cc;
+ --color-panel-border: #3d2f53;
+ --shadow-panel: 0 18px 40px rgba(9, 6, 16, 0.55);
+ --color-timeline-column-bg: #151022;
+ --color-timeline-column-border: #3d2f53;
+ --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(9, 6, 16, 0.4);
+ --color-status-bg: #151022;
+ --color-status-border: #3d2f53;
+ --color-status-header: #d8c9e8;
+ --color-app-header-text: #d8c9e8;
+ --color-status-header-strong: #f1e9ff;
+ --color-status-meta: #e2bc69;
+ --color-status-time: #e2bc69;
+ --color-status-warning-bg: #21192f;
+ --color-status-warning-text: #c9ade6;
+ --color-status-link: #baa3f6;
+ --color-link-preview-bg: #151022;
+ --color-link-preview-border: #3d2f53;
+ --color-link-preview-text: #d8c9e8;
+ --color-link-preview-strong: #f1e9ff;
+ --color-link-preview-url: #baa3f6;
+ --color-reaction-text: #ede8f5;
+ --color-reaction-border: #3d2f53;
+ --color-reaction-active-bg: #251a37;
+ --color-reaction-active-border: #3d2f53;
+ --color-reaction-active-text: #f8f4ff;
+ --color-account-add-button-bg: #f5c84b;
+ --color-account-add-button-text: #2b1f06;
+ --color-account-add-panel-bg: rgba(21, 16, 34, 0.9);
+ --color-account-add-panel-text: #ede8f5;
+ --color-account-add-panel-border: #3d2f53;
+ --shadow-account-add-panel: 0 18px 40px rgba(9, 6, 16, 0.55);
+ --color-section-menu-bg: rgba(21, 16, 34, 0.9);
+ --color-section-menu-text: #ede8f5;
+ --color-section-menu-border: #3d2f53;
+ --shadow-section-menu: 0 18px 40px rgba(9, 6, 16, 0.55);
+ --color-toast-success-bg: #173026;
+ --color-toast-success-border: #3f8564;
+ --color-toast-success-text: #dcf2e4;
+ --color-toast-info-bg: #151022;
+ --color-toast-info-border: #3d2f53;
+ --color-toast-info-text: #ede8f5;
+ --color-toast-error-bg: #3a1c28;
+ --color-toast-error-border: #d06a84;
+ --color-toast-error-text: #f9d8e3;
+ --color-account-selector-bg: #151022;
+ --color-account-selector-border: #3d2f53;
+ --shadow-account-selector: 0 18px 40px rgba(9, 6, 16, 0.55);
+ --color-account-selector-placeholder: #c9ade6;
+ --color-account-selector-highlight: rgba(255, 255, 255, 0.08);
+ --color-account-handle: #d8c9e8;
+ --color-file-button-bg: #2a1f3d;
+ --color-file-button-text: #e8def8;
+ --color-secondary-button-bg: #2a1f3d;
+ --color-secondary-button-text: #e8def8;
+ --color-secondary-button-border: #3d2f53;
+ --color-emoji-panel-bg: #151022;
+ --color-emoji-panel-border: #3d2f53;
+ --color-emoji-toggle-bg: #2a1f3d;
+ --color-emoji-toggle-text: #ede8f5;
+ --color-emoji-toggle-border: #3d2f53;
+ --color-emoji-count-bg: #3d2f53;
+ --color-emoji-count-text: #f1e9ff;
+ --color-emoji-button-bg: #2a1f3d;
+ --color-emoji-button-border: #3d2f53;
+ --color-emoji-empty-text: #b7a6cc;
+ --color-compose-busy-backdrop: rgba(21, 16, 34, 0.62);
+ --color-compose-busy-bg: #151022;
+ --color-compose-busy-border: #3d2f53;
+ --color-compose-busy-text: #d8c9e8;
+ --color-compose-busy-spinner-border: #3d2f53;
+ --color-compose-busy-spinner-active: #baa3f6;
+ --color-input-bg: #151022;
+ --color-input-border: #3d2f53;
+ --color-input-text: #ede8f5;
+ --color-input-placeholder: #aa97c2;
+ --color-settings-select-bg: #151022;
+ --color-settings-select-border: #3d2f53;
+ --color-settings-select-text: #ede8f5;
+ --color-settings-scrollbar-track: rgba(237, 232, 245, 0.1);
+ --color-settings-scrollbar-thumb: rgba(237, 232, 245, 0.3);
+ --color-settings-scrollbar-thumb-hover: rgba(237, 232, 245, 0.5);
+ --color-compose-input-bg: #151022;
+ --color-attachments-bg: #21182f;
+ --color-attachments-border: #3d2f53;
+
+ --color-attachment-add-border: #baa3f6;
+ --color-attachment-add-text: #d8c9e8;
+ --color-action-bg: #f5c84b;
+ --color-action-text: #2b1f06;
+ --color-action-danger-bg: #b34762;
+ --color-action-danger-text: #fff3f6;
+ --color-action-active-bg: #a78bfa;
+ --color-action-active-text: #1f1534;
+ --color-action-ghost-text: #c9ade6;
+ --color-link: #c9ade6;
+ --color-sidebar-description: #d8c9e8;
+ --color-brand-text: #d8c9e8;
+ --color-oss-list: #d8c9e8;
+ --color-sidebar-description-link: #baa3f6;
+ --color-sidebar-link: #e2bc69;
+ --color-sidebar-divider: #3d2f53;
+ --color-settings-item-border: #3d2f53;
+ --color-settings-item-text: #d8c9e8;
+ --color-status-backdrop: rgba(21, 16, 34, 0.7);
+ --color-status-modal-bg: #171124;
+ --color-status-modal-border: #3d2f53;
+ --color-status-modal-divider: #3d2f53;
+ --color-status-modal-title: #ede8f5;
+ --color-boosted-by: #e2bc69;
+ --color-notification-actor: #e2bc69;
+ --color-reply-info: #c9ade6;
+ --color-character-count-normal: #d8c9e8;
+ --color-delete-button-bg: #b34762;
+ --color-delete-button-text: #fff3f6;
+ --color-image-modal-delete-bg: #b34762;
+ --color-image-modal-delete-text: #fff3f6;
+}
+
+:root[data-color-scheme="dark"][data-theme="summer-beach"] {
+ --page-background: radial-gradient(circle at top left, #0c1929, #102337 55%, #141a23);
+ --color-text-primary: #e8f4f8;
+ --scrollbar-thumb: #56748a;
+ --notification-badge-ring: #0c1a2a;
+ --color-overlay-backdrop: rgba(14, 76, 113, 0.4);
+ --color-panel-bg: #0f2538cc;
+ --color-panel-border: #2b4b61;
+ --shadow-panel: 0 18px 40px rgba(6, 14, 24, 0.55);
+ --color-timeline-column-bg: #102133;
+ --color-timeline-column-border: #2b4b61;
+ --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(6, 14, 24, 0.4);
+ --color-status-bg: #102133;
+ --color-status-border: #2b4b61;
+ --color-status-header: #b9deed;
+ --color-app-header-text: #b9deed;
+ --color-status-header-strong: #eaf8ff;
+ --color-status-meta: #ffb07a;
+ --color-status-time: #ffb07a;
+ --color-status-warning-bg: #2b2a22;
+ --color-status-warning-text: #f0c58f;
+ --color-status-link: #66d2ff;
+ --color-link-preview-bg: #102133;
+ --color-link-preview-border: #2b4b61;
+ --color-link-preview-text: #b9deed;
+ --color-link-preview-strong: #eaf8ff;
+ --color-link-preview-url: #66d2ff;
+ --color-reaction-text: #e8f4f8;
+ --color-reaction-border: #2b4b61;
+ --color-reaction-active-bg: #16374f;
+ --color-reaction-active-border: #2b4b61;
+ --color-reaction-active-text: #f0fbff;
+ --color-account-add-button-bg: #38bdf8;
+ --color-account-add-button-text: #0c2434;
+ --color-account-add-panel-bg: rgba(16, 33, 51, 0.9);
+ --color-account-add-panel-text: #e8f4f8;
+ --color-account-add-panel-border: #2b4b61;
+ --shadow-account-add-panel: 0 18px 40px rgba(6, 14, 24, 0.55);
+ --color-section-menu-bg: rgba(16, 33, 51, 0.9);
+ --color-section-menu-text: #e8f4f8;
+ --color-section-menu-border: #2b4b61;
+ --shadow-section-menu: 0 18px 40px rgba(6, 14, 24, 0.55);
+ --color-toast-success-bg: #173026;
+ --color-toast-success-border: #3f8564;
+ --color-toast-success-text: #dcf2e4;
+ --color-toast-info-bg: #102133;
+ --color-toast-info-border: #2b4b61;
+ --color-toast-info-text: #e8f4f8;
+ --color-toast-error-bg: #3a1f1a;
+ --color-toast-error-border: #e0705d;
+ --color-toast-error-text: #f8d8d1;
+ --color-account-selector-bg: #102133;
+ --color-account-selector-border: #2b4b61;
+ --shadow-account-selector: 0 18px 40px rgba(6, 14, 24, 0.55);
+ --color-account-selector-placeholder: #90b7ca;
+ --color-account-selector-highlight: rgba(255, 255, 255, 0.08);
+ --color-account-handle: #b9deed;
+ --color-file-button-bg: #193a52;
+ --color-file-button-text: #dcf2fc;
+ --color-secondary-button-bg: #193a52;
+ --color-secondary-button-text: #dcf2fc;
+ --color-secondary-button-border: #2b4b61;
+ --color-emoji-panel-bg: #102133;
+ --color-emoji-panel-border: #2b4b61;
+ --color-emoji-toggle-bg: #193a52;
+ --color-emoji-toggle-text: #e8f4f8;
+ --color-emoji-toggle-border: #2b4b61;
+ --color-emoji-count-bg: #2b4b61;
+ --color-emoji-count-text: #eaf8ff;
+ --color-emoji-button-bg: #193a52;
+ --color-emoji-button-border: #2b4b61;
+ --color-emoji-empty-text: #8eacbf;
+ --color-compose-busy-backdrop: rgba(8, 19, 31, 0.62);
+ --color-compose-busy-bg: #102133;
+ --color-compose-busy-border: #2b4b61;
+ --color-compose-busy-text: #b9deed;
+ --color-compose-busy-spinner-border: #2b4b61;
+ --color-compose-busy-spinner-active: #66d2ff;
+ --color-input-bg: #102133;
+ --color-input-border: #2b4b61;
+ --color-input-text: #e8f4f8;
+ --color-input-placeholder: #8eacbf;
+ --color-settings-select-bg: #102133;
+ --color-settings-select-border: #2b4b61;
+ --color-settings-select-text: #e8f4f8;
+ --color-settings-scrollbar-track: rgba(232, 244, 248, 0.1);
+ --color-settings-scrollbar-thumb: rgba(232, 244, 248, 0.3);
+ --color-settings-scrollbar-thumb-hover: rgba(232, 244, 248, 0.5);
+ --color-compose-input-bg: #102133;
+ --color-attachments-bg: #162f45;
+ --color-attachments-border: #2b4b61;
+
+ --color-attachment-add-border: #66d2ff;
+ --color-attachment-add-text: #b9deed;
+ --color-action-bg: #fb923c;
+ --color-action-text: #2f1808;
+ --color-action-danger-bg: #b84444;
+ --color-action-danger-text: #fff4f4;
+ --color-action-active-bg: #38bdf8;
+ --color-action-active-text: #0b2434;
+ --color-action-ghost-text: #66d2ff;
+ --color-link: #66d2ff;
+ --color-sidebar-description: #b9deed;
+ --color-brand-text: #b9deed;
+ --color-oss-list: #b9deed;
+ --color-sidebar-description-link: #66d2ff;
+ --color-sidebar-link: #ffb07a;
+ --color-sidebar-divider: #2b4b61;
+ --color-settings-item-border: #2b4b61;
+ --color-settings-item-text: #b9deed;
+ --color-status-backdrop: rgba(8, 19, 31, 0.7);
+ --color-status-modal-bg: #0f2538;
+ --color-status-modal-border: #2b4b61;
+ --color-status-modal-divider: #2b4b61;
+ --color-status-modal-title: #e8f4f8;
+ --color-boosted-by: #66d2ff;
+ --color-notification-actor: #66d2ff;
+ --color-reply-info: #ffb07a;
+ --color-character-count-normal: #b9deed;
+ --color-delete-button-bg: #b84444;
+ --color-delete-button-text: #fff4f4;
+ --color-image-modal-delete-bg: #b84444;
+ --color-image-modal-delete-text: #fff4f4;
+}
diff --git a/src/ui/styles/themes/light.css b/src/ui/styles/themes/light.css
index 1400266..7a9839e 100644
--- a/src/ui/styles/themes/light.css
+++ b/src/ui/styles/themes/light.css
@@ -359,124 +359,370 @@
}
:root[data-theme="matcha-core"] {
- --page-background: radial-gradient(circle at top left, #f0faf1, #eef8ef 55%, #f7fff8);
- --color-text-primary: #0f3b22;
- --scrollbar-thumb: #7fbf92;
- --color-sidebar-description: #2f6b46;
- --color-brand-text: #2f6b46;
- --color-sidebar-description-link: #1f8f4b;
- --color-sidebar-link: #1b6f3f;
- --color-sidebar-divider: #cfe6d5;
- --color-settings-backdrop: rgba(10, 40, 20, 0.55);
- --color-status-backdrop: rgba(10, 40, 20, 0.65);
- --color-status-modal-bg: #f6fff6;
- --color-status-modal-border: #cfe6d5;
- --shadow-status-modal: 0 20px 60px rgba(24, 84, 48, 0.14);
- --color-status-modal-divider: #cfe6d5;
- --color-status-modal-title: #0f3b22;
- --color-overlay-backdrop: rgba(15, 60, 32, 0.12);
- --color-settings-item-border: #cfe6d5;
- --color-settings-item-text: #2f6b46;
- --color-panel-border: #cfe6d5;
- --shadow-panel: 0 18px 40px rgba(24, 84, 48, 0.08);
- --color-account-add-button-bg: #1b7a3d;
- --color-account-add-button-text: #effff4;
- --color-account-add-panel-bg: rgba(246, 255, 246, 0.92);
- --color-account-add-panel-text: #0f3b22;
- --color-account-add-panel-border: #cfe6d5;
- --shadow-account-add-panel: 0 18px 40px rgba(24, 84, 48, 0.12);
- --color-avatar-bg: #f6fff6;
- --color-avatar-border: #cfe6d5;
- --color-avatar-fallback: #9bc8ab;
- --color-account-selector-bg: #f6fff6;
- --color-account-selector-border: #cfe6d5;
- --shadow-account-selector: 0 18px 40px rgba(24, 84, 48, 0.12);
- --color-account-selector-placeholder: #2f6b46;
+ --page-background: radial-gradient(circle at top left, #f4f7ef, #eff4ea 55%, #f9fbf5);
+ --color-text-primary: #384838;
+ --scrollbar-thumb: #8eaa82;
+ --color-sidebar-description: #4f6f56;
+ --color-brand-text: #4f6f56;
+ --color-sidebar-description-link: #4f854c;
+ --color-sidebar-link: #4d7250;
+ --color-sidebar-divider: #d6decc;
+ --color-settings-backdrop: rgba(24, 41, 24, 0.55);
+ --color-status-backdrop: rgba(24, 41, 24, 0.65);
+ --color-status-modal-bg: #f3f7ee;
+ --color-status-modal-border: #d6decc;
+ --shadow-status-modal: 0 20px 60px rgba(42, 64, 40, 0.14);
+ --color-status-modal-divider: #d6decc;
+ --color-status-modal-title: #2f3f2f;
+ --color-overlay-backdrop: rgba(47, 63, 45, 0.14);
+ --color-settings-item-border: #d6decc;
+ --color-settings-item-text: #4f6f56;
+ --color-panel-border: #d6decc;
+ --shadow-panel: 0 18px 40px rgba(42, 64, 40, 0.08);
+ --color-account-add-button-bg: #548f4d;
+ --color-account-add-button-text: #f5f8ef;
+ --color-account-add-panel-bg: rgba(243, 247, 238, 0.92);
+ --color-account-add-panel-text: #2f3f2f;
+ --color-account-add-panel-border: #d6decc;
+ --shadow-account-add-panel: 0 18px 40px rgba(42, 64, 40, 0.12);
+ --color-avatar-bg: #f3f7ee;
+ --color-avatar-border: #d6decc;
+ --color-avatar-fallback: #9aae94;
+ --color-account-selector-bg: #f3f7ee;
+ --color-account-selector-border: #d6decc;
+ --shadow-account-selector: 0 18px 40px rgba(42, 64, 40, 0.12);
+ --color-account-selector-placeholder: #4f6f56;
--color-account-selector-highlight: rgba(0, 0, 0, 0.06);
- --color-account-handle: #2f6b46;
- --color-action-bg: #1f9a50;
- --color-action-text: #f2fff6;
+ --color-account-handle: #4f6f56;
+ --color-action-bg: #548f4d;
+ --color-action-text: #f5f8ef;
--color-action-danger-bg: #b13b3b;
--color-action-danger-text: #fff4f4;
- --color-action-active-bg: #0f5a32;
- --color-action-active-text: #eafff2;
- --color-action-ghost-text: #1b6f3f;
- --color-section-menu-bg: rgba(246, 255, 246, 0.92);
- --color-section-menu-text: #0f3b22;
- --color-section-menu-border: #cfe6d5;
- --shadow-section-menu: 0 18px 40px rgba(24, 84, 48, 0.12);
- --color-toast-success-bg: #e5f6ea;
- --color-toast-success-border: #1b7a3d;
- --color-toast-success-text: #0f3b22;
- --color-toast-info-bg: #f6fff6;
- --color-toast-info-border: #cfe6d5;
- --color-toast-info-text: #0f3b22;
+ --color-action-active-bg: #467842;
+ --color-action-active-text: #eef5e8;
+ --color-action-ghost-text: #4d7250;
+ --color-section-menu-bg: rgba(243, 247, 238, 0.92);
+ --color-section-menu-text: #2f3f2f;
+ --color-section-menu-border: #d6decc;
+ --shadow-section-menu: 0 18px 40px rgba(42, 64, 40, 0.12);
+ --color-toast-success-bg: #e8efe2;
+ --color-toast-success-border: #548f4d;
+ --color-toast-success-text: #2f3f2f;
+ --color-toast-info-bg: #f3f7ee;
+ --color-toast-info-border: #d6decc;
+ --color-toast-info-text: #2f3f2f;
--color-toast-error-bg: #fde9e6;
--color-toast-error-border: #b13b3b;
--color-toast-error-text: #5b1f1f;
- --color-timeline-column-bg: #f6fff6;
- --color-timeline-column-border: #cfe6d5;
- --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 24px rgba(24, 84, 48, 0.06);
- --color-status-bg: #f8fff8;
- --color-status-border: #cfe6d5;
- --color-status-header: #2f6b46;
- --color-status-header-strong: #0f3b22;
- --color-status-meta: #1b6f3f;
- --color-status-time: #1b6f3f;
- --color-status-warning-bg: #e9f5ec;
- --color-status-warning-text: #2f6b46;
- --color-link-preview-bg: #f6fff6;
- --color-link-preview-border: #cfe6d5;
- --color-link-preview-text: #2f6b46;
- --color-link-preview-strong: #0f3b22;
- --color-link-preview-url: #1f8f4b;
- --color-status-link: #1f8f4b;
- --color-reaction-text: #0f3b22;
- --color-reaction-border: #cfe6d5;
- --color-reaction-active-bg: #1b6f3f;
- --color-reaction-active-border: #0f3b22;
- --color-reaction-active-text: #f2fff6;
- --color-file-button-bg: #e9f5ec;
- --color-file-button-text: #2f6b46;
- --color-secondary-button-bg: #e9f5ec;
- --color-secondary-button-text: #2f6b46;
- --color-secondary-button-border: #cfe6d5;
- --color-emoji-panel-bg: #f6fff6;
- --color-emoji-panel-border: #cfe6d5;
- --color-emoji-toggle-bg: #e9f5ec;
- --color-emoji-toggle-text: #2f6b46;
- --color-emoji-toggle-border: #cfe6d5;
- --color-emoji-count-bg: #cfe6d5;
- --color-emoji-count-text: #0f3b22;
- --color-emoji-button-bg: #e9f5ec;
- --color-emoji-button-border: #cfe6d5;
- --color-emoji-empty-text: #7aa58a;
- --color-compose-busy-backdrop: rgba(15, 60, 32, 0.2);
- --color-compose-busy-bg: #f6fff6;
- --color-compose-busy-border: #cfe6d5;
- --color-compose-busy-text: #2f6b46;
- --color-compose-busy-spinner-border: #cfe6d5;
- --color-compose-busy-spinner-active: #1f9a50;
- --color-boosted-by: #1b6f3f;
- --color-notification-actor: #1b6f3f;
- --color-reply-info: #1b6f3f;
- --color-input-bg: #f6fff6;
- --color-input-border: #cfe6d5;
- --color-input-text: #0f3b22;
- --color-input-placeholder: #7aa58a;
- --color-settings-select-bg: #f6fff6;
- --color-settings-select-border: #cfe6d5;
- --color-settings-select-text: #0f3b22;
- --color-settings-scrollbar-track: rgba(15, 59, 34, 0.1);
- --color-settings-scrollbar-thumb: rgba(15, 59, 34, 0.3);
- --color-settings-scrollbar-thumb-hover: rgba(15, 59, 34, 0.5);
- --color-compose-input-bg: #f6fff6;
- --color-attachments-bg: #e9f5ec;
- --color-attachments-border: #cfe6d5;
+ --color-timeline-column-bg: #f3f7ee;
+ --color-timeline-column-border: #d6decc;
+ --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 24px rgba(42, 64, 40, 0.06);
+ --color-status-bg: #f5f8ef;
+ --color-status-border: #d6decc;
+ --color-status-header: #4f6f56;
+ --color-status-header-strong: #2f3f2f;
+ --color-status-meta: #4d7250;
+ --color-status-time: #4d7250;
+ --color-status-warning-bg: #e5ede0;
+ --color-status-warning-text: #4f6f56;
+ --color-link-preview-bg: #f3f7ee;
+ --color-link-preview-border: #d6decc;
+ --color-link-preview-text: #4f6f56;
+ --color-link-preview-strong: #2f3f2f;
+ --color-link-preview-url: #4f854c;
+ --color-status-link: #4f854c;
+ --color-reaction-text: #2f3f2f;
+ --color-reaction-border: #d6decc;
+ --color-reaction-active-bg: #4d7250;
+ --color-reaction-active-border: #2f3f2f;
+ --color-reaction-active-text: #f5f8ef;
+ --color-file-button-bg: #e5ede0;
+ --color-file-button-text: #4f6f56;
+ --color-secondary-button-bg: #e5ede0;
+ --color-secondary-button-text: #4f6f56;
+ --color-secondary-button-border: #d6decc;
+ --color-emoji-panel-bg: #f3f7ee;
+ --color-emoji-panel-border: #d6decc;
+ --color-emoji-toggle-bg: #e5ede0;
+ --color-emoji-toggle-text: #4f6f56;
+ --color-emoji-toggle-border: #d6decc;
+ --color-emoji-count-bg: #d6decc;
+ --color-emoji-count-text: #2f3f2f;
+ --color-emoji-button-bg: #e5ede0;
+ --color-emoji-button-border: #d6decc;
+ --color-emoji-empty-text: #67866a;
+ --color-compose-busy-backdrop: rgba(47, 63, 45, 0.24);
+ --color-compose-busy-bg: #f3f7ee;
+ --color-compose-busy-border: #d6decc;
+ --color-compose-busy-text: #4f6f56;
+ --color-compose-busy-spinner-border: #d6decc;
+ --color-compose-busy-spinner-active: #5ca456;
+ --color-boosted-by: #4d7250;
+ --color-notification-actor: #4d7250;
+ --color-reply-info: #4d7250;
+ --color-input-bg: #f3f7ee;
+ --color-input-border: #d6decc;
+ --color-input-text: #2f3f2f;
+ --color-input-placeholder: #83957a;
+ --color-settings-select-bg: #f3f7ee;
+ --color-settings-select-border: #d6decc;
+ --color-settings-select-text: #2f3f2f;
+ --color-settings-scrollbar-track: rgba(47, 63, 45, 0.1);
+ --color-settings-scrollbar-thumb: rgba(47, 63, 45, 0.3);
+ --color-settings-scrollbar-thumb-hover: rgba(47, 63, 45, 0.5);
+ --color-compose-input-bg: #f3f7ee;
+ --color-attachments-bg: #e5ede0;
+ --color-attachments-border: #d6decc;
- --color-attachment-add-text: #2f6b46;
+ --color-attachment-add-text: #4f6f56;
--color-delete-button-bg: #b13b3b;
--color-delete-button-text: #fff4f4;
--color-image-modal-delete-bg: #b13b3b;
--color-image-modal-delete-text: #fff4f4;
}
+
+:root[data-theme="royal-purple"] {
+ --page-background: radial-gradient(circle at top left, #f4eefb, #fdf6e8 55%, #ffffff);
+ --color-text-primary: #2d1f3d;
+ --scrollbar-thumb: #c9b4df;
+ --color-sidebar-description: #51386e;
+ --color-brand-text: #51386e;
+ --color-sidebar-description-link: #6d28d9;
+ --color-sidebar-link: #c79a2d;
+ --color-sidebar-divider: #e4d7f0;
+ --color-settings-backdrop: rgba(31, 21, 44, 0.6);
+ --color-status-backdrop: rgba(31, 21, 44, 0.7);
+ --color-status-modal-bg: #fcf8ff;
+ --color-status-modal-border: #e4d7f0;
+ --shadow-status-modal: 0 20px 60px rgba(66, 39, 109, 0.16);
+ --color-status-modal-divider: #e4d7f0;
+ --color-status-modal-title: #432a5f;
+ --color-overlay-backdrop: rgba(124, 58, 237, 0.14);
+ --color-settings-item-border: #e4d7f0;
+ --color-settings-item-text: #5d4875;
+ --color-panel-border: #e4d7f0;
+ --shadow-panel: 0 18px 40px rgba(66, 39, 109, 0.12);
+ --color-account-add-button-bg: #6d28d9;
+ --color-account-add-button-text: #f8f5ff;
+ --color-account-add-panel-bg: rgba(252, 248, 255, 0.92);
+ --color-account-add-panel-text: #432a5f;
+ --color-account-add-panel-border: #e4d7f0;
+ --shadow-account-add-panel: 0 18px 40px rgba(66, 39, 109, 0.16);
+ --color-avatar-bg: #fcf8ff;
+ --color-avatar-border: #e4d7f0;
+ --color-avatar-fallback: #d8c3ed;
+ --color-account-selector-bg: #fcf8ff;
+ --color-account-selector-border: #e4d7f0;
+ --shadow-account-selector: 0 18px 40px rgba(66, 39, 109, 0.16);
+ --color-account-selector-placeholder: #5d4875;
+ --color-account-selector-highlight: rgba(0, 0, 0, 0.06);
+ --color-account-handle: #5d4875;
+ --color-action-bg: #d9b25a;
+ --color-action-text: #2f2207;
+ --color-action-danger-bg: #b23a55;
+ --color-action-danger-text: #fff4f6;
+ --color-action-active-bg: #6d28d9;
+ --color-action-active-text: #f8f5ff;
+ --color-action-ghost-text: #8f6ab8;
+ --color-section-menu-bg: rgba(252, 248, 255, 0.92);
+ --color-section-menu-text: #432a5f;
+ --color-section-menu-border: #e4d7f0;
+ --shadow-section-menu: 0 18px 40px rgba(66, 39, 109, 0.16);
+ --color-toast-success-bg: #e8f3e8;
+ --color-toast-success-border: #4b8b62;
+ --color-toast-success-text: #1f3a2a;
+ --color-toast-info-bg: #fcf8ff;
+ --color-toast-info-border: #e4d7f0;
+ --color-toast-info-text: #2d1f3d;
+ --color-toast-error-bg: #fdecef;
+ --color-toast-error-border: #b23a55;
+ --color-toast-error-text: #46212d;
+ --color-timeline-column-bg: #fcf8ff;
+ --color-timeline-column-border: #e4d7f0;
+ --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 24px rgba(66, 39, 109, 0.08);
+ --color-status-bg: #fdf8ff;
+ --color-status-border: #e4d7f0;
+ --color-status-header: #5d4875;
+ --color-status-header-strong: #432a5f;
+ --color-status-meta: #a26b1d;
+ --color-status-time: #a26b1d;
+ --color-status-warning-bg: #f5ecfb;
+ --color-status-warning-text: #6d4d92;
+ --color-link-preview-bg: #fdf8ff;
+ --color-link-preview-border: #e4d7f0;
+ --color-link-preview-text: #5d4875;
+ --color-link-preview-strong: #432a5f;
+ --color-link-preview-url: #6d28d9;
+ --color-status-link: #6d28d9;
+ --color-reaction-text: #432a5f;
+ --color-reaction-border: #e4d7f0;
+ --color-reaction-active-bg: #6d28d9;
+ --color-reaction-active-border: #432a5f;
+ --color-reaction-active-text: #f8f5ff;
+ --color-file-button-bg: #eee3fa;
+ --color-file-button-text: #4f356b;
+ --color-secondary-button-bg: #eee3fa;
+ --color-secondary-button-text: #4f356b;
+ --color-secondary-button-border: #e4d7f0;
+ --color-emoji-panel-bg: #fcf8ff;
+ --color-emoji-panel-border: #e4d7f0;
+ --color-emoji-toggle-bg: #eee3fa;
+ --color-emoji-toggle-text: #4f356b;
+ --color-emoji-toggle-border: #e4d7f0;
+ --color-emoji-count-bg: #e4d7f0;
+ --color-emoji-count-text: #432a5f;
+ --color-emoji-button-bg: #eee3fa;
+ --color-emoji-button-border: #e4d7f0;
+ --color-emoji-empty-text: #997bb6;
+ --color-compose-busy-backdrop: rgba(31, 21, 44, 0.2);
+ --color-compose-busy-bg: #fcf8ff;
+ --color-compose-busy-border: #e4d7f0;
+ --color-compose-busy-text: #5d4875;
+ --color-compose-busy-spinner-border: #e4d7f0;
+ --color-compose-busy-spinner-active: #6d28d9;
+ --color-boosted-by: #6d28d9;
+ --color-notification-actor: #6d28d9;
+ --color-reply-info: #a26b1d;
+ --color-input-bg: #fcf8ff;
+ --color-input-border: #e4d7f0;
+ --color-input-text: #432a5f;
+ --color-input-placeholder: #997bb6;
+ --color-settings-select-bg: #fcf8ff;
+ --color-settings-select-border: #e4d7f0;
+ --color-settings-select-text: #432a5f;
+ --color-settings-scrollbar-track: rgba(67, 42, 95, 0.1);
+ --color-settings-scrollbar-thumb: rgba(67, 42, 95, 0.3);
+ --color-settings-scrollbar-thumb-hover: rgba(67, 42, 95, 0.5);
+ --color-compose-input-bg: #fcf8ff;
+ --color-attachments-bg: #f2ebfa;
+ --color-attachments-border: #e4d7f0;
+
+ --color-attachment-add-text: #5d4875;
+ --color-delete-button-bg: #b23a55;
+ --color-delete-button-text: #fff4f6;
+ --color-image-modal-delete-bg: #b23a55;
+ --color-image-modal-delete-text: #fff4f6;
+}
+
+:root[data-theme="summer-beach"] {
+ --page-background: radial-gradient(circle at top left, #e0f2fe, #fef3c7 55%, #fffdf7);
+ --color-text-primary: #1f3d58;
+ --scrollbar-thumb: #9ecae2;
+ --color-sidebar-description: #3e6c8f;
+ --color-brand-text: #3e6c8f;
+ --color-sidebar-description-link: #0284c7;
+ --color-sidebar-link: #f97316;
+ --color-sidebar-divider: #c7e6f7;
+ --color-settings-backdrop: rgba(18, 48, 71, 0.58);
+ --color-status-backdrop: rgba(18, 48, 71, 0.68);
+ --color-status-modal-bg: #f3fbff;
+ --color-status-modal-border: #c7e6f7;
+ --shadow-status-modal: 0 20px 60px rgba(24, 95, 138, 0.15);
+ --color-status-modal-divider: #c7e6f7;
+ --color-status-modal-title: #1e5278;
+ --color-overlay-backdrop: rgba(14, 165, 233, 0.14);
+ --color-settings-item-border: #c7e6f7;
+ --color-settings-item-text: #3e6c8f;
+ --color-panel-border: #c7e6f7;
+ --shadow-panel: 0 18px 40px rgba(24, 95, 138, 0.12);
+ --color-account-add-button-bg: #0ea5e9;
+ --color-account-add-button-text: #0b2434;
+ --color-account-add-panel-bg: rgba(243, 251, 255, 0.92);
+ --color-account-add-panel-text: #1e5278;
+ --color-account-add-panel-border: #c7e6f7;
+ --shadow-account-add-panel: 0 18px 40px rgba(24, 95, 138, 0.16);
+ --color-avatar-bg: #f3fbff;
+ --color-avatar-border: #c7e6f7;
+ --color-avatar-fallback: #b8dced;
+ --color-account-selector-bg: #f3fbff;
+ --color-account-selector-border: #c7e6f7;
+ --shadow-account-selector: 0 18px 40px rgba(24, 95, 138, 0.16);
+ --color-account-selector-placeholder: #3e6c8f;
+ --color-account-selector-highlight: rgba(0, 0, 0, 0.06);
+ --color-account-handle: #3e6c8f;
+ --color-action-bg: #f97316;
+ --color-action-text: #3a1f08;
+ --color-action-danger-bg: #dc2626;
+ --color-action-danger-text: #fff5f5;
+ --color-action-active-bg: #0ea5e9;
+ --color-action-active-text: #0b2434;
+ --color-action-ghost-text: #0284c7;
+ --color-section-menu-bg: rgba(243, 251, 255, 0.92);
+ --color-section-menu-text: #1e5278;
+ --color-section-menu-border: #c7e6f7;
+ --shadow-section-menu: 0 18px 40px rgba(24, 95, 138, 0.16);
+ --color-toast-success-bg: #e3f4ec;
+ --color-toast-success-border: #3b7c62;
+ --color-toast-success-text: #1f3a2a;
+ --color-toast-info-bg: #f3fbff;
+ --color-toast-info-border: #c7e6f7;
+ --color-toast-info-text: #1f3d58;
+ --color-toast-error-bg: #fdecea;
+ --color-toast-error-border: #dc2626;
+ --color-toast-error-text: #4a1f1f;
+ --color-timeline-column-bg: #f3fbff;
+ --color-timeline-column-border: #c7e6f7;
+ --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 24px rgba(24, 95, 138, 0.08);
+ --color-status-bg: #eff9ff;
+ --color-status-border: #c7e6f7;
+ --color-status-header: #3e6c8f;
+ --color-status-header-strong: #1e5278;
+ --color-status-meta: #e7782f;
+ --color-status-time: #e7782f;
+ --color-status-warning-bg: #fff3df;
+ --color-status-warning-text: #b56c2f;
+ --color-link-preview-bg: #eff9ff;
+ --color-link-preview-border: #c7e6f7;
+ --color-link-preview-text: #3e6c8f;
+ --color-link-preview-strong: #1e5278;
+ --color-link-preview-url: #0ea5e9;
+ --color-status-link: #0ea5e9;
+ --color-reaction-text: #1e5278;
+ --color-reaction-border: #c7e6f7;
+ --color-reaction-active-bg: #0ea5e9;
+ --color-reaction-active-border: #1e5278;
+ --color-reaction-active-text: #eff9ff;
+ --color-file-button-bg: #e3f4ff;
+ --color-file-button-text: #3e6c8f;
+ --color-secondary-button-bg: #e3f4ff;
+ --color-secondary-button-text: #3e6c8f;
+ --color-secondary-button-border: #c7e6f7;
+ --color-emoji-panel-bg: #f3fbff;
+ --color-emoji-panel-border: #c7e6f7;
+ --color-emoji-toggle-bg: #e3f4ff;
+ --color-emoji-toggle-text: #3e6c8f;
+ --color-emoji-toggle-border: #c7e6f7;
+ --color-emoji-count-bg: #c7e6f7;
+ --color-emoji-count-text: #1e5278;
+ --color-emoji-button-bg: #e3f4ff;
+ --color-emoji-button-border: #c7e6f7;
+ --color-emoji-empty-text: #7b9ab1;
+ --color-compose-busy-backdrop: rgba(18, 48, 71, 0.2);
+ --color-compose-busy-bg: #f3fbff;
+ --color-compose-busy-border: #c7e6f7;
+ --color-compose-busy-text: #3e6c8f;
+ --color-compose-busy-spinner-border: #c7e6f7;
+ --color-compose-busy-spinner-active: #0ea5e9;
+ --color-boosted-by: #0ea5e9;
+ --color-notification-actor: #0ea5e9;
+ --color-reply-info: #e7782f;
+ --color-input-bg: #f3fbff;
+ --color-input-border: #c7e6f7;
+ --color-input-text: #1e5278;
+ --color-input-placeholder: #7b9ab1;
+ --color-settings-select-bg: #f3fbff;
+ --color-settings-select-border: #c7e6f7;
+ --color-settings-select-text: #1e5278;
+ --color-settings-scrollbar-track: rgba(30, 82, 120, 0.1);
+ --color-settings-scrollbar-thumb: rgba(30, 82, 120, 0.3);
+ --color-settings-scrollbar-thumb-hover: rgba(30, 82, 120, 0.5);
+ --color-compose-input-bg: #f3fbff;
+ --color-attachments-bg: #e3f4ff;
+ --color-attachments-border: #c7e6f7;
+
+ --color-attachment-add-text: #3e6c8f;
+ --color-delete-button-bg: #dc2626;
+ --color-delete-button-text: #fff5f5;
+ --color-image-modal-delete-bg: #dc2626;
+ --color-image-modal-delete-text: #fff5f5;
+}
diff --git a/src/ui/utils/theme.ts b/src/ui/utils/theme.ts
index 6973828..82c4751 100644
--- a/src/ui/utils/theme.ts
+++ b/src/ui/utils/theme.ts
@@ -1,11 +1,20 @@
-export type ThemeMode = "default" | "christmas" | "sky-pink" | "monochrome" | "matcha-core";
+export type ThemeMode =
+ | "default"
+ | "christmas"
+ | "sky-pink"
+ | "monochrome"
+ | "matcha-core"
+ | "royal-purple"
+ | "summer-beach";
export const isThemeMode = (value: string): value is ThemeMode =>
value === "default" ||
value === "christmas" ||
value === "sky-pink" ||
value === "monochrome" ||
- value === "matcha-core";
+ value === "matcha-core" ||
+ value === "royal-purple" ||
+ value === "summer-beach";
export const getStoredTheme = (): ThemeMode => {
const storedTheme = localStorage.getItem("textodon.theme");