diff --git a/src/components/common/PickerSelectedItem.scss b/src/components/common/PickerSelectedItem.scss index ea356337e..64145e77b 100644 --- a/src/components/common/PickerSelectedItem.scss +++ b/src/components/common/PickerSelectedItem.scss @@ -21,7 +21,7 @@ } &:hover { - background-color: var(--color-chat-active); + background-color: var(--color-item-active); } &.closeable:hover { diff --git a/src/components/left/main/Chat.scss b/src/components/left/main/Chat.scss index 55860eec1..6c5de4277 100644 --- a/src/components/left/main/Chat.scss +++ b/src/components/left/main/Chat.scss @@ -17,14 +17,26 @@ transition: transform .2s ease-out; } - &:hover, &.selected, &.ListItem.has-menu-open { + &:hover, &.ListItem.has-menu-open { .Avatar.online::after { border-color: var(--color-chat-hover); } } - &.selected { - --background-color: var(--color-chat-hover); + &.selected, + &.selected:hover { + .Avatar.online::after { + border-color: var(--color-chat-active); + } + .ListItem-button { + --background-color: var(--color-chat-active) !important; + --color-text: var(--color-white); + } + --background-color: var(--color-chat-active) !important; + --color-text-meta-colored: var(--color-white); + --color-text-meta: var(--color-white); + --color-text-secondary: var(--color-white); + --color-error: var(--color-white); } .info { diff --git a/src/components/right/StickerSearch.scss b/src/components/right/StickerSearch.scss index a2249f369..f95023e87 100644 --- a/src/components/right/StickerSearch.scss +++ b/src/components/right/StickerSearch.scss @@ -45,7 +45,7 @@ color: var(--color-text-secondary); &:hover, &:active { - background: var(--color-chat-active) !important; + background: var(--color-item-active) !important; } } } diff --git a/src/components/ui/ListItem.scss b/src/components/ui/ListItem.scss index a10f0054a..f55a2d0d2 100644 --- a/src/components/ui/ListItem.scss +++ b/src/components/ui/ListItem.scss @@ -47,7 +47,7 @@ &:not(.has-ripple), body.animation-level-0 & { .ListItem-button:active { - --background-color: var(--color-chat-active) !important; + --background-color: var(--color-item-active) !important; } } } diff --git a/src/components/ui/MenuItem.scss b/src/components/ui/MenuItem.scss index 7d5b3e23d..d00e70b91 100644 --- a/src/components/ui/MenuItem.scss +++ b/src/components/ui/MenuItem.scss @@ -48,7 +48,7 @@ } &:not(.has-ripple):not(.disabled):active { - background-color: var(--color-chat-active); + background-color: var(--color-item-active); transition: none !important; } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 5a385ae34..15d543256 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -36,8 +36,9 @@ $color-gray: #c4c9cc; $color-text-secondary: #707579; $color-text-meta: #686c72; $color-borders: #dadce0; +$color-item-active: #ededed; $color-chat-hover: #f4f4f5; -$color-chat-active: #ededed; +$color-chat-active: #5B90E0; $color-selection: #3993fb; // https://github.com/telegramdesktop/tdesktop/wiki/Theme-Reference#user-content-standard-color-constants @@ -120,6 +121,7 @@ $color-user-8: #faa774; --color-chat-hover: #{$color-chat-hover}; --color-chat-active: #{$color-chat-active}; + --color-item-active: #{$color-item-active}; --color-selection-highlight: #{$color-selection}; --color-selection-highlight-emoji: rgba(#{toRGB($color-selection)}, .7); diff --git a/src/styles/themes.json b/src/styles/themes.json index b6e882f4c..019da81c7 100644 --- a/src/styles/themes.json +++ b/src/styles/themes.json @@ -1,9 +1,10 @@ { - "--color-primary": ["#50A2E9", "#868DF5"], + "--color-primary": ["#50A2E9", "#8378DB"], "--color-background": ["#FFFFFF", "#212121"], - "--color-background-own": ["#EEFEDF", "#A45D37"], + "--color-background-own": ["#EEFEDF", "#8378DB"], "--color-chat-hover": ["#F4F4F5", "#2C2C2C"], - "--color-chat-active": ["#ededed", "#292929"], + "--color-chat-active": ["#4C90E6", "#8378DB"], + "--color-item-active": ["#ededed", "#292929"], "--color-text": ["#000000", "#FFFFFF"], "--color-text-secondary": ["#707579", "#AAAAAA"], "--color-borders": ["#DADCE0", "#100F10"],