Custom Theme v2

[chaitanya-lakkundi]

[ UPDATE ]

1. A new plugin name custom_theme is provided.
2. The plugin searches ~/.local/share/kupfer i.e data directory for CSS files.
3. Various themes are provided as options.
4. Themes are instantly applied when the user choses one of the options.

Example themes (CSS files) are given here

[khurshid-alam]

@chaitanya-lakkundi

For list-view

#kupfer-list-view {
  background-color: @theme_bg_color;
  color: white;
}


#kupfer-list-view:selected {
  background-color: @theme_selected_bg_color;
  color: @theme_selected_fg_color;

}

[chaitanya-lakkundi]

Will this method work in other desktop environments ? Like xfce ?

[khurshid-alam]

Of course.

[bluss]

Thanks for the PR!

Variables like @theme_selected_fg_color are in fact not entirely portable, a theme may not define those at all, which is a very tricky issue. I wasn't able to work around the instance where kupfer is using something like that by default.

What I am not sure of here is if the given light/dark theme definitions are enough. I suspect they are not, and the result will be a mix of the user's selected theme and the light/dark css file. I don't claim this is easy to fix, I would like to find someone who has solved this before.

[chaitanya-lakkundi]

I agree with you on the point that , the given definitions of light/dark themes may not be sufficient and may require some other definitions.

What I have ensured in my PR is that, there is scope for any changes to be done easily. That is the reason why I am using different CSS files for different themes.

I think we can still resolve this issue by providing supplementary definitions.

[khurshid-alam]

Variables like @theme_selected_fg_color are in fact not entirely portable, a theme may not define those at all, which is a very tricky issue.

Right. It could simply be @selected_fg_color (which is more common) or hard-coded rgb(255,255,255) one, but if Kupfer already defines those colors and then use it under style-sheet, then if a third-party theme doesn't define it, it will simply fall back using kupfer's default color scheme (light or dark).

What I am not sure of here is if the given light/dark theme definitions are enough. I suspect they are not, and the result will be a mix of the user's selected theme and the light/dark css file.

Yes. They are not enough as it is for every other gtk-3 apps. That's why I propose to use @fg_color & @bg_color, @base_color instead of hard-coded colors for them. As per my knowledge almost all gtk3 themes use it. That way it will match the user's theme more.

However if you do decide to set hard-coded value for fg/bg/base color, It will be up to you.

[bluss]

If we want to just stick to the theme colors, then we can also just set the prefer dark variant or not boolean.

This seems neat as a way to switch between different CSS's though.

I would like to structure it like this: One default style.css file that is always applied. It applies some important style things that makes the preedit field use no space when it's hidden and so.

Then, a selector that loads one out of several css files. We can pick these from a specific directory, that makes them user installable(?). It looks like we can use Gtk.StyleContext.remove_provider_for_screen to remove css tweaks again, so that we don't need to restart.

[bluss]

Also here we can consider if the custom css part maybe is best as a plugin

[chaitanya-lakkundi]

The plugin provided by @bluss does the work well. I am impressed by the simplicity of the plugin provided. Closing this PR.

[bluss]

I thought that picking custom css would be a separate and additional thing.

[chaitanya-lakkundi]

Of course. Should I give another PR by integrating the plugin and custom css concepts ?

[bluss]

Let's be clear what the real goal is. I'm fine if this goal comes from your ideas.

We've got some things that are already solved:

• Dark Theme (GtkSettings prefer dark theme)
• User CSS (gtk.css)

For me, I want Kupfer to be user themable. I can formulate my goals as project maintainer:

• Default Kupfer Look should not change
• There should be no new bugs related to environments and particular gtk themes where Kupfer already works
• Users should be able to design themes that they like, and share them, without involving me

It sounds like from you and me that we need some way to rearrange the widgets in Kupfer, everything that's not reachable from css.

• Select Widget Layout

And maybe you want that it's easy to install and select custom kupfer css

• Plugin or Preference to Select CSS

Now is it a goal that Selecting CSS should also change the Widget Layout? That seems logical. So those two want to be combined somehow. But selecting CSS is easy, we basically know how to do that now I think. So it remains to work on the Select Widget Layout part.

[bluss]

I don't want to expose the exact widget layout (Like a .ui xml file), because then we can't change kupfer at all without breaking themes.

[chaitanya-lakkundi]

• Select Widget Layout

Can we do something like this in browser.py -> class Interface() -> L1144

def get_widget(self):
    #Selects which get_widget function to execute based on User Setting.
    #The user selects this option through a plugin.
    layout = #extract from settings
    if layout=='default':
        vbox = self.get_widget1()
    elif layout=='minimal':
        vbox = self.get_widget2()
    return vbox

By hard coding layouts, we need not expose the complete UI in XML file.

• Plugin or Preference to Select CSS

The user would have an option to select his preferred layout and CSS separately through a plugin, so that we can extend the same CSS file to multiple layouts.

[bluss]

This sounds good to me.

CSS should be able to adjust margins and paddings around everything, so ideally only the layout (H vs V boxes and so on needs to be changed).

I think we have layout options like:

• Panes layout H/V (Current is Horizontal: primary object, action, indirect object)
• Match layout H/V (Current is Vertical: Icon and its name)

[chaitanya-lakkundi]

I have reopened this PR. I will provide some more commits in the coming days. Will it be okay if a layout type hides a pane ? eg. self.action.hide()

I tried to list some shortcomings of hiding a pane:

1. When tab key is pressed after typing, then the focus shifts from search pane to action pane. But, the action pane is hidden and it causes some unintended problems.

We again need to handle the keypress on changing the layout which is tedious. Can there be any other solution to this problem (to prevent the tab key from shifting focus)?

[bluss]

Hiding a pane, why?

[bluss]

It should be possible to adapt keystroke handling to not showing the action pane, but I'm not very fond of the idea of hiding it in general. Maybe a layout / theme can make it smaller instead?

I had the idea #77 in the back of my mind, which involves temporarily hiding the action pane.

[bluss]

Here's a QS theme that deemphasizes the action pane without hiding it (“Cube”)

http://tonyarnold.com/2006/07/07/quicksilvers-new-cube-ui.html

[bluss]

Hi, is this ready for feedback?

[chaitanya-lakkundi]

Hi! No, this is not the final version for feedback.
I have made some more changes which would reflect in my upcoming commits.

But the current version is fairly ready for suggestions. I am currently very busy. Hence , it is causing delay.

[bluss]

Ok, no problem, there is no rush from my side.

[chaitanya-lakkundi]

• I am facing a problem. When I select Dark option from plugin settings, the theme gets applied immediately. But when I change the theme back to Light, it is not getting applied in the same running instance ( need to restart kupfer).

• Another question is, should it be like the user types in the CSS file and then selects "Custom" option in plugin, (OR) we provide an option to select the colour of individual elements with the help of Gnome Color Picker ( wizard like, guided selection )?

• It is easy to provide an option to edit the CSS file directly. But how can the "guided colour selection" be provided ?

[chaitanya-lakkundi]

Hi @bluss !

I have completed the custom_theme plugin. Please review it and provide your suggestions.
The css files required are presented as a gist.
click here for css files

These files need to be copied into ~/.local/share/kupfer directory.
I have referenced to this directory using config.get_data_home() function.

Please provide your valuable feedback.

[khurshid-alam]

Does this solve round corner issue?

[chaitanya-lakkundi]

No, this does not solve the round corner issue.

This PR is meant only to enable the user to select and apply any custom theme.
The default directory containing various themes (css files) is : ~/.local/share/kupfer
I have provided some test themes here .

Please review @khurshid-alam .