Home > front end >  Linux - Synchronising tkinter GUI background and foreground colors with system theme colors
Linux - Synchronising tkinter GUI background and foreground colors with system theme colors

Time:11-10

I like to create a tkinter GUI with background and foreground colours that are similar to the system's theme background and foreground colours. How do I do this via python and tkinter?

For example, I tried:

>>> root = tk.Tk()
>>> color = root.cget('background')
>>> print(f'color={color}')`
>>> color=#d9d9d9

#d9d9d9 is light-greyish in colour; it is different to the blackish colour used by the dark Yaru theme that is in use.

In general, when creating a tkinter GUI, I want the GUI to be able to discover the system background and foreground colours. How should I do this via python and tkinter?

CodePudding user response:

On an X window system, the color names are defined by the X server. You might be able to locate a file named xrgb.txt which contains a list of color names and the corresponding RGB values. On Windows and Macintosh systems, the color name table is built into Tk.

Effbot-webarchiv

CodePudding user response:

This answer is what I had discovered after trying the instructions described in this Reference. Ubuntu 20.04 distro uses the gnome display manager and its appearances are defined by gnome-shell theme that are stored in CSS format. To access them, the gresource command has to be used to extract it.

Steps:

Firstly, make a copy of /usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresource, e.g.:

$ cp /usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresource ~/tmp
$ cd ~/tmp.

Next run the following command. From the command output, identify the CSS file of interest. In my case, it is /org/gnome/shell/theme/Yaru-dark/gnome-shell.css.

$ gresource list gnome-shell-theme.gresource
/org/gnome/shell/theme/Yaru-dark/gnome-shell-high-contrast.css
/org/gnome/shell/theme/Yaru-dark/gnome-shell.css
/org/gnome/shell/theme/Yaru/gnome-shell-high-contrast.css
/org/gnome/shell/theme/Yaru/gnome-shell.css
/org/gnome/shell/theme/calendar-today.svg
/org/gnome/shell/theme/checkbox-dark.svg
/org/gnome/shell/theme/checkbox-focused-dark.svg
/org/gnome/shell/theme/checkbox-focused.svg
/org/gnome/shell/theme/checkbox-off-dark.svg
/org/gnome/shell/theme/checkbox-off-focused-dark.svg
/org/gnome/shell/theme/checkbox-off-focused.svg
/org/gnome/shell/theme/checkbox-off.svg
/org/gnome/shell/theme/checkbox.svg
/org/gnome/shell/theme/dash-placeholder.svg
/org/gnome/shell/theme/dmb_trees.jpg
/org/gnome/shell/theme/gdm3.css
/org/gnome/shell/theme/icons/scalable/actions/pointer-double-click-symbolic.svg
/org/gnome/shell/theme/icons/scalable/actions/pointer-drag-symbolic.svg
/org/gnome/shell/theme/icons/scalable/actions/pointer-primary-click-symbolic.svg
/org/gnome/shell/theme/icons/scalable/actions/pointer-secondary-click-symbolic.svg
/org/gnome/shell/theme/icons/scalable/status/eye-not-looking-symbolic.svg
/org/gnome/shell/theme/icons/scalable/status/eye-open-negative-filled-symbolic.svg
/org/gnome/shell/theme/icons/scalable/status/keyboard-caps-lock-filled-symbolic.svg
/org/gnome/shell/theme/icons/scalable/status/keyboard-enter-symbolic.svg
/org/gnome/shell/theme/icons/scalable/status/keyboard-hide-symbolic.svg
/org/gnome/shell/theme/icons/scalable/status/keyboard-layout-filled-symbolic.svg
/org/gnome/shell/theme/icons/scalable/status/keyboard-shift-filled-symbolic.svg
/org/gnome/shell/theme/icons/scalable/status/message-indicator-symbolic.svg
/org/gnome/shell/theme/no-events.svg
/org/gnome/shell/theme/no-notifications.svg
/org/gnome/shell/theme/pad-osd.css
/org/gnome/shell/theme/process-working.svg
/org/gnome/shell/theme/toggle-off-dark.svg
/org/gnome/shell/theme/toggle-off-hc.svg
/org/gnome/shell/theme/toggle-off.svg
/org/gnome/shell/theme/toggle-on-dark.svg
/org/gnome/shell/theme/toggle-on-hc.svg
/org/gnome/shell/theme/toggle-on.svg

To extract that CSS file, run this command:

gresource extract gnome-shell-theme.gresource /org/gnome/shell/theme/Yaru-dark/gnome-shell.css > output_yaru_dark.css

Using any text editor, I was able to view output_yaru_dark.css to find the global background colour is defined under:

/* Global Values */
stage {
  font-size: 11pt;
  color: #3D3D3D; } <--- global background colour for the Yaru theme.
  • Related