gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-01-03 05:04:23 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

fix(client): color with uppercase causing exception (closes #8232)

Browse Source
This commit is contained in:
Elian Doran 2026-01-01 18:39:31 +02:00
parent 2f9f94dee0
commit 2c323cbe80
No known key found for this signature in database
2 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/client/src/services/css_class_manager.spec.ts Normal file
View File

@ -0,0 +1,14 @@
import { describe, expect, it } from "vitest";
import { getReadableTextColor } from "./css_class_manager";
describe("getReadableTextColor", () => {
it("doesn't crash for invalid color", () => {
expect(getReadableTextColor("RandomColor")).toBe("#000");
});
it("tolerates different casing", () => {
expect(getReadableTextColor("Blue"))
.toBe(getReadableTextColor("blue"));
});
});

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

@ -1,21 +1,22 @@
import clsx from "clsx";
import {readCssVar} from "../utils/css-var";
import Color, { ColorInstance } from "color";
import {readCssVar} from "../utils/css-var";
const registeredClasses = new Set<string>();
const colorsWithHue = new Set<string>();
// Read the color lightness limits defined in the theme as CSS variables
const lightThemeColorMaxLightness = readCssVar(
document.documentElement,
"tree-item-light-theme-max-color-lightness"
).asNumber(70);
document.documentElement,
"tree-item-light-theme-max-color-lightness"
).asNumber(70);
const darkThemeColorMinLightness = readCssVar(
document.documentElement,
"tree-item-dark-theme-min-color-lightness"
).asNumber(50);
document.documentElement,
"tree-item-dark-theme-min-color-lightness"
).asNumber(50);
function createClassForColor(colorString: string | null) {
if (!colorString?.trim()) return "";
@ -27,7 +28,7 @@ function createClassForColor(colorString: string | null) {
if (!registeredClasses.has(className)) {
const adjustedColor = adjustColorLightness(color, lightThemeColorMaxLightness!,
darkThemeColorMinLightness!);
darkThemeColorMinLightness!);
const hue = getHue(color);
$("head").append(`<style>
@ -50,7 +51,7 @@ function createClassForColor(colorString: string | null) {
function parseColor(color: string) {
try {
return Color(color);
return Color(color.toLowerCase());
} catch (ex) {
console.error(ex);
}
@ -84,8 +85,8 @@ function getHue(color: ColorInstance) {
}
export function getReadableTextColor(bgColor: string) {
const colorInstance = Color(bgColor);
return colorInstance.isLight() ? "#000" : "#fff";
const colorInstance = parseColor(bgColor);
return !colorInstance || colorInstance?.isLight() ? "#000" : "#fff";
}
export default {