Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-02 19:36:12 +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> $("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}; --custom-color-hue: ${getHue(color) ?? 'unset'};
} }
</style>`); </style>`);
@@ -66,18 +65,15 @@ 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();
let darkThemeBackgroundColor = "unset"; return {lightThemeColor, darkThemeColor};
let lightThemeBackgroundColor = "unset"; }
/** Returns the hue of the specified color, or undefined if the color is grayscale. */
function getHue(color: ColorInstance) {
const hslColor = color.hsl(); const hslColor = color.hsl();
const hue = hslColor.hue(); if (hslColor.saturationl() > 0) {
return 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();
} }
return {lightThemeColor, lightThemeBackgroundColor, darkThemeColor, darkThemeBackgroundColor};
} }
export default { 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 { #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,5 +84,4 @@ 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);
} }

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

@@ -270,7 +270,11 @@
#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);
/* 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 { 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-color: black;
--ck-editor-toolbar-button-on-shadow: none; --ck-editor-toolbar-button-on-shadow: none;
--ck-editor-toolbar-dropdown-button-open-background: #0000000f; --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);
}