Override a theme color defined as @define-color theme

I need to override a theme color defined as @define-color theme… and coulden`t find a proper way. I’m trying to change my Inkscape background color with a slider.

Thanks so much in advance.

The easiest way to override one simple color was to “register” the local copied theme:

cd /home/foo/.themes/themename/gtk-3.0
glib-compile-resources gtk.gresource.xml

You can also follow this thread if it helps. Getting the default border colour for the current theme?

By background color, do you mean the white field — the “page” color? That’s not a theme color, it’s controlled by Inkscape. And in fact, for reasons I’ve never understood, it’s a document property, so it’s set per file.

If you go into File > Document Properties… the Page tab has a Background section where you can change the color and/or turn on checkerboard transparency. But it’ll only take effect for the current file.

I want to override in app the @theme_bg_color, using a color expression in CSS to ligther darker this value in all app

the problem is we have multiple users, enviroments, SO… in Inkscape proyect and is hard to know, as far I know, what is the default or the applyed theme location, to unset and reaply after change (alos seems a bad way to do)

Im looking for a C/C++ GTK3 way to override it, not a one user only change, I want this feature available to all Inkscape comunity, as I do for a big part of the code about theming in the new Inkscape 1.0 Beta just released. And showed in the post link. Just to be sure you undertrand my problem.

Thanks so much for reply me and sorry for my english.

Ah, OK. I think I see. Well…

  1. There is no mechanism provided for overriding theme colors, or anything else in theming, in a general, theme-independent fashion. How one would go about it, and even if it can be done at all, is different for every theme.
  2. The only “supported” mechanism for modifying any theming (which isn’t even really supported, it’s just “possible”) is to copy and modify the theme itself — to create a new theme based on the one you wish to modify, in other words.
  3. How easy, or even possible, it is to customize any given theme is entirely up to the theme’s author. Some theme authors provide not only the theme(s) themselves, but also guidance for anyone wishing to create customized themes based on them. Other themes — the default Adwaita in particular — are effectively unmodifiable because they are implemented entirely in source code, so there are no actual theme files available to be modified.
  4. (Also, worth noting: the new theme support in Inkscape consists of the ability to select a GTK theme for the application by placing standard theme content in an application-defined location:

    New theme folders can be added to the directory indicated in Edit > Preferences > System : User themes, or to the folder “themes” in your personal Inkscape configuration directory.

For a good example of a theme that supports customization, the Xfce ClassicLooks theme is distributed with comprehensive guidance on making modifications to the theme content, in the form of a ClassicLooks/TOOLS/CONFIG/HACKING text file included in the downloadable Zip archive of theme folders.

To give you an idea of how involved a process it is to customize a theme, even when customization is supported and encouraged by the theme’s original author(s), here’s the content of that file, which I’ve run through fold -s to wrap the long lines:

ClassicLooks/TOOLS/CONFIG/HACKING taken from the classiclooks-1.0.0.zip download.

~ This file last changed in version 1.0.0 ~

Each time you install/update the ClassicLooks theme, ANY HACKS THAT YOU HAVE 
procedure (see 'INSTALL' file). A straight-forward way to work around this 
problem, although a bit tedious, is to create a 'my-classiclooks-hacks' file in 
which you should write down any teaks you have made to your installation (e.g. 
for an existing "sub-theme", or for a new "sub-theme" that you have created), 
such that you can easily re-apply them to each new update/installation.
- Caution: you should create your 'my-classiclooks-hacks' file in a _persistent 
standard location_ (e.g. in your theme folder '~/.themes'); in particular, do 
_not_ create this file inside any of ClassicLooks theme's folders, as these 
folders get deleted each time you update/install a new version.

ClassicLooks is a _LIGHT_ theme (dark foreground/light background), and it 
_cannot_ be easily hacked into a dark theme in the current version. However, 
certain end-user customization tweaks are possible for each of the existing 
"sub-themes", and new self-contained ClassicLooks-based themes can be created.

Scrollbars and Sliders Settings
The default behavior of scrollbars in Gtk3 has changed from Gtk2 in the sense 
that, when clicking above/below the scrollbar knob, the knob moves to the 
point-of-click (by default) instead of moving one page up/down (the latter is 
the Gtk2 behavior). 

The Gtk3 default scrollbar behavior can be changed to Gtk2 behavior by adding a 
per-theme custom setting 'gtk-primary-button-warps-slider=false' in the 
'/gtk-3.0/settings.ini' file; however, the problem with setting 
'gtk-primary-button-warps-slider=false' is that not only scrollbars are 
affected, but rather _all_ widgets that are using GtkRange, including e.g. 
GtkScale which is commonly used as a "seek bar" in media players etc, such that 
Gtk3 seekbars will move in increments and not to the point-of-click.

The 'ClassicLooks' theme chooses to preserve scrollbar consistency with Gtk2, 
which implies that seekbar knobs will also move in increments and _not_ to the 
point-of-click. You can still use Gtk3 seekbars conveniently by placing the 
mouse pointer anywhere over the seekbar slider and then use your mouse wheel 
(or trackpad, etc) to rapidly change the seek position to a desired point.

Hacking: you can make the seekbars behave in the default Gtk3 mode (i.e. move 
the seekbar knob to the point-of-click) by setting 
'gtk-primary-button-warps-slider=true' in the 
'ClassicLooks/gtk-3.0/settings.ini' file, but this will also change the 
scrollbars' behavior to point-of-click (note that this setting in 
'ClassicLooks/gtk-3.0/settings.ini' will change the scrollbars/seekbars 
behavior for all ClassicLooks sub-themes).

Appearance settings
Various appearance options for widgets can be easily changed for each 
ClassicLooks "sub-theme" (e.g. ClassicLooks, ClassicLooks Bronze, etc) by 
editing the filenames which have the form 'key-name-XXX.css' in the 
'gtk-2.0/tweaks.css' _AND_ 'gtk-3.0/tweaks.css' files of each sub-theme:
- for keyboard navigation options, set the file name 
'keyboard-navigation-XXX.css' to:
  - 'keyboard-navigation-off.css': disable focus rectangles and menu 
  - 'keyboard-navigation-on.css': enable focus rectangles and menu accelerators
    - note: applications tend to respond inconsistently to these settings
- for button-pressed options, set the file name 'button-pressed-XXX.css' to:
  - button-pressed-sunken: pressed buttons are sunken
  - button-pressed-dented: pressed buttons are bent inwards (gtk3 only)
- for default button options, set the file name 'default-button-XXX.css' to:
  - 'default-button-off.css': do not highlight the default buttons
  - 'default-button-contrast.css': use contrast for highting the default buttons
  - 'default-button-themed.css': colorize the default buttons based on the 
theme colors
  - 'default-button-explicit.css': colorize the default buttons with 
'default_button_explicit_color' value (see 'Accent colors settings' paragraph 
- for paned windows separators, set the file name 'pane-separator-XXX.css' to:
  - 'pane-separator-auto.css': separator width determined by apps (like adwaita)
  - 'pane-separator-wide.css': force wide separators
- for tab geometry options, set the file name 'tab-XXX.css' to:
  - 'tab-tab.css': tabs bent outward
  - 'tab-button.css': gtk2 tabs bent outwards, gtk3 buttons
  - 'tab-flat.css': flat tabs
  - 'tab-notebook.css': gtk2 tabs bent inwards, gtk3 tabs like adwaita
- for menu selection options, set the file names 'menu-selection-XXX.css' to:
  - 'menu-selection-flat.css': flat menu selection
  - 'menu-selection-dented.css': menu selection is bent inwards
  - 'menu-selection-bulged.css': menu selection is bent outwards
  - 'menu-selection-bulged-slight.css': menu selection is slightly bent outwards
  - 'menu-selection-bulged-rounded.css': bulged menu selection with rounded 
- for menu separator options, set the file names 'menu-separator-XXX.css' to:
  - 'menu-separator-light.css': flat light-colored menu separators
  - 'menu-separator-dark.css': flat darker-colored menu separators
  - 'menu-separator-dented.css': dented menu separators
    - note: for 'menu-separator-dented.css' the relief effect can become 
not/barely/unpleasently visible on very light menu backgrounds
- for adjusting some of the theme controls to make them ergonomic on various 
DPI displays, set the file name 'dpi-XXX.css' to:
  - 'dpi-low.css': adequate for low/medium DPI displays
  - 'dpi-high.css': adequate for high DPI displays
    - note: themes that use 'dpi-high' should be used in conjunction with the 
'ClassicLooks XFWM4 (HDPI)' window manager theme and larger font sizes (for 
both the window manager theme and the display theme)
- for xfce panel colorization options, set the file name 'panel-XXX.css' to:
  - 'panel-contrast.css': monochrome panel with theme's background color and 
contrast-based colorization of pressed buttons
  - 'panel-dark.css': dark panel with theme-based colorization of pressed 
  - 'panel-black.css': flat black panel with theme-based colorization of 
pressed buttons
  - 'panel-themed.css': fully themed panel
- for desktop icons' background options, set the file name 
'desktop-icon-background-XXX.css' to:
  - 'desktop-icon-background-off.css': don't highlight the desktop icons' labels
  - 'desktop-icon-background-on.css': set a translucent background color for 
desktop icons' labels

Accent colors settings
The following colors can be easily changed for each ClassicLooks "sub-theme" 
(e.g. ClassicLooks, ClassicLooks Bronze, etc) by editing the corresponding hex 
value in the 'gtk-2.0/tweaks.css' _AND_ 'gtk-3.0/tweaks.css' files of each 
- 'selected_fg_color': the selected foreground (text) color for selected items
- 'selected_nofocus_fg_color': the selected foreground (text) color for 
selected items which are not focused, overrides the above
- 'selected_bg_color': the selected items' background color
- 'canvas_bg_color': the background color of (most) text and drawing areas
- 'entry_bg_color': the background color of entries (on Gtk2 this setting may 
affect GtkTreeView)
- 'menu_bg_color': the background color of menus and popups
- 'default_button_explicit_color': color used by 'default-button-explicit' 
mode, see 'Appearance setting' paragraph above

Base color settings (ONLY FOR THE DARING!)
Because of the history of this theme (adaptation from adwaita:gtk3 and 
ambiance:gtk2, which i consider both to be pretty complete themes), the method 
for changing the background color of windows and widgets (a.k.a. the theme's 
"base color") is a bit convoluted, and it only allows for relatively small 
variations for the windows' and widgets' background colors.

Specifically, the background color of windows and widgets (including the widget 
borders, highlight tones, etc) is determined starting from a light-grey "base 
value" (#e8e7ea), which is then "pulled towards" a COLOR TONE with a certain 
- the color tone is a color notation of the form '#rrggbb'
- the pull strength is a number of the form '00.nn'

- for example, setting the color tone to #99ddff will designate a 
fluorescent-blue color tone, and setting the pull stregth to 00.20 will 
determine a moderate color satuation, thus resulting in a light-blue color

In order to tweak the background color for a "sub-theme's" windows and widgets, 
enter your "sub-theme's" folder (e.g. '~/.themes/ClassicLooks', 
'~/.themes/ClassicLooks Bronze', etc), open the file 'themecolor.sh' in a text 
editor, and then locate the string of the form "#rrggbb/00.nn": this string 
determines the theme's 'color_tone/pull_strength' value pair; then:
  a) change the color_tone to the desired value toward which the background 
color will be shifted (e.g. setting the color tone to "#880088" will create a 
purple-ish theme)
  b) change the pull_strength value to determine the color saturation; this 
value MUST be of the form '00.nn' (you may have to experiment with this value 
until you'll get the desired effect)
  c) save, and then run, the 'themecolor.sh' script

IMPORTANT: running the 'themecolor.sh' script for changing a sub-theme's base 
color relies on a file found inside the 'ClassicLooks' "base theme" folder 
(namely 'set-theme-color.sh' in sub-folder 'ClassicLooks/TOOLS/CONFIG/lib'); 
RUNNING THE 'themecolor.sh' SCRIPT FROM ANY SUB-THEME FOLDER, or elese running 
the script will exit with an error and will have no effect.

Guidelines for generating a theme background color
- the brightness of the color tone, i.e. the _average_ between its RGB 
components, should be UP TO #80 (e.g. a value of #ff8000 is okay, but #ff8080 
is too large), and the pull strength value MUST be of the form '00.nn' and it 
SHOUD be up to 00.30 (i.e. try to avoid using values larger than 00.30)
- as a rule of thumb, try to use LOWER BRIGHTNESS VLUES for the color tone, and 
this will implicitly require lower values for the '00.nn' pull strength for 
achieving the same background color (e.g '#886600/00.20' generates almost the 
same background color as '#B4A474/00.40', but the first option should be used 
because it has lower brightness and pull stregth values). Using brightness 
values higher than #80 will result in lower contrasts for text and border 
lines, and using pull strength values higher than 00.25 may create unpleasant 
shadows under text (depending also on the color tone) and will reduce the 
contrast for borders and highlights

Creating your own ClassicLooks-based theme
You can easily create a new _self-contained_ ClassicLooks-based theme as 
  1) first create a COPY OF THE BASE THEME FOLDER 'ClassicLooks' to a new 
folder, and name the new folder considering the following:
    - if the folder name of your new theme starts with 'ClassicLooks' (e.g. 
'ClassicLooks MyCustomTheme') then your theme will be automatically removed by 
the install/uninstall procedures described in the 'INSTALL' file
    - if the folder name of your new theme does _NOT_ start with 'ClassicLooks' 
(e.g. 'ClassicLooks-MyCustomTheme') then it will _NOT_ be removed by the 
install/uninstall procedures described in the 'INSTALL' file, and your theme 
will remain usable as-is alongside a new ClassicLooks update
  2) set your theme's accent colors by following the procedure described in the 
'Accent colors settings' paragraph above
  3) set your theme's windows and widgets background color by following the 
procedure described in the 'Base color settings' paragraph above
  4) set your theme's appearance options by following the procedure described 
in the 'Appearance settings' paragraph above

After you have finished the procedure described above (steps 1...4), you can 
archive the resulting display theme folder (e.g. 'ClassicLooks-MyCustomTheme') 
TOGETHER WITH the 'ClassicLooks XFWM4' and 'ClassicLooks XFWM4 (HDPI)' window 
manager folders, and the resulting package (e.g. 
'ClassicLooks-MyCustomTheme.zip') will contain all the necessary files required 
for the theme to be installed as an independent, stand-alone component on an 
Xfce machine (including the installation and hacking instructions).

Have fun!

Thanks FeRDNYC.

I have two MR to add custom theming to Inkscape, we are discusing it but we also need to retain system themes wathever place it is so finaly Inkscape dosen’t have currently custom themes jet but can use any theme instaled system/user wide.

This is good but we can’t tweack the themes because we are not limiting it so we can use any theme.
In C++ there is a option to apply a CSSProvider to modify the THEME CSSprovider but the problem is the @theme_bg_color (The only one I want to touch) is a constant and can’ t be modified by this way.

I think I need to add the CSS unset file provided by GTK and reaply the theme parsed each time I move the slider on the pic (top post).

Thanks so much for the help.

I try to register a empty theme with glib-compile-resources gtk.gresource.xml
And the result is

Failed to open file “gtk.gresource.xml”: No such file or directory

What Im doing wrong?

Finaly I get woring reading current style, parsing and reaplying. Thanks so much for the feedback. the code is in inkscape.cpp of the branch (we remove branch once merged) https://gitlab.com/inkscape/inkscape/merge_requests/906

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.