資訊專欄INFORMATION COLUMN
摘要：根據背景的顏色調整字體的顏色是我最近在項目中遇到的一個需求，這里將代碼貼出來，供以后查閱。根據進制顏色值，計算色彩的亮度。所以，當背景色的亮度時，文字就應該為白色，反之為黑色。
根據背景的顏色調整字體的顏色是我最近在項目中遇到的一個需求，這里將代碼貼出來，供以后查閱。也希望對遇到同樣需求的人有幫助。
這里的需求是：整個項目中的所有頁面都有一個背景色， 這個背景色是在專門的配置頁面統一配置的，當在配置頁面設置好顏色后，整個項目中的背景色隨之改變，同時，各個頁面頭部，底部的一些文字顏色隨著背景的亮度，對應變成黑色或者白色。
step1: 遇到這么個需求，我首先去搜索了計算顏色亮度的函數：
let lightness = rColorValue * 0.299 + gColorValue * 0.587 + bColorValue * 0.114;
step2: 由于，我們項目里存的都是16進制的顏色，所以需要將16進制的顏色轉換成rgb表示。
const hexToRgb = (hexColor) => {
return parseInt(hexColor, 16).toString();
}
step3: 根據16進制顏色值，計算色彩的亮度。
let brightnessOfColor = (colorHexdecimalValue) => {
let useColorValue = colorHexdecimalValue.slice(1);
let rColor = useColorValue.slice(0, 2);
let gColor = useColorValue.slice(2, 4);
let bColor = useColorValue.slice(4);
let rColorValue = hexToRgb(rColor);
let gColorValue = hexToRgb(gColor);
let bColorValue = hexToRgb(bColor);
let lightness = rColorValue * 0.299 + gColorValue * 0.587 + bColorValue * 0.114;
return lightness;
}
step4: 根據計算，顏色的色彩亮度區間是0~255，這里我取了一個中間值作為文字顏色的顯示的拐點。
decideTxtColor = (colorHexdecimal) => {
return brightnessOfColor(colorHexdecimal) < 128;
}
所以，當背景色的亮度 < 128時，文字就應該為白色，反之為黑色。
const IsWhiteFooter = decideTxtColor(window.themeColor);
接著將IsWhiteFooter用到標簽的style上即可。
OK, 這就是我解決這個問題的過程。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99007.html
摘要：在這樣的配色中，最難分辨的就是局部變量和類型的私有字段其他好歹可以通過大小寫規則來判斷，如果代碼編寫夠規范的話。 1.eclipse 背景色設置：Window->Preferences->General->Editors->Text Editors->Backgroud colors取消System default 設置成：RGB(204,232,207). 2.字體大小設置：java...
摘要：色相是這個圓柱的偏角，飽和度為圓柱水平切面的半徑，亮度以圓柱的高度表示。這意味著中，飽和度總是從完全飽和變化到等價的灰色，而在中是從完全飽和變化為白色。到的換算在數學上定義為空間的坐標到空間的坐標的換算。當為亮度為極值時，飽和度恒等于。 我在做 webapp 的頂部導航欄時，碰到了一個挑戰，導航欄的字體與圖標要根據背景的顏色深淺來顯示不同白色和黑色，但是導航欄的顏色是支持多種配色的，我...
摘要：我們會在組合選擇器中來了解為什么權重值要加連字符。組合選擇器中的權重值會分別對不同類型的選擇器進行計數。對比兩組選擇器，第二組選擇器有兩個選擇器，擁有更高的權重值。 CSS是一門復雜的語言，擁有相當的大能力。 它我們允許為頁面添加布局和設計，允許多個元素甚至多個頁面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎點。 首先，我們要明確的了解樣式是怎么被渲染的。 具體的...
摘要：我們會在組合選擇器中來了解為什么權重值要加連字符。組合選擇器中的權重值會分別對不同類型的選擇器進行計數。對比兩組選擇器，第二組選擇器有兩個選擇器，擁有更高的權重值。 CSS是一門復雜的語言，擁有相當的大能力。 它我們允許為頁面添加布局和設計，允許多個元素甚至多個頁面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎點。 首先，我們要明確的了解樣式是怎么被渲染的。 具體的...
閱讀 2018·2021-09-29 09:35
閱讀 1952·2019-08-30 14:15
閱讀 2977·2019-08-30 10:56
閱讀 960·2019-08-29 16:59
閱讀 575·2019-08-29 14:04
閱讀 1306·2019-08-29 12:30
閱讀 1030·2019-08-28 18:19
閱讀 514·2019-08-26 11:51
