GithubHelp home page GithubHelp logo

Comments (8)

nexus6-haiku avatar nexus6-haiku commented on August 10, 2024

It's slightly different than #17 but related.

from ponpokodiff.

humdingerb avatar humdingerb commented on August 10, 2024

The text becoming black on resize is #17 , I'd say.
The main issue of the illegibility is due to the fixed colour scheme. I just checked with black and white text, the colours look good with that. But your text colour is a 'darkish' light blue, which doesn't work well with the chosen colours for a dark theme.
We'd need a nice algorithm to choose a good red, yellow, green colour for a given text colour. (And of course a fix for #17...)

Another confusing thing is that the empty space ("colorEmpty") appears always light grey. It uses B_PANEL_BACKGROUND_COLOR, which should be dark in a dark theme, but doesn't appear to change...

from ponpokodiff.

nexus6-haiku avatar nexus6-haiku commented on August 10, 2024

Due the lack of a proper and official dark mode on Haiku, We'd need a System-wide algorithm to determine if we are on a dark-ish theme by checking the relevant components, I presume. I.e. if the background colour is on a bright tone and the foreground text colour on the dark end of the spectrum then maybe there's a dark theme in place.
At that point PonpokoDiff or any other app might pick the most appropriate built-in palette.
It's a bit simplistic and yours looks the right way to do it, by the way. A bit more complex, though.

from ponpokodiff.

pulkomandy avatar pulkomandy commented on August 10, 2024

There is a perceptual_lightness function that can be used, if it is higher than 127, the color is "light". This is what we use for the desktop icons text color for example (to make sure the color of the text is always visible on top of the background color)

from ponpokodiff.

nexus6-haiku avatar nexus6-haiku commented on August 10, 2024

amazing, this is exactly what every app should use to adjust custom colours to match the system theme. Thanks!

from ponpokodiff.

humdingerb avatar humdingerb commented on August 10, 2024

Appreciated. I'll use perceptual_lightness instead of the simple if (bkColor.Brightness() > 100).

That doesn't solve using colours that provide enough contrast with the current text colour. We'd need something like:

rgb_color textColor = ui_color(B_DOCUMENT_TEXT_COLOR);
rgb_color lightColor = {163, 255, 180, 255};
rgb_color darkColor;
darkColor = find_contrasting_color(lightColor, textColor);

That is, find_contrasting_color() should find the equivalent of the fixed lightColor that has a nice contrast to the current textColor.

Anyway, here's a suggestion for better contrasting colours for the MoonFlat light blue colour:

new_dark

WRT using the loopy Invalidate(), I'd rather we find and fix the underlying issue... :)
Until then, dark theming user will have to wave a window in front. :)

from ponpokodiff.

pulkomandy avatar pulkomandy commented on August 10, 2024

If you just need a green or a red, you can use one of the HSV or HSL colorspaces, where the color can be selected separately from the brightness.

Here is an example in Renga using the HSLUV colorspace: https://github.com/pulkomandy/Renga/blob/master/ui/hsluv.c#L214

you can set H and S to colors that look nice (S should be high, H should be whichever value gives a red or green), and then set L to a low value for a dark color, and a large value for a light color. The use the linked function to convert to RGB.

Or you can simply pick a light and a dark green, a light and a dark red, and switch between the two color sets depending on perceptual_lightness of the background color.

Or yet another way is to mix the colors:

newRed = background.red + lDeletedColor.red / 2;
newGreen = background.green + lDeletedColor.green / 2;
newBlue = background.blue + lDeletedColor.blue / 2;

This gives you a color that is "in between" your background and your "deleted color" (a base red). On a dark background this will be a dark color, on a light background this will be a light color, but it will preserve the red or green-ness of the initial color.

from ponpokodiff.

humdingerb avatar humdingerb commented on August 10, 2024

Or you can simply pick a light and a dark green, a light and a dark red, and switch between the two color sets depending on perceptual_lightness of the background color.

That's what I do now.
Thanks for the hint for mixing colours etc. I don't want to complicate things too much. I originally just didn't think about people using quite less bright text colours in their dark theme. My dark background colours therefore were a bit too bright. I've now toned them down some more with PR #19.
@nexus6-haiku, think those colours are OK?

from ponpokodiff.

Related Issues (9)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.