Improve font appearance menu

[TCOTC]

01

Close #15604

例如使用以下 CSS 片段，在明亮主题给选中文本设置特定背景色时，同时应用特定的文本颜色：

.protyle-wysiwyg [data-node-id] span[style*="background-color: var(--b3-font-background13)"],
.color__square[style*="--b3-font-background13"] {
  background-color: rgb(0 0 0);
  color: var(--b3-color-text, rgb(249 255 0));
}

原本只能知道会设置成什么背景颜色：

现在能同时知道背景颜色和文本颜色：

同时也与移动端保持一致：

siyuan/app/src/mobile/util/keyboardToolbar.ts

Line 50 in a37e23b

<span class="keyboard__slash-icon" ${item ? `style="background-color:${item}"` : ""}>A</span>

02

给一些元素添加 data-id 属性，便于主题样式定位元素

03

有时候要设置了背景色之后才发现跟文本的颜色对比度不太够，然后重新设置。

实现了动态显示选中文本的颜色，方便判断设置背景色之后的真实效果：

video.webm

p.s. 设置文本颜色的那部分按钮需不需要也实现动态的背景色？

[Vanessa219]

notion 是这样的。如果改成都有文字的话太过于花哨，界面不够美观。

[TCOTC]

@88250 移除 milestone