Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-07 05:46:10 +01:00
Code Issues Packages Projects Releases Activity

client/note tree: tint the active item background according to the item's custom color

Browse Source
This commit is contained in:
Adorian Doran
2025-10-19 03:28:34 +03:00
parent 5b75d20c80
commit 75a79775f4
5 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -34,7 +34,9 @@ function createClassForColor(colorString: string | null) {
$("head").append(`<style>
.${className}, span.fancytree-active.${className} {
--light-theme-custom-color: ${adjustedColor.lightThemeColor};
--light-theme-custom-bg-color: ${adjustedColor.lightThemeBackgroundColor};
--dark-theme-custom-color: ${adjustedColor.darkThemeColor};
--dark-theme-custom-bg-color: ${adjustedColor.darkThemeBackgroundColor};
}
</style>`);
@@ -59,8 +61,7 @@ function parseColor(color: string) {
* according to the lightThemeMaxLightness and darkThemeMinLightness parameters.
*/
function adjustColorLightness(color: ColorInstance, lightThemeMaxLightness: number, darkThemeMinLightness: number) {
let labColor = color.lab();
const labColor = color.lab();
const lightness = labColor.l();
// For the light theme, limit the maximum lightness
@@ -69,7 +70,18 @@ function adjustColorLightness(color: ColorInstance, lightThemeMaxLightness: numb
// For the dark theme, limit the minimum lightness
const darkThemeColor = labColor.l(Math.max(lightness, darkThemeMinLightness)).hex();
return {lightThemeColor, darkThemeColor};
let darkThemeBackgroundColor = "unset";
let lightThemeBackgroundColor = "unset";
const hslColor = color.hsl();
const hue = hslColor.hue();
if (color.saturationl() > 0) {
darkThemeBackgroundColor = Color({h: hue, s: 20, l: 33, alpha: .4}).hexa();
lightThemeBackgroundColor = Color({h: hue, s: 100, l: 25, alpha: .1}).hexa();
}
return {lightThemeColor, lightThemeBackgroundColor, darkThemeColor, darkThemeBackgroundColor};
}
export default {