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

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

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

顏色構(gòu)成

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

1.CMYK

主要應(yīng)用于平面印刷。

2.RGB 色彩模式

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

3.HSB 又稱 HSV

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

4.HSL

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

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

案例分析

主要是找了一些文檔類垂直領(lǐng)域產(chǎn)品做一些相關(guān)的分析。

1.有道云筆記

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

2.石墨文檔

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

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

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

3.飛書文檔

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

4.釘釘文檔

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

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

經(jīng)驗總結(jié)

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

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

本文由 @小太陽不愛吃辣椒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自?Unsplash，基于 CC0 協(xié)議。