mirror of https://github.com/GNOME/gimp.git
theme: transform the Light theme into a Default theme and add a dark…
… variant. Now with my recent code, instead of creating 2 different themes, I make it a single theme containing both a Light and Dark variant. I move all semantic logic into common.css which will be included by both variants after they set up their color definitions. For choosing the basic gray to use for the dark variant, I first looked up what is usually recommended. Most articles on the web about dark themes would cite some "Material design" project (apparently originated from Google) which makes guidelines for Android/iOS/Flutter and web applications. Their guidelines recommend #121212 ("Dark Grey") as background color. I tried, it's **really** dark. Maybe I'm just not used to it, but it feels like it might be OK for small phone "apps" which people might want to watch in the dark, but possibly not for a full grown desktop software. I don't really know, I might be wrong and some people might want to edit their pictures with such dark GUI. Anyway for now, I settled for a base background #303030, which is already quite dark, darker than Adwaita dark or than our 2.10 dark variant, but at least doesn't feel like a black hole.
This commit is contained in:
Jehan
parent
05fd811662
commit
ebbcf67dd9
|
|
@ -0,0 +1,7 @@
|
|||
## Process this file with automake to produce Makefile.in
|
||||
|
||||
themedatadir = $(gimpdatadir)/themes/Default
|
||||
|
||||
themedata_DATA = gimp.css gimp-dark.css common.css
|
||||
|
||||
EXTRA_DIST = $(themedata_DATA)
|
||||
|
|
@ -9,57 +9,6 @@
|
|||
|
||||
@import url("../System/gimp.css");
|
||||
|
||||
/* 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);
|
||||
|
||||
* {
|
||||
/* Default text color; needed for e.g. the Prefs dialog title area,
|
||||
* which doesn't have any more specific way to style it.
|
||||
|
|
@ -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(5,5,5);
|
||||
/* 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(35,35,35);
|
||||
|
||||
/********* 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("common.css");
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
/* 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);
|
||||
|
||||
@import url("common.css");
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
install_data([ 'gimp.css', 'gimp-dark.css', 'common.css' ],
|
||||
install_dir: gimpdatadir / 'themes' / 'Default')
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
## Process this file with automake to produce Makefile.in
|
||||
|
||||
themedatadir = $(gimpdatadir)/themes/Light
|
||||
|
||||
themedata_DATA = gimp.css
|
||||
|
||||
EXTRA_DIST = $(themedata_DATA)
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
## Process this file with automake to produce Makefile.in
|
||||
|
||||
SUBDIRS = System Light
|
||||
SUBDIRS = System Default
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
subdir('Default')
|
||||
|
||||
themes = [
|
||||
'System', 'Light',
|
||||
'System',
|
||||
]
|
||||
|
||||
foreach theme : themes
|
||||
|
|
|
|||
Loading…
Reference in New Issue