gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-01 20:19:05 +01:00
Code Issues Actions 10 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> $("head").append(`<style>
.${className}, span.fancytree-active.${className} { .${className}, span.fancytree-active.${className} {
--light-theme-custom-color: ${adjustedColor.lightThemeColor}; --light-theme-custom-color: ${adjustedColor.lightThemeColor};
--light-theme-custom-bg-color: ${adjustedColor.lightThemeBackgroundColor};
--dark-theme-custom-color: ${adjustedColor.darkThemeColor}; --dark-theme-custom-color: ${adjustedColor.darkThemeColor};
--dark-theme-custom-bg-color: ${adjustedColor.darkThemeBackgroundColor};
} }
</style>`); </style>`);
@ -59,8 +61,7 @@ function parseColor(color: string) {
* according to the lightThemeMaxLightness and darkThemeMinLightness parameters. * according to the lightThemeMaxLightness and darkThemeMinLightness parameters.
*/ */
function adjustColorLightness(color: ColorInstance, lightThemeMaxLightness: number, darkThemeMinLightness: number) { function adjustColorLightness(color: ColorInstance, lightThemeMaxLightness: number, darkThemeMinLightness: number) {
let labColor = color.lab(); const labColor = color.lab();
const lightness = labColor.l(); const lightness = labColor.l();
// For the light theme, limit the maximum lightness // 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 // For the dark theme, limit the minimum lightness
const darkThemeColor = labColor.l(Math.max(lightness, darkThemeMinLightness)).hex(); 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 { 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 { #left-pane span.fancytree-node {
--custom-color: var(--dark-theme-custom-color); --custom-color: var(--dark-theme-custom-color);
--custom-bg-color: var(--dark-theme-custom-bg-color);
} }
.excalidraw.theme--dark { .excalidraw.theme--dark {

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

@ -84,4 +84,5 @@ html {
#left-pane span.fancytree-node { #left-pane span.fancytree-node {
--custom-color: var(--light-theme-custom-color); --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 { #left-pane span.fancytree-node {
--custom-color: var(--dark-theme-custom-color); --custom-color: var(--dark-theme-custom-color);
--custom-bg-color: var(--dark-theme-custom-bg-color);
} }
body ::-webkit-calendar-picker-indicator { 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); inset-inline-start: var(--left-pane-item-selected-shadow-size);
bottom: 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); 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); box-shadow: var(--left-pane-item-selected-shadow);
border-radius: 6px; border-radius: 6px;
animation: left-pane-item-select 200ms ease-out; animation: left-pane-item-select 200ms ease-out;