Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

css: Explicitly set text-message color. 

This commit darkens the text-message color in the light theme
to the HSL equivalent of a dark gray (#262626).

This is the first time in the Zulip codebase where one CSS
custom property is set to another: the dark theme preserves
its use of `--color-text-default` in this way, but can be
adjusted independently of the reset of the theme in the future
by setting a different color value on
`--color-text-message-default`. Related reading on this
technique:
https://css-tricks.com/a-complete-guide-to-custom-properties/#aa-properties-as-properties

Fixes a part of #22022.
This commit is contained in:
Karl Stolley 2023-06-08 09:25:14 -05:00 committed by Tim Abbott
parent e0883d0341
commit 37192e8af3
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/styles/zulip.css
View File

@ -147,7 +147,7 @@ body {
/* Text colors */ /* Text colors */
--color-text-default: hsl(0deg 0% 20%); --color-text-default: hsl(0deg 0% 20%);
--color-default-text: hsl(0deg 0% 15%); --color-text-message-default: hsl(0deg 0% 15%);
--color-text-message-view-header: hsl(0deg 0% 20% / 100%); --color-text-message-view-header: hsl(0deg 0% 20% / 100%);
--color-text-message-header: hsl(0deg 0% 15%); --color-text-message-header: hsl(0deg 0% 15%);
--color-text-dropdown-input: hsl(0deg 0% 13.33%); --color-text-dropdown-input: hsl(0deg 0% 13.33%);
@ -186,6 +186,9 @@ body {
/* Text colors */ /* Text colors */
--color-text-default: hsl(0deg 0% 100% / 75%); --color-text-default: hsl(0deg 0% 100% / 75%);
/* Unlike the light theme, the dark theme renders message
text in the default color. */
--color-text-message-default: var(--color-text-default);
--color-text-message-view-header: hsl(0deg 0% 100% / 80%); --color-text-message-view-header: hsl(0deg 0% 100% / 80%);
--color-text-message-header: hsl(0deg 0% 100% / 80%); --color-text-message-header: hsl(0deg 0% 100% / 80%);
--color-text-sender-name: hsl(0deg 0% 100% / 85%); --color-text-sender-name: hsl(0deg 0% 100% / 85%);
@ -1768,6 +1771,7 @@ div.focused_table {
} }
.message_content { .message_content {
color: var(--color-text-message-default);
line-height: 1.214; line-height: 1.214;
min-height: 17px; min-height: 17px;
display: block; display: block;