Supertool & Tags

Help
1

How do I change tags properties with SuperTool? When I switch from dark to light theme and vice versa, I would like to invert (complement actually) the color of the tags so that the whites become black and vice versa. How do I do this with SuperTool?

Here for example are my tags when I am in light and dark theme:

image
image1341×707 57 KB

image
image869×746 98.2 KB

For now they are unreadable in light theme and the various recordings that are tagged with also

2

You want to walk through all the tags and change all their 48-bit #rrrrggggbbbb color string values to the complementary for dark mode. And running again restore the original colors. Right?

Which question are you asking ?

  1. the math of changing a color to its complementary Dark mode color
  2. Changing Tag object attributes (How to access the list of Tags, getting the color, setting the color?)

References:

3

Perplexity AI overview of color convert process … without any policy‐violating example code. (The brightness downscaling means some rounding errors creep in … even if a brightness upscaling for Light mode conversions is added.):

To determine a dark mode variant of a light mode color in the 48-bit format "#rrrrggggbbbb", you can adjust the brightness or invert the color while preserving its format.

Specifically:

  1. Input Validation: Ensure the input is in "#rrrrggggbbbb" format.
  2. Extract Components: Parse the red, green, and blue components as 16-bit integers.
  3. Invert and Adjust Brightness:
    • Invert each component by subtracting it from 0xFFFF.
    • Scale down brightness using a factor (e.g., 0.8) for better contrast.
  4. Clamp Values: Ensure RGB values remain within the valid range (0–65535).
  5. Output Format: Return the adjusted color in "#rrrrggggbbbb" format.

This approach ensures compatibility with 48-bit colors while producing visually distinct dark mode variants.

Citations:
[1] One line - Dark Mode using CSS - DEV Community
[2] https://www.youtube.com/watch?v=Ljo46Hsb-0Q
[3] light-dark() - CSS: Cascading Style Sheets | MDN
[4] django - Generating a Random Hex Color in Python - Stack Overflow
[5] Dark mode in 5 minutes, with inverted lightness variables • Lea Verou
[6] Converting string to hex triplet
[7] Building a dark-mode theme with CSS variables
[8] https://www.youtube.com/watch?v=jlJN0dzs3oE
[9] Dark Mode in 3 Lines of CSS and Other Adventures - DEV Community
[10] Get Hex (Gamma Corrected) color - Python API - Developer Forum

1 Like
4

Yes, that’s it.

Yes, too.

As I can see in Gramps Developer docs on Tags, color format is #rrrrggggbbbb. What kind of format is that? I know RGB format in hexadecimal notation (6 hexadecimal characters - i.e. ffbb00) but what is this one? Octal?

5

#ffbb00 is an example of 24-bit color RGB format as a string value: three 8-bit hexadecimal values allowing 0-255 for each of the Red, Green, and Blue channels.

#ffffbbbb0000 is an example 48-bit color RGB format a string value: three 16-bit hexadecimal values allowing 0-65,535 for each of the Red, Green, and Blue channels.

(Or more practically as applied, an extra 255 graduations of each 8-bit channel value. The duplicate graduation of each 8bit value already exists since #ffbb11 and #ffffbbbb1111 are effectively the same color. Using the 00 or ff to expand would orphan 255 gradients at the top or bottom of the spectrum.)

RGBA would have a 4th hexadecimal value for alpha channel… so 32-bits or 64-bits. (And Gramps should probably adopt RGBAa for storing its colors. A couple of features already use an Alpha channel value for transparency to simplify DarkMode support.) In 32-bit, the ff alpha channel is fully opaque as is ffff in 64-bit.

1 Like
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.