diff --git a/configure.ac b/configure.ac index 6e3e72d0d2..b6cb64056d 100644 --- a/configure.ac +++ b/configure.ac @@ -3142,6 +3142,7 @@ icons/Legacy/Makefile icons/Symbolic/Makefile icons/hicolor/Makefile themes/Makefile +themes/Light/Makefile themes/System/Makefile data/Makefile data/brushes/Makefile diff --git a/devel-docs/README.md b/devel-docs/README.md index 9b6b297bd2..201c9faa65 100644 --- a/devel-docs/README.md +++ b/devel-docs/README.md @@ -236,7 +236,7 @@ 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 +Finally you can look at our existing themes, like 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 diff --git a/themes/Light/Makefile.am b/themes/Light/Makefile.am new file mode 100644 index 0000000000..52acefffa6 --- /dev/null +++ b/themes/Light/Makefile.am @@ -0,0 +1,7 @@ +## Process this file with automake to produce Makefile.in + +themedatadir = $(gimpdatadir)/themes/Light + +themedata_DATA = gimp.css + +EXTRA_DIST = $(themedata_DATA) diff --git a/themes/Light/gimp.css b/themes/Light/gimp.css new file mode 100644 index 0000000000..87aef4e22f --- /dev/null +++ b/themes/Light/gimp.css @@ -0,0 +1,312 @@ +/* A light theme for GIMP 3.0 */ + +/* Hint for debugging themes: + * first enable the GTK inspector with + gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true + * then (after restarting GIMP) call it up with ctrl+shift+i + * or from GIMP's UI: File > Debug > Start GtkInspector + */ + +@import url("../System/gimp.css"); + +* { + /* Default text color; needed for e.g. the Prefs dialog title area, + * which doesn't have any more specific way to style it. + */ + color: black; +} + +#image-menubar, GtkImageMenuItem { + background-color: rgb(235,235,235); + color: black; +} + +/* TreeViews, e.g. in a file picker or the Prefs dialog */ +.view { + background-color: rgb(250,250,250); + color: black; +} + +.view:selected { + background-color: rgb(220,220,220); + color: black; +} + +/* The main image window before it has an image in it, + * and the buttonbar along the bottoms of dialogs. + * Foreground color here is the text color, not the Wilber color. + * background-color and background here are ignored. + */ +GimpDisplayShell, GimpDock, .dialog-action-box, .dialog-vbox { + color: rgb(100,100,100); +} + +/* Foreground color for the big Wilber in the empty image window. + * Again, background-color and background here are ignored. + */ +#gimp-canvas { + color: rgb(100,100,100); +} + +/* The drop target at the top with the mini wWlber. + * Setting background-color here works, but setting color doesn't affect + * the color of the drawn Wilber. + */ +#gimp-internal-dock-2 frame .flat { + background-color: rgb(220,220,220); +} + +/* GtkTextView */ +textview text, textview { + background-color: rgba (184, 184, 184, 0.5); + color: black; +} +/* End GtkTextView */ + +combobox window.popup, combobox window { + background-image: none; + background-color: rgb(220,220,220); + color: black; +} + +combobox box, combobox box.linked, combobox button { + background-color: rgb(235,235,235); + color: black; + background-image: none; + border-color: rgb(185,185,185); +} + +/* Get rid of the outline around all tabs in the gimpcolordialog */ +GimpColorNotebook .frame { + border-color: rgb(235,235,235); +} + +/* Color history buttons in the color chooser. + * The selector GimpColorHistory button gets the color buttons + * but not the + button; GimpColorSelection gets both. + */ +GimpColorSelection button { + background: rgb(220,220,220); + border: 1px solid rgb(185,185,185); + color: black; +} + +GimpColorSelection button:hover { + background: rgb(250,250,250); +} + +/* The tabs above the color selector */ +notebook stack { + background-color: rgb(235,235,235); +} + +/* Use this to make a border or padding around each tab */ +notebook header tabs tab { + padding: 1px; + border: 1px solid rgb(200,200,200); +} + +/* The underline for selected tabs */ +notebook header tabs tab:checked { + background-color: rgb(190,190,190); + margin: 0; + box-shadow: 0 -4px rgb(180, 180, 180) inset; +} + +notebook header tabs tab:hover { + background-color: rgb(250,250,250); +} + +/* The background of many dialogs, e.g. Preferences and gimpcolordialog */ +.vertical { + color: black; + background-color: rgb(235,235,235); + background-image: none; +} + +/* Background for many button bars and dialog titles. + * Also, unexpectedly, controls the prefs "Reload Current Theme" button content. + */ +.horizontal { + color: black; + background-color: rgb(235,235,235); +} + +/* Text buttons, e.g. the main buttons at the bottoms of dialogs, + * 0..100 and 0..255 at the top of gimpcolordialog, + * where they're inside a GimpColorSelection + */ +.text-button { + color: black; + background-color: rgb(235,235,235); + background-image: none; + font-weight: normal; +} + +.text-button:hover { + background-color: rgb(250,250,250); +} + +.text-button:checked { + background-color: rgb(250,250,250); + font-weight: bold; +} + +/* .flat covers the tool buttons and the buttons at the bottom + * of the Toolbox window. +*/ + +.flat { + background-color: rgb(235,235,235); + color: black; +} + +.flat:checked { + background: rgb(240,240,240); +} + +.flat:hover { + background: rgb(250,250,250); +} + +scrollbar { + background-color: rgb(235,235,235); +} + +/* +Worth trying for always-visible scrollbar: +https://stackoverflow.com/questions/52414202/gtkscrolledwindow-how-to-always-show-the-overlay-scrollbar +Doesn't seem to work here, though. + */ +scrollbar trough { + background: rgb(250,250,250); + +} + +scrollbar slider { + background: rgb(110,110,110); + border: 2px solid rgb(220,220,220); +} + +notebook header { + background-color: rgb(235,235,235); +} + +GimpRuler { + background-color: rgba(220,220,220, 0.3); +} + +entry { + background-color: rgb(250,250,250); + color: black; +} + +entry selection { + background: rgb(220,220,220); +} + +paned separator { + background-image: none; + color: rgb(220,220,220); + background-color: rgb(220,220,220); +} + +.view button { + background-color: rgb(245,245,245); + color: black; +} + +button:disabled { + color: rgb(200,200,200); +} + +/* Spinbuttons: there are two kinds: + * spinbutton, spinbutton button + * e.g. the "width" field in the New Image dialog. + * spinbutton button.down, spinbutton button.up can be styled separately, + * as can spinbutton entry. + * + * GimpSpinScale also has button.up, button.down and entry under it, + * plus GimpSpinScale entry progress. + * + * Mostly the inherited values seem pretty good for both of these, + * so they're not overridden. + */ + +GimpSpinScale entry progress { + background-color: rgb(220,220,220); + border-width: 0px; + border-radius: 3px; +} + +/* Checkboxes */ +checkbutton check { + background-image: none; + background-color: rgb(240,240,240); + border: 1px solid rgb(185,185,185); +} + +checkbutton check:checked { + color: black; +} + +/* Some plugins have radio buttons, e.g. Fractal Explorer */ +radio { + background-image: none; + background-color: rgb(240, 240, 240); + border: 1px solid rgb(185,185,185); + color: black; +} + +/* The border around a tooltip */ +.background { + background-color: rgb(220,220,220); +} + +/* For dropdown menus (e.g. "px" when creating a new image */ +#gtk-combobox-popup-menu { + background-color: rgb(235,235,235); + color: black; +} + +/* Top menu items */ + +/* The top menu item itself: File, Edit ... */ +menuitem menuitem { + color: black; + background: rgb(240,240,240); +} + +/* A top (File, Edit) menubar item when its menu is expanded. */ +menubar > menuitem:hover { + color: black; + background: rgb(250,250,250); +} + +menubar *:disabled { + color: rgb(110,110,110); +} + +menuitem *:hover { + color: black; + background: rgb(250,250,250); +} + +/* Sidebar in File > Open */ + +/* The background to either side of the directory buttons. + * The color of the buttons themselves comes from somewhere else. + */ +.sidebar-row, .sidebar-row * { + background-color: rgb(220,220,220); +} + +.sidebar-row:selected, .sidebar-row:selected * { + background-color: rgb(250,250,250); +} + +.sidebar-row:hover, .sidebar-row:hover * { + background-color: rgb(235,235,235); +} + + diff --git a/themes/Makefile.am b/themes/Makefile.am index 66817c9771..c7ca6e36c8 100644 --- a/themes/Makefile.am +++ b/themes/Makefile.am @@ -1,3 +1,3 @@ ## Process this file with automake to produce Makefile.in -SUBDIRS = System +SUBDIRS = System Light diff --git a/themes/meson.build b/themes/meson.build index 1236f7a653..8f00a36c66 100644 --- a/themes/meson.build +++ b/themes/meson.build @@ -1,6 +1,6 @@ themes = [ - 'System', + 'System', 'Light', ] foreach theme : themes