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/note tree item tinting: refactor

Browse Source
This commit is contained in:
Adorian Doran
2025-10-19 17:22:38 +03:00
parent c58c18d688
commit d999d60302
5 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,9 +30,8 @@ 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};
--custom-color-hue: ${getHue(color) ?? 'unset'};
}
</style>`);
@@ -66,18 +65,15 @@ function adjustColorLightness(color: ColorInstance, lightThemeMaxLightness: numb
// For the dark theme, limit the minimum lightness
const darkThemeColor = labColor.l(Math.max(lightness, darkThemeMinLightness)).hex();
let darkThemeBackgroundColor = "unset";
let lightThemeBackgroundColor = "unset";
return {lightThemeColor, darkThemeColor};
}
/** Returns the hue of the specified color, or undefined if the color is grayscale. */
function getHue(color: ColorInstance) {
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: 37, l: 89, alpha: 1}).hexa();
if (hslColor.saturationl() > 0) {
return hslColor.hue();
}
return {lightThemeColor, lightThemeBackgroundColor, darkThemeColor, darkThemeBackgroundColor};
}
export default {

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

@@ -84,7 +84,6 @@ 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,5 +84,4 @@ html {
#left-pane span.fancytree-node {
--custom-color: var(--light-theme-custom-color);
--custom-bg-color: var(--light-theme-custom-bg-color);
}

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

@@ -270,7 +270,11 @@
#left-pane span.fancytree-node {
--custom-color: var(--dark-theme-custom-color);
--custom-bg-color: var(--dark-theme-custom-bg-color);
/* The background color of the active item in the note tree.
* The --custom-color-hue variable contains the hue of the user-selected note color.
* This value is unset for gray tones. */
--custom-bg-color: hsl(var(--custom-color-hue), 20%, 33%, 0.4);
}
body ::-webkit-calendar-picker-indicator {

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

@@ -261,5 +261,13 @@
--ck-editor-toolbar-button-on-color: black;
--ck-editor-toolbar-button-on-shadow: none;
--ck-editor-toolbar-dropdown-button-open-background: #0000000f;
}
#left-pane span.fancytree-node {
--custom-color: var(--light-theme-custom-color);
/* The background color of the active item in the note tree.
* The --custom-color-hue variable contains the hue of the user-selected note color.
* This value is unset for gray tones. */
--custom-bg-color: hsl(var(--custom-color-hue), 37%, 89%, 1);
}