Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-03 20:06:08 +01:00
Code Issues Packages Projects Releases Activity

client: refactor

Browse Source
This commit is contained in:
Adorian Doran
2025-10-18 23:52:43 +03:00
parent 0ae5270f5b
commit 21581c78f9
1 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
apps/client/src/services/css_class_manager.ts
View File

@@ -15,21 +15,19 @@ const darkThemeColorMinLightness = readCssVar(
"tree-item-dark-theme-min-color-lightness" "tree-item-dark-theme-min-color-lightness"
).asNumber(50); ).asNumber(50);
function createClassForColor(color: string | null) { function createClassForColor(colorString: string | null) {
if (!color?.trim()) { if (!colorString?.trim()) {
return ""; return "";
} }
const normalizedColorName = color.replace(/[^a-z0-9]/gi, ""); const color = parseColor(colorString);
if (!color) {
if (!normalizedColorName.trim()) { return;
return "";
} }
const className = `color-${normalizedColorName}`; const className = `color-${color.hex().substring(1)}`;
const adjustedColor = adjustColorLightness(color, lightThemeColorMaxLightness!,
const adjustedColor = adjustColorLightness(color, lightThemeColorMaxLightness!, darkThemeColorMinLightness!); darkThemeColorMinLightness!);
if (!adjustedColor) return "";
if (!registeredClasses.has(className)) { if (!registeredClasses.has(className)) {
$("head").append(`<style> $("head").append(`<style>
@@ -45,22 +43,23 @@ function createClassForColor(color: string | null) {
return className; return className;
} }
function parseColor(color: string) {
try {
// Parse the given color in the CIELAB color space
return Color(color);
} catch (ex) {
console.error(`Failed to parse color: "${color}"`, ex);
}
}
/** /**
* Returns a pair of colors — one optimized for light themes and the other for dark themes, derived * Returns a pair of colors — one optimized for light themes and the other for dark themes, derived
* from the specified color to maintain sufficient contrast with each theme. * from the specified color to maintain sufficient contrast with each theme.
* The adjustment is performed by limiting the color’s lightness in the CIELAB color space, * The adjustment is performed by limiting the color’s lightness in the CIELAB color space,
* according to the lightThemeMaxLightness and darkThemeMinLightness parameters. * according to the lightThemeMaxLightness and darkThemeMinLightness parameters.
*/ */
function adjustColorLightness(color: string, lightThemeMaxLightness: number, darkThemeMinLightness: number) { function adjustColorLightness(color: ColorInstance, lightThemeMaxLightness: number, darkThemeMinLightness: number) {
let labColor: ColorInstance | undefined = undefined; let labColor = color.lab();
try {
// Parse the given color in the CIELAB color space
labColor = Color(color).lab();
} catch (ex) {
console.error(`Failed to parse color: "${color}"`, ex);
return;
}
const lightness = labColor.l(); const lightness = labColor.l();