ibus customized pre-edit themes

[qiangzhao]

Project Title: ibus pre-edit window support customized theme

**Description: The original skin function of ibus in different desktop environments is based on GNOME-shell and GTK, we need to inherit and customize it, so that users can freely choose the style they need.

**Deliverable: the modification to different desktop components to accomplish the target.

Mentor: @epico @hillwoodroc @qiangzhao

Skills: C, C++, Python3

Skill Level: Medium

Get started:

IBus 1.5 API: https://github.com/ibus/ibus/wiki
GTK: https://gitlab.gnome.org/GNOME/gtk/
Gnome-shell: https://gitlab.gnome.org/GNOME/gnome-shell
Example of Gnome-shell theme: https://www.gnome-look.org/p/1291819/

[HollowMan6]

Hi, I'm a previous year GSoC applicant from #131, and I'm interested in this project.

After searching on the Google, I noticed that currently ibus's theme is determined by the desktop theme rime/ibus-rime#77, and we can't change it manually unless you use Gnome and change it with gnome-shell.

And another workaround to change the theme is to act in this way in Gnome: https://blog.csdn.net/weixin_30414245/article/details/96607094

So my question is, since this functionality hasn't been realized in ibus, do we just add an API for changing themes in ibus in this project? If so, currently I have no idea how to realize it, since the theme is directly determined by desktop theme. Can you give me more guidance?

[HollowMan6]

I've got some ideas from IBus Tweaker: https://extensions.gnome.org/extension/2820/ibus-tweaker/
https://github.com/tuberry/ibus-tweaker

We can make a GNOME Shell Extension that reads from the skin files (it can be rime-like color schemes https://github.com/rime-aca/color_schemes) located in the specified folder (e.g. ~/ibus_themes), users can choose a theme from the list or just follow the original GNOME theme.

[epico]

I think we will use the current gtk3 theme and gnome-shell theme for this feature.

[HollowMan6]

I think we will use the current gtk3 theme and gnome-shell theme for this feature.

OK, I see. So combining user-theme and ibus-tweaker will make a perfect demo. I'll try this.

[HollowMan6]

I have worked out a demo which successfully changes the IBus theme with user's current gnome-shell theme, it can also support additional functions such as customizing IBus for orientation, font and input mode auto-switch: https://github.com/HollowMan6/Customize-IBus

The extension has been sent to GNOME Shell Extension store for review (Currently it may not be available): https://extensions.gnome.org/extension/4112/customize-ibus/

Please suggest any changes if applicable @epico @hillwoodroc @qiangzhao

Cheers!

e.g.

Seen as the picture below for a example. User currently choose vim-light-doder for gnome-shell in User Themes, which is a light mode theme, while IBus uses vim-dark-doder theme chosen by user in Customize IBus, which is a dark mode theme. The pre-edit window of ibus-pinyin now uses the dark theme instead of light theme.

Realization

When user chooses a theme from the list, this extension will first read the theme CSS file, extract the IBus related style classes (.candidate-*), then write it to extension's stylesheet.css. Finally restart the GNOME-shell.

NOTE:

1. Recommend to use X11. If you change theme under Wayland, all your current work may be lost.
2. Tested on Fedora 33, GNOME-shell 3.38.

To-do

• Import from ibus-tweaker and remove features unrelated to IBus.
• Read from user themes and apply only for ibus.
• Merge the two functions.

[HollowMan6]

Hi! I've had my proposal shared with https://drive.google.com/file/d/1a0vlrJAsqupYpBZtac9AYjAOspRQIYhw/view?usp=sharing, hope to get some feedback from the community and mentors @epico @hillwoodroc @qiangzhao

[epico]

@HollowMan6 Could you try some gnome-shell theme with customized background image?

[HollowMan6]

@HollowMan6 Could you try some gnome-shell theme with customized background image?

hmm, I've never seen that kind of gnome-shell theme with background image for IBus candidate window before, can you provide some example?

[epico]

URL: https://www.gnome-look.org/p/1291819/

[HollowMan6]

URL: https://www.gnome-look.org/p/1291819/

I knew this theme earlier since it's provided in the description part.

IBus 1.5 API: https://github.com/ibus/ibus/wiki
GTK: https://gitlab.gnome.org/GNOME/gtk/
Gnome-shell: https://gitlab.gnome.org/GNOME/gnome-shell
Example of Gnome-shell theme: https://www.gnome-look.org/p/1291819/

And I've tried this theme when I started to do this idea, it was problematic when I was trying on Fedora 33, GNOME 3.38. Now this gnome-shell theme seems to still be problematic with displaying IBus candidate window correctly and with no background image showing on Fedora rawhide, GNOME 40 changed using the official user theme extension.

@epico Does this theme display IBus candidate window correctly on your computer, what version of GNOME-shell do you use?

[HollowMan6]

I'm able to fix this theme by adding those style code to the gnome-shell.css

  background: url("assets/bg.png");
  background-repeat:no-repeat;
  background-size:cover;

So I can tell that my extension can fit such kind of themes since the extension just copies the whole IBus related style blocks to the stylesheet.css.

If we want to add a functionality to change background image to https://github.com/HollowMan6/Customize-IBus, just write the code to modify the .candidate-popup-content class in my extension's stylesheet.css and change the background url into user wanted image url, and everything will then works fine and it's easy to realize.

[HollowMan6]

The customizing IBus background picture functionality has been added into my extension for GNOME 40: openSUSE/Customize-IBus@1e00e3e

[epico]

@HollowMan6 Great, thanks! :)

[hillwoodroc]

Looks great!

[epico]

@HollowMan6 Could you consider to split this extension into theme conversion tool and import ibus theme extension?

[HollowMan6]

@HollowMan6 Could you consider to split this extension into theme conversion tool and import ibus theme extension?

Do you mean by making a script in python or shell which allow users to select from the GNOME theme CSS file, then extract the IBus related style classes (.candidate-*), finally write it to another stylesheet?

And then modify the current extension to accept the user given stylesheet? @epico

[epico]

Do you mean by making a script in python or shell which allow users to select from the GNOME theme CSS file, then extract the IBus related style classes (.candidate-*), finally write it to another stylesheet?

Right, we can use Python or JavaScript to write the conversion tool, and maintain it in a separate repo.

And then modify the current extension to accept the user given stylesheet? @epico

Right, the import theme extension can import the modified theme file.

[HollowMan6]

OK, thanks! I'll do these jobs during GSoC coding period.

[HollowMan6]

I’ve created a project for changing the IBus GTK theme in a non-GNOME Shell desktop environment using Python: https://github.com/HollowMan6/IBus-Theme , later during GSoC coding period I can merge the above theme conversion tool for GNOME into it to make a complete project.

Tested on XFCE:

[HollowMan6]

Hi! Glad to hear that I'm accepted by GSoC 2021! I have made a lot of progress before the results are announced and have added quite a few features for my Customize IBus extension. Here's the repos collection: https://github.com/IBus-Customize . Hope to get some feedback. Issues are welcome!

And here's a guideline for using Customize IBus (in Chinese) : https://blog.csdn.net/qq_18572023/article/details/116331601

[epico]

Look forward to work on this feature with you during GSoC! 🙂

[AKACHI-4]

Hello people's i am a new comer can u explain me little bit more bcz now it is bit tough to me to understand it ....

.

[HollowMan6]

@AKACHI-4 I guess you have to find another one as this is an idea for GSoC 2021, not for this year.

[AKACHI-4]

@HollowMan6 okay thanku

[qiangzhao]

close for GSOC 2022 as offline discussion.