[gimp] devel-docs: add some information about theming.



commit aaafa8683dd49fd5578f7c75e7378d2940b18ffc
Author: Jehan <jehan girinstud io>
Date:   Wed Feb 23 19:01:19 2022 +0100

    devel-docs: add some information about theming.
    
    Hopefully useful to get some theme makers started.

 devel-docs/README.md | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
---
diff --git a/devel-docs/README.md b/devel-docs/README.md
index b027034c17..ce083f1d0b 100644
--- a/devel-docs/README.md
+++ b/devel-docs/README.md
@@ -221,6 +221,59 @@ which can be generated from within GIMP.
 Alternatively GIMP supports the SVG Gradient format.
 
 ### Themes
+
+GTK3 uses CSS themes. Don't be fooled though. It's not real CSS in that
+it doesn't have all the features of real web CSS, and since it's for
+desktop applications, some things are necessarily different. What it
+means is mostly that it "looks similar" enough that people used to web
+styling should not be too disorientated.
+
+You can start by looking at the [official
+documentation](https://docs.gtk.org/gtk3/migrating-themes.html) for
+theme migration (from GTK+2 to 3), which gives a good overview, though
+it's far from being perfect unfortunately.
+
+Another good idea would be to look at existing well maintained GTK3
+themes to get inspiration and see how things work.
+
+Finally you can look at our only current theme, the [System
+theme](https://gitlab.gnome.org/GNOME/gimp/-/blob/master/themes/System/gimp.css).
+Note though that this `System` theme is pretty bare, and that's its goal
+(try to theme as few as possible over whatever is the current real
+system theme).
+
+TODO: for any theme maker reading this, what we want for GIMP 3.0 are at
+least the following additional themes:
+
+- a full custom theme using neutral grayscale colors with a dark and
+  light variant;
+- a mid-gray neutral theme.
+
+As a last trick for theme makers, we recommend to work with the
+GtkInspector tool, which allows you to test CSS rules live in the `CSS`
+tab. You can run the `GtkInspector` by going to the `File > Debug` menu
+and selecting `Start GtkInspector` menu item.
+
+It also allows you to find the name of a widget to use in your CSS
+rules. To do so:
+
+* Start the `GtkInspector`;
+* go on the "Objects" tab;
+* click the "target" 🞋 icon on the headerbar's top-left, then pick in
+  GIMP interface the widget you are interested to style;
+* the widget name will be displayed on the top of the information area
+  of the dialog.
+* Feel free to browse the various sections to see the class hierachy,
+  CSS nodes and so on.
+* The second top-left button (just next to the target icon) allows you
+  to switch between the details of the selected widget and the widget
+  hierarchy (container widgets containing other widgets), which is also
+  very useful information.
+
+Additionally you can quickly switch between the light and dark variant
+of a same them by going to "Visual" and switching the "Dark Variant"
+button ON or OFF.
+
 ### Icon themes
 
 Icon sets (a.k.a. "icon themes") have been separated from themes since


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]