gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 19:49:01 +01:00
Code Issues Actions 6 Packages Projects Releases Wiki 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
Show Stats 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 {

1
apps/client/src/stylesheets/theme-dark.css
View File

@ -84,6 +84,7 @@ body ::-webkit-calendar-picker-indicator {
#left-pane span.fancytree-node {
--custom-color: var(--dark-theme-custom-color);
--custom-bg-color: var(--dark-theme-custom-bg-color);
}
.excalidraw.theme--dark {

1
apps/client/src/stylesheets/theme-light.css
View File

@ -84,4 +84,5 @@ html {
#left-pane span.fancytree-node {
--custom-color: var(--light-theme-custom-color);
--custom-bg-color: var(--light-theme-custom-bg-color);
}

1
apps/client/src/stylesheets/theme-next-dark.css
View File

@ -270,6 +270,7 @@
#left-pane span.fancytree-node {
--custom-color: var(--dark-theme-custom-color);
--custom-bg-color: var(--dark-theme-custom-bg-color);
}
body ::-webkit-calendar-picker-indicator {

2
apps/client/src/stylesheets/theme-next/shell.css
View File

@ -658,7 +658,7 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
inset-inline-start: var(--left-pane-item-selected-shadow-size);
bottom: var(--left-pane-item-selected-shadow-size);
inset-inline-end: var(--left-pane-item-selected-shadow-size);
background: var(--left-pane-item-selected-background) !important;
background: var(--custom-bg-color, var(--left-pane-item-selected-background)) !important;
box-shadow: var(--left-pane-item-selected-shadow);
border-radius: 6px;
animation: left-pane-item-select 200ms ease-out;