Modifying Themes

Development
#3

There was an earlier way to install a different Theme for Gramps that allowed to have different colors, sizes of icons etc. Then PaulC created the Themes addon that made the process even easier.

I have tried out various themes downloaded from Gnome-look.org . None of the themes were ever better than the Adwaita used by Gramps as its default.

But I have had a pet peeve with Adwaita in the size of the Tabs.

I found the Windows XP Embedded theme met my Tabs needs but found the theme garish. So I started tweaking and modified it to the Theme I posted to my Github above. It looks great (in my opinion) but has a major flaw that I cannot find. The flaw is hovering over non-active people in the Relationships view and I cannot find where that is being controlled. Hence my initial post.

I have started on another track taking Adwaita Dark Green - Gnome-look.org and stripping it down to the basic Adwaita and now trying to tweak the css files to shrink the tabs. It has the advantage of properly dealing with the hover issue but I do not know how although I do know it does it through scss files.

Maybe when I have nothing else to do (ha ha) or we get our first snow storm I will devote more time to the issue.

1 Like
#4

In looking up your complaint, it seems like several people share that pet peeve.

But then a Firefox theme development page popped up that has a great illustration. That page might be a good rough model for a Gramps article.

themes_components_annotations
themes_components_annotations1521×1065 140 KB

#5

I have modified the Adwaita Dark Green theme and stripped it down to the basic Adwaita theme used by Gramps. The only changes I have made are to the Tabs and how they display.

tab changes
tab changes1281×878 105 KB

I have removed the previous theme and replaced it with this new theme. Anyone interested can download it from my GitHub.

It is designed to work with the Themes addon

At this time my changes do not apply to the Dark theme. I am not a dark theme user so it may be awhile before I get to changing those tabs.

2 Likes
#6

I have made additional tweaks to the light theme and made adjustments to the Tabs in the Dark theme.

I did not make as many changes to the dark Tabs that I made to the light. Moving the color swatch to the top was not viable as it got lost and the dark theme would hide many nuances seen in the light. The main goal was to shrink the size of the tabs so viewing the person’s edit window, all tabs are visible.

Enjoy!

2 Likes
#7

Personaly, I’ll never do that.

  • The themes are not related to gramps.
  • The themes are Gtk dependant and you’ll have problems if Gtk modify some theme functionality.
  • You’ll need to modify the theme for each gramps version.
#8

Now, related issue, trying to install new theme. I understand the process, downloaded and extracted the file for theme that looked like I might like it. The issue is in the instructions it says to put resulting folder in the following file
" C:\Users\ user \.themes "
So, I don’t have such a folder. A guick Google search says it is here
C:\Users\yourusername\AppData\Local\Microsoft\Windows\Themes
installing there does nothing. so do I create the .themes folder in my user file? Or am I too far lost to help?

Experimental FilterParams add-on, Dark themes and Glade
#9

Ok, so I answered my own question, this is exactly what I did and it worked perfectly

2 Likes
#10

I updated the theme’s readme. Once the update is done on the Gramps wiki I’ll update it telling the new user to create the folder.

2 Likes
#11

Dave,

Could you look through the theme and suggest CSS elements that Kari @kku could leverage for the extra colors in the FilterParams add-on?

The text is under CSS control but the 2 extra background colors don’t seem to be. They render the text unreadable when using a Dark theme. But… the question is: what elements would consistently give contrast to the text?:
Screenshot 2021-12-06 233357

image
image656×568 35.3 KB

#12

The problem is the colors selected do not show the light text color of the dark theme. So the colors of the background needs to be able to show both;

Here is a site that allows selecting the various values to set colors. Notice the scale is 0 to 255. The scale used by the gdk code is 0.0 to 1.0.

I have not found the same type of tool for a 0 to 1 scale. But using 100 and 150 as the main numbers, dividing by 255; I substituted the numbers in the code.

Original code

    self.categories_translated = [_(cat) for cat in self.categories]
    self.colors = [
         Gdk.RGBA(0.9,0.9,0.99, 0.999),
         Gdk.RGBA(0.9,0.99,0.9, 0.999),
         Gdk.RGBA(0.99,0.99,0.9, 0.999),
         Gdk.RGBA(0.99,0.9,0.9, 0.999),
         Gdk.RGBA(0.9,0.99,0.99, 0.999),
         Gdk.RGBA(0.99,0.9,0.99, 0.999),
    ]

became

    self.categories_translated = [_(cat) for cat in self.categories]
    self.colors = [
         Gdk.RGBA(0.39,0.39,0.58, 0.999),
         Gdk.RGBA(0.39,0.58,0.39, 0.999),
         Gdk.RGBA(0.58,0.58,0.39, 0.999),
         Gdk.RGBA(0.58,0.39,0.39, 0.999),
         Gdk.RGBA(0.39,0.58,0.58, 0.999),
         Gdk.RGBA(0.58,0.39,0.58, 0.999),
    ]

Seems to work for both light and dark themes. But you and @kku can play around with the palette.

#13

I don’t think that making the add-on use hard-coded colors more compatible with a variety of background & foreground colors is the right approach.

He probably wants to be having 1 of the 2 extra colors referencing something like the menubar background color CSS elements. And the other color referencing a different background color.

The question becomes WHICH pre-defined elements can he reference? They need to be elements that expect to have the primary text CSS element layered on top (so they will be innately contrasty) but the chosen elements need to not confuse GUI context (like a color that indicates a warning or those that focus user on the indicated object). These colors are to add grouping context, and are not a call to action.

#14

You are confusing what the addon code can manipulate and what the applied theme manipulates.

In the FilterParams code, @kku is setting the colors of the various layers of the filter components. All other colors are set by the theme the user has selected. The default in Gramps being Adwaita. Use a different theme, and all other colors and text, size of icons, shape of check boxes, etc can be changed. The color of the text is controlled by the theme. Now most will show dark text on a light theme, and white on a dark theme. There are probably themes available that makes the text color yellow or pink.

The problem as I saw it was the light text of the dark theme was being lost in the color scheme set for the filter layers. And the colors of the filter layers are the only thing set by the addon code.

#15

Although disappointed that there isn’t dynamic CSS control in add-ons, couldn’t it be done indirectly?

So there’s the default, but when a theme is defined, can’t an add-on query any named element for its attribute?

In a Selenium WebDriver thread, the following Python code was suggested:

rgb = find_element_by_class_name("bar").value_of_css_property('background-color')

There’d be some extra ugliness of a dirty flag … which would have to be monitored in order to update the color if the theme changed too.

Apparently, the line above returns a string “rgb(221, 81, 76)” that has to be parsed into values:

rgb = find_element_by_class_name("bar").value_of_css_property('background-color')

r,g,b = map(int, re.search(
             r'rgb\((\d+),\s*(\d+),\s*(\d+)', rgb).groups())
color = '#%02x%02x%02x' % (r, g, b)
#16

If there is, it is way beyond my abilities.

Think of it this way.

Gramps wants a check box with certain text and certain text in a popup tip window. That gets coded into the Gramps code.

The Theme selected by the user determines the size, shape and color of the check box and if the check mark is a check, an X or if the box is completely filled in. The theme sets the popup help window with background color, text color, does the window have a border? shadow? how big a shadow.

Remember, I can only manipulate what a real coder has dreamed up.

#17

I understand. This isn’t actually asking you to code anything.

Instead it is a question about what other named background elements are available in the Themes you’ve been tweaking.

(In my experience with CSS elsewhere, there tend to be MANY more elements named than used. And only the ones that are used tend to have Dark variation defined. Plus the Cascade design tends to vary… adding to the learning curve. So your experience with Themes will eliminate dead ends.)

With a list, we could look at the color value (in light & dark variant) and eliminate the ones that are too strident, look at the name and see which have too much contextual baggage.

Then make a recommendation of 2 named theme elements from what remains.

#18

Download and look at the the GTK.css files of various themes. NO two are a like. And if there are css elements that will accept a color, that color could be any color on the spectrum.

And I think you are making it too complicated. The only themes you need to make sure are compatible with your addon are the Adwaita light and dark themes used by Gramps.

#19

I agree completely! Just looking for 2 named Adwaita elements that change color and aren’t used in the dialog already.

#20

Thanks all. I think I will modify FilterParams to use the colors suggested by DaveSch - as they work for both light and dark themes.

Anyway, I am a bit confused because there seems to be two places where one can select “dark colors”: the “Preferences > Colors” tab and the “Preferences > Theme” tab.

1 Like
#21

This is not the solution. As you have several background color for a widget. This depends on the Gtk.StateFlags (Gtk.StateFlags)

I recently had to use this when adding colors to a popup menu ( See New way to add tags in GraphView by SNoiraud · Pull Request #519 · gramps-project/addons-source · GitHub )

Depending on the background brightness, I set the text color to either white, either black.

1 Like
#22

The Themes is a recent addon. Before that, to use anything other than the light or dark Adwaita was cumbersome. With the addon, you can download and use virtually any theme out there many with the dark theme option. But as not everyone installs all addons, the dark option on Colors is still needed.

1 Like