B端小細節-如何做好富文字在深色模式的適配？

編輯導語：如今越來越多的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。飛書文件

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