Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: automatic contrasting colors for texts when using color override #506

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

wcruz-br
Copy link

@wcruz-br wcruz-br commented Aug 1, 2024

Add automatic contrasting colors to texts on overrided background colors.

After @ivan-lednev asked to use getTextColorWithEnoughContrast over @bogdansalyp 's proposal #480 , I tried to implement it. First time with Svelte, but I think I did it right.

May resolve #481

@wcruz-br
Copy link
Author

Any chance of merging this? It would be great. Tell me if I can help anyway else.

Comment on lines +53 to +65
$: override = useColorOverride(task);
// todo: hide in hook
$: backgroundColor =
$override || "var(--time-block-bg-color, var(--background-primary))";

$: ({
faint,
muted,
normal,
} = $override
? getTextColorWithEnoughContrast(backgroundColor)
: { faint: "", muted: "", normal: "" }
);
Copy link
Owner

@ivan-lednev ivan-lednev Sep 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This solution is simple, and it works, but let's keep all the color related code in one place. This should go into src/ui/hooks/use-color.ts. There, the same calculation is made for a different feature: colored timelines. We should check if a task matches an override there, and return the override colors. Overrides should take precedence over colored timeline values.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Automatic text contrast colors don't work for color overrides in blocks
2 participants