From a660a378ac927f4d7a2a09203efc975ee5bf32f0 Mon Sep 17 00:00:00 2001 From: Jehan Date: Thu, 25 May 2023 02:06:07 +0200 Subject: [PATCH] =?UTF-8?q?themes:=20updated=20Default=20theme=20by=20Vill?= =?UTF-8?q?e=20P=C3=A4tsi.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- themes/Darker/Makefile.am | 7 ++++ themes/Darker/gimp-dark.css | 61 ++++++++++++++++++++++++++++ themes/Darker/gimp.css | 73 ++++++++++++++++++++++++++++++++++ themes/Darker/meson.build | 6 +++ themes/Default/common-dark.css | 2 + themes/Default/common.css | 13 ++++-- themes/Default/gimp-dark.css | 22 +++++----- themes/meson.build | 1 + 8 files changed, 170 insertions(+), 15 deletions(-) create mode 100644 themes/Darker/Makefile.am create mode 100644 themes/Darker/gimp-dark.css create mode 100644 themes/Darker/gimp.css create mode 100644 themes/Darker/meson.build diff --git a/themes/Darker/Makefile.am b/themes/Darker/Makefile.am new file mode 100644 index 0000000000..94269ddc4d --- /dev/null +++ b/themes/Darker/Makefile.am @@ -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) diff --git a/themes/Darker/gimp-dark.css b/themes/Darker/gimp-dark.css new file mode 100644 index 0000000000..3dd8a9c200 --- /dev/null +++ b/themes/Darker/gimp-dark.css @@ -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"); diff --git a/themes/Darker/gimp.css b/themes/Darker/gimp.css new file mode 100644 index 0000000000..210e1b1a7e --- /dev/null +++ b/themes/Darker/gimp.css @@ -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"); diff --git a/themes/Darker/meson.build b/themes/Darker/meson.build new file mode 100644 index 0000000000..9e1432ca67 --- /dev/null +++ b/themes/Darker/meson.build @@ -0,0 +1,6 @@ +files = [ + 'gimp.css', 'gimp-dark.css', +] + +install_data(files, + install_dir: gimpdatadir / 'themes' / 'Darker') diff --git a/themes/Default/common-dark.css b/themes/Default/common-dark.css index e27cba1f64..258688475b 100644 --- a/themes/Default/common-dark.css +++ b/themes/Default/common-dark.css @@ -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; } diff --git a/themes/Default/common.css b/themes/Default/common.css index e91fd2b85f..e23fffd5c9 100644 --- a/themes/Default/common.css +++ b/themes/Default/common.css @@ -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 */ diff --git a/themes/Default/gimp-dark.css b/themes/Default/gimp-dark.css index 74ad85c3d0..01a5241c53 100644 --- a/themes/Default/gimp-dark.css +++ b/themes/Default/gimp-dark.css @@ -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); diff --git a/themes/meson.build b/themes/meson.build index 222fa7a319..94b1963518 100644 --- a/themes/meson.build +++ b/themes/meson.build @@ -1,4 +1,5 @@ subdir('Default') +subdir('Darker') subdir('Compact') themes = [