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.
2022-08-21 01:45:15 +08:00
|
|
|
/* 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);
|
|
|
|
|
2023-02-14 14:23:52 +08:00
|
|
|
/*
|
|
|
|
* 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");
|