# 新的作曲家样式使其难以与背景区分 **URL:** \ **Category:** UX\ **Created:** [2021年十二月3日 02:57 UTC](https://meta.discourse.org/t/new-composer-styling-makes-it-hard-to-differentiate-from-background/210959 "2021-12-03T02:57:50Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)\ **Post date:** [2021年十二月3日 02:57 UTC](https://meta.discourse.org/t/new-composer-styling-makes-it-hard-to-differentiate-from-background/210959/1 "2021-12-03T02:57:50Z")
我不知道这个改动是否是故意的，但现在当文本区域没有获得焦点时，作曲框的边框更难看到了。虽然理论上这是一个小改动，但我发现作曲框现在与背景融合得太多了，这使得区分哪个部分是可点击获得焦点，哪个部分不是，变得更加困难。 这在移动设备和桌面设备上都发生了。以下是一些显示移动设备上差异的照片。 旧边框样式： ![image](https://global.discourse-cdn.com/meta/original/3X/0/d/0df17dbd652289472fbdc222b2aa6c02f7728d9d.jpeg) 新边框样式： ![image](https://global.discourse-cdn.com/meta/original/3X/c/5/c5966ef08515f79a86fffd3f887ade0f4fa8550a.jpeg) ---
**Author:** ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)\ **Post date:** [2021年十二月3日 15:51 UTC](https://meta.discourse.org/t/new-composer-styling-makes-it-hard-to-differentiate-from-background/210959/3 "2021-12-03T15:51:50Z")
我同意这个观点。还注意到，在默认的浅色主题中，textarea 的边框不再与上方字段的边框匹配： ![image](https://global.discourse-cdn.com/meta/original/3X/6/4/64db17d551c657bb7fc6c87d68d5bac70353f21d.png) 还有一个小问题，提交按钮也紧贴着软件键盘，理想情况下那里应该有一个小的边距。 ---
**Author:** ![cvx](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cvx/32/152146_2.png) [@cvx](https://meta.discourse.org/u/cvx)\ **Post date:** [2021年十二月3日 22:34 UTC](https://meta.discourse.org/t/new-composer-styling-makes-it-hard-to-differentiate-from-background/210959/5 "2021-12-03T22:34:02Z")
此更改是故意的。目的是使文本更加突出，并使次要 UI 元素更好地融合。 > [@seanblue](#): > > 这使得更难区分哪个部分是可点击以聚焦，哪个部分不是 想法是，在编辑器中，除了按钮/较短的输入元素占用的空间外，几乎所有空间都是文本区域。或者，在默认的桌面编辑器中，它被分成两列，用于书写和预览，因此即使是轻微的视觉分隔符也可能足够。 无论如何，我想给这个更改一些时间，在适应期之后，我们可以调整颜色。也许在原始边框颜色和当前颜色之间折衷一下。我们拭目以待！ > [@pmusaraj](#): > > 文本区域边框不再与字段边框匹配 > [@pmusaraj](#): > > 提交按钮也紧贴着软件键盘 一些字段的边框颜色没有被调整。已在 [后续 PR](https://github.com/discourse/discourse/pull/15188) 中修复。iOS 边距也是如此。 ---
**Author:** ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)\ **Post date:** [2021年十二月3日 23:48 UTC](https://meta.discourse.org/t/new-composer-styling-makes-it-hard-to-differentiate-from-background/210959/6 "2021-12-03T23:48:04Z")
> [@cvx](#): > > 目标是让文本更突出 改变边框颜色究竟如何做到这一点？ > [@cvx](#): > > 想法是，撰写器中几乎所有未被按钮/较短输入元素占据的空间都是文本区域。或者，在默认的桌面撰写器中，它被分成两列，用于书写和预览，因此即使是轻微的视觉分隔符也可能足够了。 但是，撰写器周围的 UI 中仍然有很多不是撰写器本身且无法点击的部分，现在更难看清周围部分在哪里结束，撰写器在哪里开始。 老实说，现在感觉就像有一堆漂浮的元素（即撰写器和它上面的所有按钮），根本没有边框，因为边框对比度太低了。即使是（例如）斜体按钮和链接按钮之间的分隔符现在也几乎毫无意义，因为它们几乎看不见。 > [@cvx](#): > > 无论如何，我想给这个改变一些时间，在适应期之后我们可以调整颜色。也许折中一下原始边框颜色和当前颜色。我们拭目以待！ 是的，显然我错过了这个改变的重点，但我绝对理解需要一个适应期。我只是觉得这个改变特别刺眼，原因很难解释。 查看开发控制台，我看到边框从 `--primary-medium` (`#909090`) 变为 `--primary-low` (`#313131`)。这是一个相当大的变化。我尝试使用 `#616161` 来折中，正如你所提到的，这确实是一个巨大的改进。它提供了急需的对比度，同时不像原始的 `#909090` 那样吸引太多注意力。通过尝试各种值，我认为即使是像 `#515151` 这样的值也能在对比度和不过于突兀之间取得很好的平衡。希望在稍作调整后，你会考虑这一点。 （我注意到有一个 `--primary-low-mid`，高达 `#7a7a7a`。猜猜是时候为 `#515151` 添加 `--primary-low-not-quite-mid` 了。 😆） ---
**Author:** ![cvx](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cvx/32/152146_2.png) [@cvx](https://meta.discourse.org/u/cvx)\ **Post date:** [2021年十二月4日 11:16 UTC](https://meta.discourse.org/t/new-composer-styling-makes-it-hard-to-differentiate-from-background/210959/7 "2021-12-04T11:16:25Z")
> [@seanblue](#): > > (我注意到 `--primary-low-mid` 一直在 `#7a7a7a` 。 猜猜是时候为 `#515151` 添加 `--primary-low-not-quite-mid` 了。 😆) 是的 😅 最初我在这里调整边框颜色时，选择了对比度更高的颜色，但最终不得不在 `low` 和 `low-mid` 之间进行选择。也许我最终还是得添加一个新的变量。 但首先，最好检查一下现有的两个变量在哪里被使用，看看这些颜色是否需要调整，或者是否有任何地方可以受益于新的变量。 如果我们引入一种新颜色，就值得考虑一个新的变量命名方案，例如基于数字的，像 `--primary-600` (类似于一些 CSS 框架使用的；例如 [tailwind](https://tailwindcss.com/docs/customizing-colors))。 抄送：@awesomerobot 😃 对扩展调色板有什么想法吗？ ---
**Author:** ![jesus2099](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesus2099/32/119720_2.png) [@jesus2099](https://meta.discourse.org/u/jesus2099)\ **Post date:** [2021年十二月4日 12:34 UTC](https://meta.discourse.org/t/new-composer-styling-makes-it-hard-to-differentiate-from-background/210959/8 "2021-12-04T12:34:27Z")
![Screenshot_2021-12-04-13-31-47-237_org.mozilla.firefox](https://global.discourse-cdn.com/meta/original/3X/4/3/43c5ae0d15695ac6e6c536213282195a073d60ca.jpeg) 边框颜色（像主题标题和提交按钮一样的蓝色）似乎已修复，但提交（回复）按钮底部的边距未修复。 ---
**Author:** ![cvx](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cvx/32/152146_2.png) [@cvx](https://meta.discourse.org/u/cvx)\ **Post date:** [2021年十二月4日 16:21 UTC](https://meta.discourse.org/t/new-composer-styling-makes-it-hard-to-differentiate-from-background/210959/9 "2021-12-04T16:21:35Z")
请编辑帖子并尝试重新上传截图 🙂 ---
**Author:** ![cvx](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cvx/32/152146_2.png) [@cvx](https://meta.discourse.org/u/cvx)\ **Post date:** [2021年十二月5日 14:58 UTC](https://meta.discourse.org/t/new-composer-styling-makes-it-hard-to-differentiate-from-background/210959/10 "2021-12-05T14:58:59Z")
是的，还没有合并修复，所以没有余地。 😃 ---
**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\ **Post date:** [2021年十二月6日 18:12 UTC](https://meta.discourse.org/t/new-composer-styling-makes-it-hard-to-differentiate-from-background/210959/11 "2021-12-06T18:12:02Z")
> [@cvx](#): > > 对扩展调色板有什么想法吗？ 如果可以的话，我宁愿不！也许可以稍微调整一下低-中色调？如果我们目标是大约`#616161`，那么`#7a7a7a`相当接近。 > [@cvx](#): > > 如果我们引入一种新颜色，就值得考虑为变量采用新的命名方案，例如基于数字的，如`--primary-600` 是的，低-中色调从一开始就很奇怪，只要我们重新映射旧变量，我就不反对重命名。 ---
**Author:** ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)\ **Post date:** [2021年十二月6日 21:16 UTC](https://meta.discourse.org/t/new-composer-styling-makes-it-hard-to-differentiate-from-background/210959/12 "2021-12-06T21:16:58Z")
> [@awesomerobot](#): > > 如果可以避免的话，我宁愿不！也许可以稍微调整一下低-中？如果我们目标是 ~ `#616161`，`#7a7a7a` 相当接近。 这样可能更有意义。目前 `low-mid`（`#7a7a7a`）相当接近 `medium`（`#909090`），所以感觉有点多余。将其移至大约 `#616161` 将在 `low`（`#313131`）和 `medium`（`#909090`）之间填补一个不错的空白，使其大约位于两者之间。 ---
**Author:** ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)\ **Post date:** [2021年十二月20日 12:30 UTC](https://meta.discourse.org/t/new-composer-styling-makes-it-hard-to-differentiate-from-background/210959/14 "2021-12-20T12:30:17Z")
只是想跟进一下，看看是否有计划对此进行任何更改。