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?
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.