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.
https://gitlab.gnome.org/GNOME/gtk/uploads/2568d34d0e539386d4e69910b495ab96/Screenshot_from_2019-09-18_20-27-26.png
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…
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 ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
IMPORTANT
=========
Each time you install/update the ClassicLooks theme, ANY HACKS THAT YOU HAVE
MADE TO YOUR PREVIOUS INSTALLATION WILL BE LOST as part of the install
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.
HACKING
=======
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
accelerators
- '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
below)
- 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
border
- 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
buttons
- '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
sub-theme:
- '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
PULL STRENGTH
- 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');
consequently, YOU MUST ALWAYS HAVE THE 'ClassicLooks' BASE THEME INSTALLED WHEN
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
follows:
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.