近日，保利威前端開發(fā)者在技術(shù)平臺(tái)發(fā)布了實(shí)踐分享，提供其B端直播平臺(tái)品牌色功能的迭代方案。針對(duì)企業(yè)用戶對(duì)直播系統(tǒng)“品牌視覺適配”的需求，保利威團(tuán)隊(duì)從技術(shù)層面拆解了品牌色功能的實(shí)現(xiàn)邏輯,解決了B端場(chǎng)景下品牌色個(gè)性化配置的技術(shù)痛點(diǎn)，為企業(yè)直播平臺(tái)的視覺定制化提供了可復(fù)用的落地路徑。

-以下為Blog文稿搬運(yùn)-

最近產(chǎn)品經(jīng)理希望在 B 端后臺(tái)系統(tǒng)中增加品牌色功能，突顯客戶的企業(yè)特色。從技術(shù)上說，整個(gè)流程是非常簡(jiǎn)單的：

  1. 在配置中心為某個(gè)客戶配置品牌色（十六進(jìn)制顏色值）。
  2. 后臺(tái)系統(tǒng)初始化時(shí)，通過后端接口讀取配置的品牌色。
  3. 把品牌色寫入為根元素的 CSS 變量。

核心流程代碼如下： 

const response = await fetch('/api/get-brand-info'); 
const data = await response.json(); 
document.documentElement.style.setProperty(
 '--brand-primary-color', 
data.primaryColor
 );

顏色替換

接下來要把項(xiàng)目中樣式代碼的顏色值改為 CSS 變量。顏色值的使用，一般有兩種情況：

  • 使用了 SCSS 等 CSS 擴(kuò)展語言中的變量，所有顏色值都從變量取值；
  • 直接用顏色值。

實(shí)際情況更有可能是這兩種的混合——雖然使用了 SCSS 變量，但由于部分開發(fā)人員沒有完全遵循規(guī)范，所以項(xiàng)目中既有顏色變量，也有顏色值。 

$primary-color: #3F76FC; 
.logo { 
background: #3F76FC;
 }
 .selected { 
color: $primary-color; 
border: 1px solid $primary-color;
 background: rgba($primary-color, 0.1);
 }

不過，不管是哪種情況，似乎都是把顏色值替換成 CSS 變量就可以了。以上述代碼為例，即把「#3F76FC」替換為「var(–brand-primary-color, #3F76FC)」: 

$primary-color: var(--brand-primary-color, #3F76FC); 
.logo { 
background: var(--brand-primary-color, #3F76FC);
 }
 .selected { 
color: $primary-color;
 border: 1px solid $primary-color;
 background: rgba($primary-color, 0.1);
 }

替換后，馬上發(fā)現(xiàn)問題——.selected 元素的背景色沒了。通過瀏覽器開發(fā)工具可以發(fā)現(xiàn)，背景屬性的值變成了： 

background: rgba(var(--brand-primary-color, #3F76FC), 0.1);

屬于無效寫法。造成這種情況，是因?yàn)椤竍ackground: rgba($primary-color, 0.1)」中的「$primary-color」被編譯成該變量的值了。

在 SCSS 中，可以用「rgba(#3F76FC, 0.1)」這種寫法。編譯過程中，編譯器會(huì)把十六進(jìn)制顏色值轉(zhuǎn)成 RGB 顏色值，也就是編譯成「rgba(63, 118, 252, 0.1)」。然而，把顏色值替換成 CSS 變量后，由于編譯器也不知道顏色值是什么，所以無法進(jìn)行轉(zhuǎn)換。因此，這里必須用 RGB 顏色值。

對(duì)核心流程代碼稍作修改，設(shè)置兩個(gè) CSS 變量，分別是 RGB 顏色值和十六進(jìn)制顏色值： 

import { hexToRGB } from '@polyv/utils/es/color'; 
const response = await fetch('/api/get-theme'); 
const data = await response.json();
 document.documentElement.style.setProperty( 
'--brand-primary-color-hex',
 data.primaryColor
 );
 document.documentElement.style.setProperty( 
'--brand-primary-color-rgb',
 hexToRGB(data.primaryColor).join(',') 
);

接下來設(shè)置兩個(gè) SCSS 變量，分別是品牌色的十六進(jìn)制表示和 RGB 表示： 

$--primary-color-hex: var(--brand-primary-color-hex, #3F76FC);
 $--primary-color-rgb: var(--brand-primary-color-rgb, 63, 118, 252);

做兩次替換操作：

  1. 把「rgba($–primary-color」以及「rgba(#3F76FC」替換為「rgba($–primary-color-rgb」。
  2. 把剩余的「$–primary-color」以及「#3F76FC」替換為「$–primary-color-hex」。

最終能正常運(yùn)行的代碼為： 

$--primary-color-hex: var(--brand-primary-color-hex, #3F76FC);
 $--primary-color-rgb: var(--brand-primary-color-rgb, 63, 118, 252);
 .logo { 
background: $--primary-color-hex;
 } 
.selected {
 color: $--primary-color-hex;
 border: 1px solid $--primary-color-hex;
 background: rgba($--primary-color-rgb, 0.1);
 }

顏色計(jì)算

設(shè)計(jì)師希望后臺(tái)系統(tǒng)左側(cè)導(dǎo)航欄的底色是通過 25% 不透明度的品牌色疊加黑色得出。

 

雖說通過兩個(gè) HTML 元素疊加，就能做到這個(gè)效果，但是 HTML 結(jié)構(gòu)和樣式代碼都會(huì)稍顯復(fù)雜。通過 JavaScript 去計(jì)算出這個(gè)顏色值就方便多了： 

export function mixWithBlack(color, opacity) { 
const r = parseInt(hex.slice(0, 2), 16) * opacity; 
const g = parseInt(hex.slice(2, 4), 16) * opacity; 
const b = parseInt(hex.slice(4, 6), 16) * opacity;
 const toHex = (c) => c.toString(16).padStart(2, '0');
 return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 } 
 
document.documentElement.style.setProperty( 
'--brand-nav-bg-color', 
mixWithBlack(data.primaryColor, 0.25) 
);

如果還有更復(fù)雜的顏色計(jì)算，也可以使用專業(yè)的第三方庫，如 tinycolor。

最終效果