GNOME.org
 

[gimp] theme: transform the Light theme into a Default theme and add a dark…

commit ebbcf67dd92dd62997f41c67b6e757c3016e6c07
Author: Jehan <jehan girinstud io>
Date:   Sat Aug 20 19:45:15 2022 +0200

    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.

 themes/Default/Makefile.am                    |  7 +++
 themes/{Light/gimp.css => Default/common.css} | 51 ----------------------
 themes/Default/gimp-dark.css                  | 61 +++++++++++++++++++++++++++
 themes/Default/gimp.css                       | 61 +++++++++++++++++++++++++++
 themes/Default/meson.build                    |  2 +
 themes/Light/Makefile.am                      |  7 ---
 themes/Makefile.am                            |  2 +-
 themes/meson.build                            |  3 +-
 8 files changed, 134 insertions(+), 60 deletions(-)
---
diff --git a/themes/Default/Makefile.am b/themes/Default/Makefile.am
new file mode 100644
index 0000000000..11d6dbf8ff
--- /dev/null
+++ b/themes/Default/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 common.css
+
+EXTRA_DIST = $(themedata_DATA)
diff --git a/themes/Light/gimp.css b/themes/Default/common.css
similarity index 80%
rename from themes/Light/gimp.css
rename to themes/Default/common.css
index 161facfef5..128fcacfa7 100644
--- a/themes/Light/gimp.css
+++ b/themes/Default/common.css
@@ -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.
diff --git a/themes/Default/gimp-dark.css b/themes/Default/gimp-dark.css
new file mode 100644
index 0000000000..c6a7f345f1
--- /dev/null
+++ b/themes/Default/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(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");
diff --git a/themes/Default/gimp.css b/themes/Default/gimp.css
new file mode 100644
index 0000000000..b62c6aab11
--- /dev/null
+++ b/themes/Default/gimp.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");
diff --git a/themes/Default/meson.build b/themes/Default/meson.build
new file mode 100644
index 0000000000..78dc3f62cf
--- /dev/null
+++ b/themes/Default/meson.build
@@ -0,0 +1,2 @@
+install_data([ 'gimp.css', 'gimp-dark.css', 'common.css' ],
+             install_dir: gimpdatadir / 'themes' / 'Default')
diff --git a/themes/Makefile.am b/themes/Makefile.am
index c7ca6e36c8..384f4d0da6 100644
--- a/themes/Makefile.am
+++ b/themes/Makefile.am
@@ -1,3 +1,3 @@
 ## Process this file with automake to produce Makefile.in
 
-SUBDIRS = System Light
+SUBDIRS = System Default
diff --git a/themes/meson.build b/themes/meson.build
index 8f00a36c66..5f1ab2bba1 100644
--- a/themes/meson.build
+++ b/themes/meson.build
@@ -1,6 +1,7 @@
+subdir('Default')
 
 themes = [
-  'System', 'Light',
+  'System',
 ]
 
 foreach theme : themes
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]