Dark mode header color (#7514)
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
1753c9163c
commit
3b91343082
|
@ -1,10 +1,4 @@
|
|||
const expand_hex = (hex: string): string => {
|
||||
let result = "";
|
||||
for (const val of hex) {
|
||||
result += val + val;
|
||||
}
|
||||
return result;
|
||||
};
|
||||
import { expandHex } from "./hex";
|
||||
|
||||
const rgb_hex = (component: number): string => {
|
||||
const hex = Math.round(Math.min(Math.max(component, 0), 255)).toString(16);
|
||||
|
@ -14,10 +8,7 @@ const rgb_hex = (component: number): string => {
|
|||
// Conversion between HEX and RGB
|
||||
|
||||
export const hex2rgb = (hex: string): [number, number, number] => {
|
||||
hex = hex.replace("#", "");
|
||||
if (hex.length === 3 || hex.length === 4) {
|
||||
hex = expand_hex(hex);
|
||||
}
|
||||
hex = expandHex(hex);
|
||||
|
||||
return [
|
||||
parseInt(hex.substring(0, 2), 16),
|
||||
|
|
|
@ -0,0 +1,24 @@
|
|||
export const expandHex = (hex: string): string => {
|
||||
hex = hex.replace("#", "");
|
||||
if (hex.length === 6) return hex;
|
||||
let result = "";
|
||||
for (const val of hex) {
|
||||
result += val + val;
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
// Blend 2 hex colors: c1 is placed over c2, blend is c1's opacity.
|
||||
export const hexBlend = (c1: string, c2: string, blend = 50): string => {
|
||||
let color = "";
|
||||
c1 = expandHex(c1);
|
||||
c2 = expandHex(c2);
|
||||
for (let i = 0; i <= 5; i += 2) {
|
||||
const h1 = parseInt(c1.substr(i, 2), 16);
|
||||
const h2 = parseInt(c2.substr(i, 2), 16);
|
||||
let hex = Math.floor(h2 + (h1 - h2) * (blend / 100)).toString(16);
|
||||
while (hex.length < 2) hex = "0" + hex;
|
||||
color += hex;
|
||||
}
|
||||
return `#${color}`;
|
||||
};
|
|
@ -7,6 +7,7 @@ import {
|
|||
rgb2hex,
|
||||
rgb2lab,
|
||||
} from "../color/convert-color";
|
||||
import { hexBlend } from "../color/hex";
|
||||
import { labBrighten, labDarken } from "../color/lab";
|
||||
import { rgbContrast } from "../color/rgb";
|
||||
|
||||
|
@ -37,6 +38,13 @@ export const applyThemesOnElement = (
|
|||
if (themeOptions.dark) {
|
||||
cacheKey = `${cacheKey}__dark`;
|
||||
themeRules = darkStyles;
|
||||
if (themeOptions.primaryColor) {
|
||||
themeRules["app-header-background-color"] = hexBlend(
|
||||
themeOptions.primaryColor,
|
||||
"#121212",
|
||||
8
|
||||
);
|
||||
}
|
||||
}
|
||||
if (themeOptions.primaryColor) {
|
||||
cacheKey = `${cacheKey}__primary_${themeOptions.primaryColor}`;
|
||||
|
|
|
@ -8,7 +8,7 @@ export const darkStyles = {
|
|||
"secondary-text-color": "#9b9b9b",
|
||||
"disabled-text-color": "#6f6f6f",
|
||||
"app-header-text-color": "#e1e1e1",
|
||||
"app-header-background-color": "#1c1c1c",
|
||||
"app-header-background-color": "#101e24",
|
||||
"switch-unchecked-button-color": "#999999",
|
||||
"switch-unchecked-track-color": "#9b9b9b",
|
||||
"divider-color": "rgba(225, 225, 225, .12)",
|
||||
|
|
Loading…
Reference in New Issue