Custom colors for context & projects

[blumpcus]

Did you check if a similar feature request has already been reported? Yes.

Is your feature request related to a problem? Please describe. Not related to a problem.

Describe the solution you'd like I use a variety of apps & methods to keep my life organized and moving forward. The one thing that allows me to quickly spot relevant information across all the different UIs is color-based tagging.

For example, I keep the same colors for the context "Project Work" across my time tracker, my calendar, and my todo inbox. It helps to quickly identify what I'm looking at without having to even read it, regardless of what application I'm in.

Calendar:

Time Tracker:

It would be incredibly useful for my use-case to be able to define custom colors for context & projects.

I really appreciate your consideration as I'm sure it's not simple to implement.

Thanks again for your work on Sleek, I've really enjoyed using it so far.

[ransome1]

Hi @blumpcus, the problem here is that we would need a database to store this kind of specific user preferences. Especially because a custom color would relate to a context which can change any second.

sleek does persist some information, but that's done in a way that is not really suited for what your feature request is aiming for.

At this point sleek does run without the overhead of a database, it rereads the todo.txt file with every change. It's really kept simple by design. I don't think I would want to work on something like this at the moment. But let's see where sleek is heading in the future.

Other sleek users highlight their contexts and projects by adding prefixes like "001_" to push those attributes to the beginning of the filter list. Of couse it's not a proper solution to your issue, but maybe it can work as a workaround for you.

[nervecenter]

Here's an option: Assign colors to contexts and projects based on a deterministic hash each time Sleek opens. It's not custom, but it requires no storage of any data, and eventually people can get used to the colors Sleek picks for them. It'll be the same every time for any given todo list.

[ransome1]

Hi @nervecenter, could you please elaborate this a bit more? I'm not sure if I fully understand your suggestion.

[nervecenter]

I was thinking, find some function which can take arbitrary-length data (the context and project name strings) and hash them to a six-digit hexadecimal value. Bam. Reproducible colors every time, even if the user doesn't get the choice. And you'd probably need a way to automatically change text color to ensure good contrast depending on the brightness of the hashed color.

[9z0]

Until he responds, I think he means hashing the string "myproject" with a simple hashing algorithm will always produce the same result. For example, crc8 of "myproject" is "25".

Then you (developer of Sleek) assign a color to "25", say "magenta".

This means that a project called "myproject" will always be magenta regardless of the user, OS, version of Sleek, other contents inside the todo.txt, etc. This provides a consistent color that the user knows to look for when they are scanning projects in any todo.txt. I will learn with time that "school" always looks blue in any todo.txt I open in Sleek without having to store that knowledge anywhere. and that "f2d5ch49d" is always lemon green, etc.

I weigh in because, while this is a neat idea, I wouldn't personally want every project/context colored. Just a select few. Also, colors can be assigned to projects using a simple text file that Sleek reads, or inside user-preferences.json, or using custom CSS. 😉

[9z0]

Ninja'd!

[nutnutwin]

Allow me to pile on this idea Hash would be great, and hash for part of the project name would be appreciated too

for example

Work_AtCompany Work_SideHussle

both use ｢Work_｣ to generate hash, thus have same color

While

Housework_Weekly

Would be using different color

Thank you

[brainwave]

Managing as many projects as I am managing - this is a useful feature. Each context can be similarly colored but at least at context level, the colors should be possible to assign. I don't mind if its an automatic thing (love the hash idea) -> But there needs to be differentiation based on projects and/or contexts. Asana is a sucky tool, I love sleek a lot more - but this one feature is limiting usability.

[brainwave]

Just one more note - I can help develop this feature, if the author agrees. I have some experience with javascript and can write it (in a simpler way, not the original suggested feature) such that:

1. We create / reuse (if it exists, need some help here) an object/array of contexts.
2. We have a map of colors, say 16 different colors, such a particular context picks out a color from this map of colors
3. Change the button css (which I think is what you are using to show the project label in UI) rendering based on the color picked out from the map, using javascript
4. Have a setting toggle to turn this feature on or off.

That can be an immediate PR. In the longer run, we can have (if need arises):

1. Configurable theme, so that, at least using config, a user can change the color for the contexts. Similar to how terminals such as kitty have theme.conf files.
2. Colors per project instead of per context.
3. Color picker that can be accessed by clicking on the project (but this would need db approach or file savings approach)

[ransome1]

@brainwave I would love to welcome you onboard.

We create / reuse (if it exists, need some help here) an object/array of contexts.

in filters.mjs you can find the function generateFilterButtons, which configures and renders the buttons. Within the loop starting at line 426 we could implement a check if the currently looped context or project is part of a mapping table and then assign a color to that button. As you can see, that mapping table would need to be able to support both, contexts and projects.

A challenge will be the coloring, because filter buttons in sleek have a default color, a color for the counter bubble, a color for highlighting (same as the counter bubble) and a color when a filter is selected. Furthermore we have slightly different hues of these colors in dark mode as you need more saturation on these.

All of this is solved with SCSS: Based on the default color, it generates the variations of this color using its darken or lighten functions. You can see how this works in dark.scss line 106 for instance.

So if we add a mapping table somehow, it should only contain a single color per filter and the variations (making it darker or lighter) should be done with SCSS, as it is done already. Like this we would stay generic.

What do you think?

[github-actions[bot]]

This is an automated response. We acknowledge your report, and we appreciate your engagement. However, as there has been no recent activity in this thread, it has been marked as stale. If you have any further feedback or if the matter is still relevant, please do not hesitate to respond. Otherwise, this thread will be automatically closed in 15 days from now.

[dnngll]

I still think this would be great! Maybe it could be done in combination with https://github.com/ransome1/sleek/issues/151 ?

[ransome1]

@nutnutwin @nervecenter @brainwave @dnngll @9z0 @blumpcus

This could be achieved by a custom css files, which is part of the latest developer preview: https://github.com/ransome1/sleek/releases/tag/v2.0.0-dev10

Knowledge in CSS is of course required.

Here is a little bit more background information: https://github.com/ransome1/sleek/wiki/Custom-CSS