From ab044ec827edd98207ebbe950012745c21577bb5 Mon Sep 17 00:00:00 2001 From: Flemmli97 <34157027+Flemmli97@users.noreply.github.com> Date: Thu, 28 Mar 2024 17:34:57 +0100 Subject: [PATCH] fix(themes): Change accent text color (#1947) --- .../components/embeds/file_embed/style.scss | 2 +- kit/src/components/message/style.scss | 6 +++--- kit/src/components/message_reply/style.scss | 2 +- kit/src/elements/button/style.scss | 4 ++-- kit/src/elements/select/style.scss | 2 +- kit/src/style.scss | 1 + ui/extra/themes/example.scss | 1 + .../storage/send_files_layout/style.scss | 2 +- ui/src/lib.rs | 19 ++++++++++++++++++- 9 files changed, 29 insertions(+), 10 deletions(-) diff --git a/kit/src/components/embeds/file_embed/style.scss b/kit/src/components/embeds/file_embed/style.scss index 6356bafe498..4a88f26be00 100644 --- a/kit/src/components/embeds/file_embed/style.scss +++ b/kit/src/components/embeds/file_embed/style.scss @@ -14,7 +14,7 @@ display: inline-flex; gap: var(--gap); width: 100%; - color: var(--text-color); + color: var(--text-color-primary); align-content: center; align-self: flex-end; position: relative; diff --git a/kit/src/components/message/style.scss b/kit/src/components/message/style.scss index 091e62bca07..6a5344baf76 100644 --- a/kit/src/components/message/style.scss +++ b/kit/src/components/message/style.scss @@ -1,6 +1,6 @@ .message { background: var(--primary); - color: var(--text-color); + color: var(--text-color-primary); border-radius: var(--border-radius-more); border-bottom-right-radius: var(--border-radius); min-height: var(--height-input); @@ -20,7 +20,7 @@ } .text { - color: var(--text-color); + color: var(--text-color-primary); display: flex; flex-direction: column; white-space: pre-wrap; @@ -123,7 +123,7 @@ .emoji-reaction-self { background-color: var(--primary); - color: var(--text-color); + color: var(--text-color-primary); } .attachment-list { diff --git a/kit/src/components/message_reply/style.scss b/kit/src/components/message_reply/style.scss index ff48b622ca9..6d94e8ecd53 100644 --- a/kit/src/components/message_reply/style.scss +++ b/kit/src/components/message_reply/style.scss @@ -32,7 +32,7 @@ .text { display: flex; flex-direction: column; - color: var(--text-color); + color: var(--text-color-primary); background-color: var(--primary); padding: var(--gap) var(--padding); font-size: var(--text-size-less); diff --git a/kit/src/elements/button/style.scss b/kit/src/elements/button/style.scss index b6170e23aa0..f34b1735653 100644 --- a/kit/src/elements/button/style.scss +++ b/kit/src/elements/button/style.scss @@ -5,7 +5,7 @@ height: var(--height-input); border-radius: var(--border-radius-more); background-color: var(--primary); - color: var(--text-color); + color: var(--text-color-primary); gap: var(--gap); padding: 0 var(--padding); justify-content: center; @@ -19,7 +19,7 @@ } svg { - stroke: var(--text-color); + stroke: var(--text-color-primary); fill: transparent; height: 1.1rem; width: 1.1rem; diff --git a/kit/src/elements/select/style.scss b/kit/src/elements/select/style.scss index e68cdbc5dca..7c77d8757ee 100644 --- a/kit/src/elements/select/style.scss +++ b/kit/src/elements/select/style.scss @@ -1,6 +1,6 @@ .select select, .fancy-select{ --webkit-appearance: none; - color: var(--text-color); + color: var(--text-color-primary); appearance: none; border-radius: var(--border-radius-more); min-width: fit-content; diff --git a/kit/src/style.scss b/kit/src/style.scss index 7867d9261ec..084cfd45f00 100644 --- a/kit/src/style.scss +++ b/kit/src/style.scss @@ -260,6 +260,7 @@ pre code { --border-subtle-color: #1c1d2b; --text-color: #d6def4; + --text-color-primary: var(--text-color); --text-color-muted: #6b78ac; --text-color-dark: #000; --text-color-bright: #ffffff; diff --git a/ui/extra/themes/example.scss b/ui/extra/themes/example.scss index aa06a1b0346..f5733b707ea 100644 --- a/ui/extra/themes/example.scss +++ b/ui/extra/themes/example.scss @@ -39,6 +39,7 @@ // --border-color: #fff; // --border-subtle-color: #0f0f0f; // --text-color: #f8f9fa; + // --text-color-accent: var(--text-color); // --text-color-muted: #dee2e6; // --text-color-dark: #343a40; // --text-color-bright: #ffffff; diff --git a/ui/src/layouts/storage/send_files_layout/style.scss b/ui/src/layouts/storage/send_files_layout/style.scss index 7ea5306e8b2..9c605a72d8d 100644 --- a/ui/src/layouts/storage/send_files_layout/style.scss +++ b/ui/src/layouts/storage/send_files_layout/style.scss @@ -14,6 +14,6 @@ } .plus-some { background-color: var(--primary); - color: var(--text-color); + color: var(--text-color-primary); } } \ No newline at end of file diff --git a/ui/src/lib.rs b/ui/src/lib.rs index d25706699f8..a4d5d5ce6d2 100644 --- a/ui/src/lib.rs +++ b/ui/src/lib.rs @@ -320,8 +320,12 @@ pub fn get_app_style(state: &State) -> String { format!( ":root {{ --primary: rgb({},{},{}); + --text-color-primary: {}; }}", - color.0, color.1, color.2, + color.0, + color.1, + color.2, + get_text_color(color.0, color.1, color.2) ) } else { "".into() @@ -330,6 +334,19 @@ pub fn get_app_style(state: &State) -> String { format!("{UIKIT_STYLES} {APP_STYLE} {PRISM_STYLE} {PRISM_THEME} {theme} {accent_color} {font_style} {open_dyslexic} {font_scale}") } +// Decide if text should be dark or bright +fn get_text_color(r: u8, g: u8, b: u8) -> &'static str { + // See https://en.wikipedia.org/wiki/Relative_luminance + let luminance: f64 = 0.2126729 * (r as f64 / 255.).powf(2.2) + + 0.7151522 * (g as f64 / 255.).powf(2.2) + + 0.0721750 * (b as f64 / 255.).powf(2.2); + if luminance > 0.5 { + "var(--text-color-dark)" + } else { + "var(--text-color)" + } +} + fn use_auto_updater(cx: &ScopeState) -> Option<()> { let download_state = use_shared_state::(cx)?; let updater_ch = use_coroutine(cx, |mut rx: UnboundedReceiver| {