From 908ef2a7a2e7ab7935a98b6c537e0192065c5cd4 Mon Sep 17 00:00:00 2001 From: Euigyom Kim Date: Wed, 1 Apr 2026 09:38:44 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=EB=A7=90=EC=B0=A8=EC=BD=94=EC=96=B4?= =?UTF-8?q?=20=ED=85=8C=EB=A7=88=20=EC=B4=88=EB=A1=9D=20=ED=86=A4=EA=B3=BC?= =?UTF-8?q?=20=EC=83=9D=EA=B8=B0=EB=A5=BC=20=EA=B7=A0=ED=98=95=20=EC=9E=88?= =?UTF-8?q?=EA=B2=8C=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ui/styles/themes/dark.css | 198 +++++++++++++++--------------- src/ui/styles/themes/light.css | 218 ++++++++++++++++----------------- 2 files changed, 208 insertions(+), 208 deletions(-) diff --git a/src/ui/styles/themes/dark.css b/src/ui/styles/themes/dark.css index b48e246..4a1f9ab 100644 --- a/src/ui/styles/themes/dark.css +++ b/src/ui/styles/themes/dark.css @@ -520,8 +520,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,111 +533,111 @@ --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; @@ -1162,8 +1162,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,111 +1175,111 @@ --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; diff --git a/src/ui/styles/themes/light.css b/src/ui/styles/themes/light.css index 1400266..2c02a73 100644 --- a/src/ui/styles/themes/light.css +++ b/src/ui/styles/themes/light.css @@ -359,122 +359,122 @@ } :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; From b1b55ca874c5ac3a490a6d69a9a1f2e247c9d8a9 Mon Sep 17 00:00:00 2001 From: Euigyom Kim Date: Wed, 1 Apr 2026 11:00:55 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EB=A1=9C=EC=96=84=ED=8D=BC?= =?UTF-8?q?=ED=94=8C=C2=B7=EC=97=AC=EB=A6=84=ED=95=B4=EB=B3=80=20=ED=85=8C?= =?UTF-8?q?=EB=A7=88=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=8C=80=EB=B9=84?= =?UTF-8?q?=20=EB=B3=B4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ui/components/SettingsModal.tsx | 4 +- src/ui/styles/themes/dark.css | 504 +++++++++++++++++++++++++++- src/ui/styles/themes/light.css | 246 ++++++++++++++ src/ui/utils/theme.ts | 13 +- 4 files changed, 760 insertions(+), 7 deletions(-) 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 4a1f9ab..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; } @@ -643,6 +641,256 @@ --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; } @@ -1285,3 +1531,253 @@ --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 2c02a73..7a9839e 100644 --- a/src/ui/styles/themes/light.css +++ b/src/ui/styles/themes/light.css @@ -480,3 +480,249 @@ --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");