中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：如今越來越多的APP開始更新了深色模式，那么如何做好富文本在深色模式的適配呢？本篇文章主要總結了富文本的字體顏色在深色模式如何進行優化，希望對您有幫助。

自從19年蘋果發布會推出了深色模式后，越來越多的APP開始更新了深色模式，那么如何才能更好的適配深色模式呢？本文主要是總結一下富文本的字體顏色在深色模式上如何做優化。

富文本編輯器（Rich Text Editor，RTE）是一種可內嵌于瀏覽器，所見即所得的文本編輯器。它提供類似于Office Word 的編輯功能，方便那些不太懂HTML用戶使用。用戶是可以自己去設置文本的顏色、樣式、格式等。那么如果用戶在淺色模式下寫出了黑色的字，在深色模式應該怎么做適配呢？

顏色構成

首先來簡單了解一下顏色的構成方式，目前實際工作中比較常見的的幾種色彩模式有如下幾種：CMYK、RGB、HSB、HSL。

1.CMYK

主要應用于平面印刷。

2.RGB 色彩模式

是工業界的一種顏色標準，是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色。

3.HSB 又稱 HSV

表示一種顏色模式：在 HSB 模式中，H(hues)表示色相，S(saturation)表示飽和度，B（brightness）表示亮度 HSB 模式對應的媒介是人眼。

4.HSL

是一種將 RGB 色彩模型中的點在圓柱坐標系中的表示法。H(hues)表示色相，S(saturation)表示飽和度，L（Lightness）表示亮度 。但 L（Lightness：亮度）與 B（Brightness：明度）分別被認為是「顏色中白色的量」和「顏色中光線的量」。

HSB 和 HSL在相同參數下，顏色差異還是挺大的。在設計上一般使用HSB模式，開發人員一般使用HSL，所以對于后面的分析，我們都采用HSL。

案例分析

主要是找了一些文檔類垂直領域產品做一些相關的分析。

1.有道云筆記

對于富文本的顏色并沒有做處理，在深色模式下，黑色字體顏色幾乎看不出來。

2.石墨文檔

對于顏色做了反白處理，黑色文字在深色模式下變成白色，黃色在深色模式下也變成了暗黃色。

圖中淺色背景下的文字顏色是通過代碼查看，深色背景下的文字顏色是通過截圖吸取，所以存在微小誤差，但是可以大概看出：石墨文檔的顏色轉換規則：對于H=0的顏色（也就是灰度色）在深色模式下的轉換規則是：H不變，S=淺色S/2，L=80-淺色L。但對于H有數值的顏色在深色模式的轉換規則是：H不變，S=淺色S/2，L=100-淺色L。

可以看出石墨文檔對于富文本的處理做的很全面，不是簡單的進行顏色的反色，而是對于飽和度和明度都做了相應的處理，在深色模式下，顏色會偏暗一些，以減少眼睛疲勞。

3.飛書文檔

只能選擇系統自帶的顏色庫，從其他頁面粘貼復制進來也會清除樣式，所以開發可以對顏色庫的顏色做特殊處理。

4.釘釘文檔

使用了很偷懶的方法，里沒有對富文本做處理。

5.騰訊文檔竟然沒有深色模式?

經驗總結

可以看出石墨文檔的方案應該是最完整的。但是我們本身是一個教育類產品，文本編輯功能是一個輔助功能，所以綜合考慮之后，我們團隊使用了相對比較簡易的方案：對于文本顏色做反色，在保持S和L不變情況下，再進行一次反色。也就是保持色相不變，S=100-淺色S，L=100-淺色L。

大家也可以根據自己的實際情況選擇合適自己項目的解決方案。

本文由 @小太陽不愛吃辣椒 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自?Unsplash，基于 CC0 協議。