c32e803679
Until now, we were following a similar concept of color schemes as what most OS are doing. For instance, Freedesktop recently introduced a tri-state color scheme of "Prefer Light", "Prefer Dark" and "Default", the latter being either whatever the software prefers (e.g. we prefer either Dark or Gray for graphics software usually) or what the system prefers. See #8675. Until now, with GTK, we only had a boolean "prefer dark" setting through the "gtk-application-prefer-dark-theme" settings. There is not even a "prefer light". Nevertheless for graphics application, there is clearly a third case (fourth if we added a "follow system color preferences" which we don't implement for now): gray mode and in particular middle gray. Having a middle gray UI is often considered a necessity when working on colors in order to protect our perception of color from being influenced by surrounding UI. To fill this need, we were proposing a Default vs. a Gray theme in GIMP, but this was a bit confusing and felt illogical, as discussed on IRC some time ago. Also depending on whether you chose "prefer dark" or not for the gray theme, this one was itself 2 themes, which made things odd and harder to work on. Instead this commit: - adds a color scheme concept in GIMP with 3 variants so far: light, gray and dark. A possible fourth (future) variant might be to follow the system preference (do all OS provide such a queriable option?). - Our Gray theme is merged into Default (as the gray color scheme variant). - Custom themes can add the following CSS files: gimp-light.css, gimp-gray.css, gimp-dark.css which are the base file for their respective scheme. gimp.css is still used as a fallback though it is not necessary (our own Default theme does not provide a gimp.css anymore). Custom themes don't have to provide all 3 variants. A theme can just provide one or 2 variants if it only wants to support 1 or 2 use cases.
76 lines
2.8 KiB
CSS
76 lines
2.8 KiB
CSS
/* Light variant for the Default 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
|
|
*/
|
|
|
|
/* Basic foreground, background and border colors. */
|
|
@define-color fg-color black;
|
|
@define-color bg-color rgb(235,235,235);
|
|
@define-color border-color rgb(220,220,220);
|
|
|
|
/********* Variants for foreground colors *********/
|
|
|
|
/* In places where we want not as strongly contrasted text. */
|
|
@define-color dimmed-fg-color rgb(100,100,100);
|
|
/* Disabled items, such as disabled actions in menus. */
|
|
@define-color disabled-fg-color rgb(110,110,110);
|
|
/* Disabled buttons are dimmed even more (text needs to still be
|
|
* readable, but buttons design are usually enough. */
|
|
@define-color disabled-button-color rgb(200,200,200);
|
|
|
|
/********* Variants for background colors *********/
|
|
|
|
/* Background color for hovered items to "stick out". */
|
|
@define-color hover-color rgb(250,250,250);
|
|
/* Background color when we want widgets-in-widgets to differenciate. It
|
|
* will usually be "less extreme", i.e. darker on a light theme, or
|
|
* lighter on a dark theme.
|
|
*/
|
|
@define-color widget-bg-color rgb(220,220,220);
|
|
/* Color for selected items, in particular when their usual background
|
|
* color is @widget-bg-color or @bg-color. It will usually be ligher on
|
|
* a light theme, or darker on a dark theme.
|
|
*/
|
|
@define-color selected-color rgb(250,250,250);
|
|
|
|
/* Background color more extreme in the theme tendency, i.e. darker on a
|
|
* dark theme, ligther on a light theme. */
|
|
@define-color extreme-bg-color rgb(250,250,250);
|
|
/* Color for a selected item to "stick out" when @extreme-bg-color is
|
|
* used. It will usually be darker than @bg-color on a light theme,
|
|
* ligher on a dark theme.
|
|
*/
|
|
@define-color extreme-selected-color rgb(220,220,220);
|
|
|
|
/********* Variants for border colors *********/
|
|
|
|
@define-color strong-border-color rgb(200,200,200);
|
|
@define-color stronger-border-color rgb(185,185,185);
|
|
/* Border color for the edge of certain widgets. This needs
|
|
* to be dark on light theme and very dark on dark themes */
|
|
@define-color edge-border-color rgb(185,185,185);
|
|
|
|
/********* Colors for special cases *********/
|
|
|
|
@define-color scrollbar-slider-color rgb(110,110,110);
|
|
@define-color scrollbar-trough-color rgb(250,250,250);
|
|
|
|
@define-color ruler-color rgba(220,220,220,0.3);
|
|
|
|
/*
|
|
* Paned separator handles
|
|
*/
|
|
paned.horizontal > separator {
|
|
background-image: url("ui/separator-handle-v.svg");
|
|
}
|
|
|
|
paned.vertical > separator {
|
|
background-image: url("ui/separator-handle-h.svg");
|
|
}
|
|
|
|
|
|
@import url("common-light.css");
|