dnrops
/
gimp
mirror of https://github.com/GNOME/gimp.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

themes: updated Default theme by Ville Pätsi. 

The Default theme may have been a bit too dark. Instead let's have it a
tiny bit lighter (and also foreground color a bit less white).

For now, the old "Default" dark theme doesn't disappear totally and is
moved to a "Darker" theme as we have been discussing and wondering on
whether this is prefered by some people (it is). Aryeom also thought a
darker theme may be a good idea.

Moreover Liam actually thought that losing some of the contrast
(especially with the text a tiny bit less white now) is not desired in
his case where eyes may not be as sharp as they used to. Therefore a
"High Contrast" theme may be needed.

Aryeom also suggested that sliders to choose colors could be a much more
generic solution, which might be possible yet would require more ugly
hacks generating on-the-fly theme changes (we do something similar for
dark theme choice already).

This is all work-in-progress and a result from Wilber Week 2023 work.
This commit is contained in:
Jehan 2023-05-25 02:06:07 +02:00
parent ea83d54cb1
commit a660a378ac
8 changed files with 170 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
themes/Darker/Makefile.am Normal file
View File

@ -0,0 +1,7 @@
## Process this file with automake to produce Makefile.in
themedatadir = $(gimpdatadir)/themes/Default
themedata_DATA = gimp.css gimp-dark.css
EXTRA_DIST = $(themedata_DATA)

61
themes/Darker/gimp-dark.css Normal file
View File

@ -0,0 +1,61 @@
/* Dark 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 white;
@define-color bg-color rgb(30,30,30);
@define-color border-color rgb(35,35,35);
/********* Variants for foreground colors *********/
/* In places where we want not as strongly contrasted text. */
@define-color dimmed-fg-color rgb(155,155,155);
/* Disabled items, such as disabled actions in menus. */
@define-color disabled-fg-color rgb(145,145,145);
/* Disabled buttons are dimmed even more (text needs to still be
* readable, but buttons design are usually enough. */
@define-color disabled-button-color rgb(50,50,50);
/********* Variants for background colors *********/
/* Background color for hovered items to "stick out". */
@define-color hover-color rgb(5,5,5);
/* 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(35,35,35);
/* 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(5,5,5);
/* 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(20,20,20);
/* 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,
* lighter on a dark theme.
*/
@define-color extreme-selected-color rgb(40,40,40);
/********* Variants for border colors *********/
@define-color strong-border-color rgb(50,50,50);
@define-color stronger-border-color rgb(75,75,75);
/********* Colors for special cases *********/
@define-color scrollbar-slider-color rgb(140,140,140);
@define-color scrollbar-trough-color rgb(5,5,5);
@define-color ruler-color rgba(35,35,35,0.3);
@import url("../Default/common-dark.css");

73
themes/Darker/gimp.css Normal file
View File

@ -0,0 +1,73 @@
/* 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);
/********* 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("../Default/ui/separator-handle-v.svg");
}
paned.vertical > separator {
background-image: url("../Default/ui/separator-handle-h.svg");
}
@import url("../Default/common-light.css");

6
themes/Darker/meson.build Normal file
View File

@ -0,0 +1,6 @@
files = [
'gimp.css', 'gimp-dark.css',
]
install_data(files,
install_dir: gimpdatadir / 'themes' / 'Darker')

2
themes/Default/common-dark.css
View File

@ -15,9 +15,11 @@
*/
paned.horizontal > separator {
background-image: url("ui/separator-handle-v-dark.svg");
background-color: @bg-color;
}
paned.vertical > separator {
background-image: url("ui/separator-handle-h-dark.svg");
background-color: @bg-color;
}

13
themes/Default/common.css
View File

@ -89,7 +89,7 @@ combobox window.popup, combobox window {
}
combobox box, combobox box.linked, combobox button {
background-color: @bg-color;
background-color: @widget-bg-color;
color: @fg-color;
background-image: none;
border-color: @stronger-border-color;
@ -161,7 +161,7 @@ notebook header tabs tab:hover {
*/
.text-button {
color: @fg-color;
background-color: @bg-color;
background-color: @widget-bg-color;
background-image: none;
font-weight: normal;
}
@ -311,11 +311,16 @@ GimpSpinScale entry progress {
}
/* Checkboxes */
checkbutton, radiobutton {
checkbutton, checkbutton.text-button, radiobutton, checkbutton label {
color: @fg-color;
background-color: @bg-color;
}
checkbutton:hover, checkbutton.text-button:hover, radiobutton:hover, checkbutton label:hover {
color: @fg-color;
background-color: @hover-color;
}
checkbutton check, radiobutton radio {
background-image: none;
background-color: @extreme-bg-color;
@ -422,7 +427,7 @@ headerbar:backdrop * {
/* GtkListBox widgets */
list {
background-color: @bg-color;
background-color: @widget-bg-color;
}
/* GtkSwitch buttons */

22
themes/Default/gimp-dark.css
View File

@ -8,9 +8,9 @@
*/
/* Basic foreground, background and border colors. */
@define-color fg-color white;
@define-color bg-color rgb(30,30,30);
@define-color border-color rgb(35,35,35);
@define-color fg-color rgb(220,220,220);
@define-color bg-color rgb(60,60,60);
@define-color border-color rgb(26,26,26);
/********* Variants for foreground colors *********/
@ -20,41 +20,41 @@
@define-color disabled-fg-color rgb(145,145,145);
/* Disabled buttons are dimmed even more (text needs to still be
* readable, but buttons design are usually enough. */
@define-color disabled-button-color rgb(50,50,50);
@define-color disabled-button-color rgb(100,100,100);
/********* Variants for background colors *********/
/* Background color for hovered items to "stick out". */
@define-color hover-color rgb(5,5,5);
@define-color hover-color rgb(100,100,100);
/* 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(35,35,35);
@define-color widget-bg-color rgb(42,42,42);
/* 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(5,5,5);
@define-color selected-color rgb(30,30,30);
/* 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(20,20,20);
@define-color extreme-bg-color rgb(36,36,36);
/* 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,
* lighter on a dark theme.
*/
@define-color extreme-selected-color rgb(40,40,40);
@define-color extreme-selected-color rgb(55,55,55);
/********* Variants for border colors *********/
@define-color strong-border-color rgb(50,50,50);
@define-color strong-border-color rgb(40,40,40);
@define-color stronger-border-color rgb(75,75,75);
/********* Colors for special cases *********/
@define-color scrollbar-slider-color rgb(140,140,140);
@define-color scrollbar-trough-color rgb(5,5,5);
@define-color scrollbar-trough-color rgb(60,60,60);
@define-color ruler-color rgba(35,35,35,0.3);

1
themes/meson.build
View File

@ -1,4 +1,5 @@
subdir('Default')
subdir('Darker')
subdir('Compact')
themes = [